1 files changed, 30 insertions, 0 deletions
diff --git a/storybook/toggle-storybook.web.tsx b/storybook/toggle-storybook.web.tsx
new file mode 100644
index 0000000..f1bd034
--- /dev/null
+++ b/storybook/toggle-storybook.web.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from "react"
+import * as QueryString from "query-string"
+
+interface StorybookQueryParams {
+  storybook?: boolean
+}
+
+export const ToggleStorybook = (props) => {
+  const [StorybookUIRoot, setStorybookUIRoot] = useState<any>(null)
+  const [queryParams, setQueryParams] = useState<StorybookQueryParams>({})
+
+  useEffect(() => {
+    if (__DEV__) {
+      // Load the storybook UI once
+      setStorybookUIRoot(() => require("./storybook").StorybookUIRoot)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (__DEV__) {
+      setQueryParams(QueryString.parse(window.location.search))
+    }
+  }, [window.location.search])
+
+  if (queryParams?.storybook) {
+    return StorybookUIRoot ? <StorybookUIRoot /> : null
+  } else {
+    return props.children
+  }
+}