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__ ) { 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 ; } } ;