react-use/main.7c021fdf.iframe.bundle.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(2).__importStar(__webpack_require__(0)).createElement,ShowDocs=function ShowDocs(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))};exports.default=ShowDocs;try{ShowDocs.displayName="ShowDocs",ShowDocs.__docgenInfo={description:"",displayName:"ShowDocs",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/util/ShowDocs.tsx#ShowDocs"]={docgenInfo:ShowDocs.__docgenInfo,name:"ShowDocs",path:"stories/util/ShowDocs.tsx#ShowDocs"})}catch(__react_docgen_typescript_loader_error){}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1);var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLogger=exports.useLockBodyScroll=exports.useLocation=exports.useLocalStorage=exports.useList=exports.useLifecycles=exports.useLatest=exports.useKeyPressEvent=exports.useKeyPress=exports.createBreakpoint=exports.useKey=exports.useIsomorphicLayoutEffect=exports.useInterval=exports.useIntersection=exports.useIdle=exports.useHoverDirty=exports.useHover=exports.useHarmonicIntervalFn=exports.useGetSetState=exports.useGetSet=exports.useGeolocation=exports.useFullscreen=exports.useFavicon=exports.useError=exports.useEvent=exports.ensuredForwardRef=exports.useEnsuredForwardedRef=exports.useEffectOnce=exports.useDropArea=exports.useDrop=exports.useDefault=exports.useDeepCompareEffect=exports.useDebounce=exports.useCustomCompareEffect=exports.useCss=exports.useCounter=exports.useCopyToClipboard=exports.useCookie=exports.useClickAway=exports.useBoolean=exports.useBeforeUnload=exports.useBattery=exports.useAudio=exports.useAsyncRetry=exports.useAsyncFn=exports.useAsync=exports.createStateContext=exports.createReducer=exports.createReducerContext=exports.createMemo=void 0,exports.useUpsert=exports.useUpdateEffect=exports.useUpdate=exports.useUnmountPromise=exports.useUnmount=exports.useTween=exports.useToggle=exports.useTitle=exports.useTimeoutFn=exports.useTimeout=exports.useThrottleFn=exports.useThrottle=exports.useStateList=exports.useStateWithHistory=exports.useStartTyping=exports.useSpeech=exports.useSlider=exports.useSize=exports.useShallowCompareEffect=exports.useSetState=exports.useSessionStorage=exports.useScrolling=exports.useScroll=exports.useScratch=exports.useSearchParam=exports.useRafState=exports.useRafLoop=exports.useRaf=exports.useQueue=exports.usePromise=exports.usePreviousDistinct=exports.usePrevious=exports.usePermission=exports.usePageLeave=exports.useOrientation=exports.useObservable=exports.useNumber=exports.useNetworkState=exports.useMouseWheel=exports.useMouseHovered=exports.useMouse=exports.useMountedState=exports.useMount=exports.useMotion=exports.useMethods=exports.useMediatedState=exports.useMediaDevices=exports.useMedia=exports.useMap=exports.useLongPress=void 0,exports.useHash=exports.createGlobalState=exports.useSet=exports.useFirstMountState=exports.useRendersCount=exports.useMeasure=exports.useWindowSize=exports.useWindowScroll=exports.useMultiStateValidator=exports.useScrollbarWidth=exports.useStateValidator=exports.useVideo=exports.useVibrate=void 0;var createMemo_1=__webpack_require__(773);Object.defineProperty(exports,"createMemo",{enumerable:!0,get:function get(){return __importDefault(createMemo_1).default}});var createReducerContext_1=__webpack_require__(774);Object.defineProperty(exports,"createReducerContext",{enumerable:!0,get:function get(){return __importDefault(createReducerContext_1).default}});var createReducer_1=__webpack_require__(775);Object.defineProperty(exports,"createReducer",{enumerable:!0,get:function get(){return __importDefault(createReducer_1).default}});var createStateContext_1=__webpack_require__(777);Object.defineProperty(exports,"createStateContext",{enumerable:!0,get:function get(){return __importDefault(createStateContext_1).default}});var useAsync_1=__webpack_require__(387);Object.defineProperty(exports,"useAsync",{enumerable:!0,get:function get(){return __importDefault(useAsync_1).default}});var useAsyncFn_1=__webpack_require__(252);Object.defineProperty(exports,"useAsyncFn",{enumerable:!0,get:function get(){return __importDefault(useAsyncFn_1).default}});var useAsyncRetry_1=__webpack_require__(778);Object.defineProperty(exports,"useAsyncRetry",{enumerable:!0,get:function get(){return __importDefault(useAsyncRetry_1).default}});var useAudio_1=__webpack_require__(779);Object.defineProperty(exports,"useAudio",{enumerable:!0,get:function get(){return __importDefault(useAudio_1).default}});var useBattery_1=__webpack_require__(781);Object.defineProperty(exports,"useBattery",{enumerable:!0,get:function get(){return __importDefault(useBattery_1).default}});var useBeforeUnload_1=__webpack_require__(783);Object.defineProperty(exports,"useBeforeUnload",{enumerable:!0,get:function get(){return __importDefault(useBeforeUnload_1).default}});var useBoolean_1=__webpack_require__(784);Object.defineProperty(exports,"useBoolean",{enumerable:!0,get:function get(){return __importDefault(useBoolean_1).default}});var useClickAway_1=__webpack_require__(785);Object.defineProperty(exports,"useClickAway",{enumerable:!0,get:function get(){return __importDefault(useClickAway_1).default}});var useCookie_1=__webpack_require__(786);Object.defineProperty(exports,"useCookie",{enumerable:!0,get:function get(){return __importDefault(useCookie_1).default}});var useCopyToClipboard_1=__webpack_require__(788);Object.defineProperty(exports,"useCopyToClipboard",{enumerable:!0,get:function get(){return __importDefault(useCopyToClipboard_1).default}});var useCounter_1=__webpack_require__(390);Object.defineProperty(exports,"useCounter",{enumerable:!0,get:function get(){return __importDefault(useCounter_1).default}});var useCss_1=__webpack_require__(791);Object.defineProperty(exports,"useCss",{enumerable:!0,get:function get(){return __importDefault(useCss_1).default}});var useCustomCompareEffect_1=__webpack_require__(254);Object.defineProperty(exports,"useCustomCompareEffect",{enumerable:!0,get:function get(){return __importDefault(useCustomCompareEffect_1).default}});var useDebounce_1=__webpack_require__(797);Object.defineProperty(exports,"useDebounce",{enumerable:!0,get:function get(){return __importDefault(useDebounce_1).default}});var useDeepCompareEffect_1=__webpack_require__(798);Object.defineProperty(exports,"useDeepCompareEffect",{enumerable:!0,get:function get(){return __importDefault(useDeepCompareEffect_1).default}});var useDefault_1=__webpack_require__(799);Object.defineProperty(exports,"useDefault",{enumerable:!0,get:function get(){return __importDefault(useDefault_1).default}});var useDrop_1=__webpack_require__(800);Object.defineProperty(exports,"useDrop",{enumerable:!0,get:function get(){return __importDefault(useDrop_1).default}});var useDropArea_1=__webpack_require__(801);Object.defineProperty(exports,"useDropArea",{enumerable:!0,get:function get(){return __importDefault(useDropArea_1).default}});var useEffectOnce_1=__webpack_require__(120);Object.defineProperty(exports,"useEffectOnce",{enumerable:!0,get:function get(){return __importDefault(useEffectOnce_1).default}});var useEnsuredForwardedRef_1=__webpack_require__(802);Object.defineProperty(exports,"useEnsuredForwardedRef",{enumerable:!0,get:function get(){return __importDefault(useEnsuredForwardedRef_1).default}}),Object.defineProperty(exports,"ensuredForwardRef",{enumerable:!0,get:function get(){return useEnsuredForwardedRef_1.ensuredForwardRef}});var useEvent_1=__webpack_require__(385);Object.defineProperty(exports,"useEvent",{enumerable:!0,get:function get(){return __importDefault(useEvent_1).default}});var useError_1=__webpack_require__(803);Object.defineProperty(exports,"useError",{enumerable:!0,get:function get(){return __importDefault(useError_1).default}});var useFavicon_1=__webpack_require__(804);Object.defineProperty(exports,"useFavicon",{enumerable:!0,get:function get(){return __importDefault(useFavicon_1).default}});var useFullscreen_1=__webpack_require__(805);Object.defineProperty(exports,"useFullscreen",{enumerable:!0,get:function get(){return __importDefault(useFullscreen_1).default}});var useGeolocation_1=__webpack_require__(807);Object.defineProperty(exports,"useGeolocation",{enumerable:!0,get:function get(){return __importDefault(useGeolocation_1).default}});var useGetSet_1=__webpack_require__(391);Object.defineProperty(exports,"useGetSet",{enumerable:!0,get:function get(){return __importDefault(useGetSet_1).default}});var useGetSetState_1=__webpack_require__(808);Object.defineProperty(exports,"useGetSetState",{enumerable:!0,get:function get(){return __importDefault(useGetSetState_1).default}});var useHarmonicIntervalFn_1=__webpack_require__(809);Object.defineProperty(exports,"useHarmonicIntervalFn",{enumerable:!0,get:function get(){return __importDefault(useHarmonicIntervalFn_1).default}});var useHover_1=__webpack_require__(811);Object.defineProperty(exports,"useHover",{enumerable:!0,get:function get(){return __importDefault(useHover_1).default}});var useHoverDirty_1=__webpack_require__(392);Object.defineProperty(exports,"useHoverDirty",{enumerable:!0,get:function get(){return __importDefault(useHoverDirty_1).default}});var useIdle_1=__webpack_require__(812);Object.defineProperty(exports,"useIdle",{enumerable:!0,get:function get(){return __importDefault(useIdle_1).default}});var useIntersection_1=__webpack_require__(814);Object.defineProperty(exports,"useIntersection",{enumerable:!0,get:function get(){return __importDefault(useIntersection_1).default}});var useInterval_1=__webpack_require__(815);Object.defineProperty(exports,"useInterval",{enumerable:!0,get:function get(){return __importDefault(useInterval_1).default}});var useIsomorphicLayoutEffect_1=__webpack_require__(89);Object.defineProperty(exports,"useIsomorphicLayoutEffect",{enumerable:!0,get:function get(){return __importDefault(useIsomorphicLayoutEffect_1).default}});var useKey_1=__webpack_require__(251);Object.defineProperty(exports,"useKey",{enumerable:!0,get:function get(){return __importDefault(useKey_1).default}});var createBreakpoint_1=__webpack_require__(816);Object.defineProperty(exports,"createBreakpoint",{enumerable:!0,get:function get(){return __importDefault(createBreakpoint_1).default}});var useKeyPress_1=__webpack_require__(393);Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function get(){return __importDefault(useKeyPress_1).default}});var useKeyPressEvent_1=__webpack_require__(817);Object.defineProperty(exports,"useKeyPressEvent",{enumerable:!0,get:function get(){return __importDefault(useKeyPressEvent_1).default}});var useLatest_1=__webpack_require__(394);Object.defineProperty(exports,"useLatest",{enumerable:!0,get:function get(){return __importDefault(useLatest_1).default}});var useLifecycles_1=__webpack_require__(395);Object.defineProperty(exports,"useLifecycles",{enumerable:!0,get:function get(){return __importDefault(useLifecycles_1).default}});var useList_1=__webpack_require__(396);Object.defineProperty(exports,"useList",{enumerable:!0,get:function get(){return __importDefault(useList_1).default}});var useLocalStorage_1=__webpack_require__(818);Object.defineProperty(exports,"useLocalStorage",{enumerable:!0,get:function get(){return __importDefault(useLocalStorage_1).default}});var useLocation_1=__webpack_require__(819);Object.defineProperty(exports,"useLocation",{enumerable:!0,get:function get(){return __importDefault(useLocation_1).default}});var useLockBodyScroll_1=__webpack_require__(820);Object.defineProperty(exports,"useLockBodyScroll",{enumerable:!0,get:function get(){return __importDefault(useLockBodyScroll_1).default}});var useLogger_1=__webpack_require__(821);Object.defineProperty(exports,"useLogger",{enumerable:!0,get:function get(){return __importDefault(useLogger_1).default}});var useLongPress_1=__webpack_require__(822);Object.defineProperty(exports,"useLongPress",{enumerable:!0,get:function get(){return __importDefault(useLongPress_1).default}});var useMap_1=__webpack_require__(823);Object.defineProperty(exports,"useMap",{enumerable:!0,get:function get(){return __importDefault(useMap_1).default}});var useMedia_1=__webpack_require__(824);Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function get(){return __importDefault(useMedia_1).default}});var useMediaDevices_1=__webpack_require__(825);Object.defineProperty(exports,"useMediaDevices",{enumerable:!0,get:function get(){return __importDefault(useMediaDevices_1).default}});var useMediatedState_1=__webpack_require__(397);Object.defineProperty(exports,"useMediatedState",{enumerable:!0,get:function get(){return useMediatedState_1.useMediatedState}});var useMethods_1=__webpack_require__(826);Object.defineProperty(exports,"useMethods",{enumerable:!0,get:function get(){return __importDefault(useMethods_1).default}});var useMotion_1=__webpack_require__(827);Object.defineProperty(exports,"useMotion",{enumerable:!0,get:function get(){return __importDefault(useMotion_1).default}});var useMount_1=__webpack_require__(257);Object.defineProperty(exports,"useMount",{enumerable:!0,get:function get(){return __importDefault(useMount_1).default}});var useMountedState_1=__webpack_require__(104);Object.defineProperty(exports,"useMountedState",{enumerable:!0,get:function get(){return __importDefault(useMountedState_1).default}});var useMouse_1=__webpack_require__(398);Object.defineProperty(exports,"useMouse",{enumerable:!0,get:function get(){return __importDefault(useMouse_1).default}});var useMouseHovered_1=__webpack_require__(828);Object.defineProperty(exports,"useMouseHovered",{enumerable:!0,get:function get(){return __importDefault(useMouseHovered_1).default}});var useMouseWheel_1=__webpack_require__(829);Object.defineProperty(exports,"useMouseWheel",{enumerable:!0,get:function get(){return __importDefault(useMouseWheel_1).default}});var useNetworkState_1=__webpack_require__(830);Object.defineProperty(exports,"useNetworkState",{enumerable:!0,get:function get(){return __importDefault(useNetworkState_1).default}});var useNumber_1=__webpack_require__(831);Object.defineProperty(exports,"useNumber",{enumerable:!0,get:function get(){return __importDefault(useNumber_1).default}});var useObservable_1=__webpack_require__(832);Object.defineProperty(exports,"useObservable",{enumerable:!0,get:function get(){return __importDefault(useObservable_1).default}});var useOrientation_1=__webpack_require__(833);Object.defineProperty(exports,"useOrientation",{enumerable:!0,get:function get(){return __importDefault(useOrientation_1).default}});var usePageLeave_1=__webpack_require__(834);Object.defineProperty(exports,"usePageLeave",{enumerable:!0,get:function get(){return __importDefault(usePageLeave_1).default}});var usePermission_1=__webpack_require__(835);Object.defineProperty(exports,"usePermission",{enumerable:!0,get:function get(){return __importDefault(usePermission_1).default}});var usePrevious_1=__webpack_require__(836);Object.defineProperty(exports,"usePrevious",{enumerable:!0,get:function get(){return __importDefault(usePrevious_1).default}});var usePreviousDistinct_1=__webpack_require__(837);Object.defineProperty(exports,"usePreviousDistinct",{enumerable:!0,get:function get(){return __importDefault(usePreviousDistinct_1).default}});var usePromise_1=__webpack_require__(838);Object.defineProperty(exports,"usePromise",{enumerable:!0,get:function get(){return __importDefault(usePromise_1).default}});var useQueue_1=__webpack_require__(839);Object.defineProperty(exports,"useQueue",{enumerable:!0,get:function get(){return __importDefault(useQueue_1).default}});var useRaf_1=__webpack_require__(399);Object.defineProperty(exports,"useRaf",{enumerable:!0,get:function get(){return __importDefault(useRaf_1).default}});var useRafLoop_1=__webpack_require__(840);Object.defineProperty(exports,"useRafLoop",{enumerable:!0,get:function get(){return __importDefault(useRafLoop_1).default}});var useRafState_1=__webpack_require__(147);Object.defineProperty(exports,"useRafState",{enumerable:!0,get:function get(){return __importDefault(useRafState_1).default}});var useSearchParam_1=__webpack_require__(841);Object.defineProperty(exports,"useSearchParam",{enumerable:!0,get:function get(){return __importDefault(useSearchParam_1).default}});var useScratch_1=__webpack_require__(842);Object.defineProperty(exports,"useScratch",{enumerable:!0,get:function get(){return __importDefault(useScratch_1).default}});var useScroll_1=__webpack_require__(848);Object.defineProperty(exports,"useScroll",{enumerable:!0,get:function get(){return __importDefault(useScroll_1).default}});var useScrolling_1=__webpack_require__(849);Object.defineProperty(exports,"useScrolling",{enumerable:!0,get:function get(){return __importDefault(useScrolling_1).default}});var useSessionStorage_1=__webpack_require__(850);Object.defineProperty(exports,"useSessionStorage",{enumerable:!0,get:function get(){return __importDefault(useSessionStorage_1).default}});var useSetState_1=__webpack_require__(145);Object.defineProperty(exports,"useSetState",{enumerable:!0,get:function get(){return __importDefault(useSetState_1).default}});var useShallowCompareEffect_1=__webpack_require__(851);Object.defineProperty(exports,"useShallowCompareEffect",{enumerable:!0,get:function get(){return __importDefault(useShallowCompareEffect_1).default}});var useSize_1=__webpack_require__(853);Object.defineProperty(exports,"useSize",{enumerable:!0,get:function get(){return __importDefault(useSize_1).default}});var useSlider_1=__webpack_require__(854);Object.defineProperty(exports,"useSlider",{enumerable:!0,get:function get(){return __importDefault(useSlider_1).default}});var useSpeech_1=__webpack_require__(856);Object.defineProperty(exports,"useSpeech",{enumerable:!0,get:function get(){return __importDefault(useSpeech_1).default}});var useStartTyping_1=__webpack_require__(857);Object.defineProperty(exports,"useStartTyping",{enumerable:!0,get:function get(){return __importDefault(useStartTyping_1).default}});var useStateWithHistory_1=__webpack_require__(858);Object.defineProperty(exports,"useStateWithHistory",{enumerable:!0,get:function get(){return useStateWithHistory_1.useStateWithHistory}});var useStateList_1=__webpack_require__(859);Object.defineProperty(exports,"useStateList",{enumerable:!0,get:function get(){return __importDefault(useStateList_1).default}});var useThrottle_1=__webpack_require__(860);Object.defineProperty(exports,"useThrottle",{enumerable:!0,get:function get(){return __importDefault(useThrottle_1).default}});var useThrottleFn_1=__webpack_require__(861);Object.defineProperty(exports,"useThrottleFn",{enumerable:!0,get:function get(){return __importDefault(useThrottleFn_1).default}});var useTimeout_1=__webpack_require__(862);Object.defineProperty(exports,"useTimeout",{enumerable:!0,get:function get(){return __importDefault(useTimeout_1).default}});var useTimeoutFn_1=__webpack_require__(255);Object.defineProperty(exports,"useTimeoutFn",{enumerable:!0,get:function get(){return __importDefault(useTimeoutFn_1).default}});var useTitle_1=__webpack_require__(863);Object.defineProperty(exports,"useTitle",{enumerable:!0,get:function get(){return __importDefault(useTitle_1).default}});var useToggle_1=__webpack_require__(389);Object.defineProperty(exports,"useToggle",{enumerable:!0,get:function get(){return __importDefault(useToggle_1).default}});var useTween_1=__webpack_require__(864);Object.defineProperty(exports,"useTween",{enumerable:!0,get:function get(){return __importDefault(useTween_1).default}});var useUnmount_1=__webpack_require__(182);Object.defineProperty(exports,"useUnmount",{enumerable:!0,get:function get(){return __importDefault(useUnmount_1).default}});var useUnmountPromise_1=__webpack_require__(866);Object.defineProperty(exports,"useUnmountPromise",{enumerable:!0,get:function get(){return __importDefault(useUnmountPromise_1).default}});var useUpdate_1=__webpack_require__(88);Object.defineProperty(exports,"useUpdate",{enumerable:!0,get:function get(){return __importDefault(useUpdate_1).default}});var useUpdateEffect_1=__webpack_require__(143);Object.defineProperty(exports,"useUpdateEffect",{enumerable:!0,get:function get(){return __importDefault(useUpdateEffect_1).default}});var useUpsert_1=__webpack_require__(867);Object.defineProperty(exports,"useUpsert",{enumerable:!0,get:function get(){return __importDefault(useUpsert_1).default}});var useVibrate_1=__webpack_require__(868);Object.defineProperty(exports,"useVibrate",{enumerable:!0,get:function get(){return __importDefault(useVibrate_1).default}});var useVideo_1=__webpack_require__(869);Object.defineProperty(exports,"useVideo",{enumerable:!0,get:function get(){return __importDefault(useVideo_1).default}});var useStateValidator_1=__webpack_require__(401);Object.defineProperty(exports,"useStateValidator",{enumerable:!0,get:function get(){return __importDefault(useStateValidator_1).default}});var useScrollbarWidth_1=__webpack_require__(870);Object.defineProperty(exports,"useScrollbarWidth",{enumerable:!0,get:function get(){return useScrollbarWidth_1.useScrollbarWidth}});var useMultiStateValidator_1=__webpack_require__(872);Object.defineProperty(exports,"useMultiStateValidator",{enumerable:!0,get:function get(){return useMultiStateValidator_1.useMultiStateValidator}});var useWindowScroll_1=__webpack_require__(873);Object.defineProperty(exports,"useWindowScroll",{enumerable:!0,get:function get(){return __importDefault(useWindowScroll_1).default}});var useWindowSize_1=__webpack_require__(874);Object.defineProperty(exports,"useWindowSize",{enumerable:!0,get:function get(){return __importDefault(useWindowSize_1).default}});var useMeasure_1=__webpack_require__(875);Object.defineProperty(exports,"useMeasure",{enumerable:!0,get:function get(){return __importDefault(useMeasure_1).default}});var useRendersCount_1=__webpack_require__(402);Object.defineProperty(exports,"useRendersCount",{enumerable:!0,get:function get(){return useRendersCount_1.useRendersCount}});var useFirstMountState_1=__webpack_require__(144);Object.defineProperty(exports,"useFirstMountState",{enumerable:!0,get:function get(){return useFirstMountState_1.useFirstMountState}});var useSet_1=__webpack_require__(876);Object.defineProperty(exports,"useSet",{enumerable:!0,get:function get(){return __importDefault(useSet_1).default}});var createGlobalState_1=__webpack_require__(877);Object.defineProperty(exports,"createGlobalState",{enumerable:!0,get:function get(){return createGlobalState_1.createGlobalState}});var useHash_1=__webpack_require__(878);Object.defineProperty(exports,"useHash",{enumerable:!0,get:function get(){return useHash_1.useHash}})},,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.isNavigator=exports.isBrowser=exports.off=exports.on=exports.noop=void 0;exports.noop=function noop(){},exports.on=function on(obj){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];obj&&obj.addEventListener&&obj.addEventListener.apply(obj,args)},exports.off=function off(obj){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];obj&&obj.removeEventListener&&obj.removeEventListener.apply(obj,args)},exports.isBrowser="undefined"!=typeof window,exports.isNavigator="undefined"!=typeof navigator},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),updateReducer=function updateReducer(num){return(num+1)%1e6};exports.default=function useUpdate(){return react_1.useReducer(updateReducer,0)[1]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useIsomorphicLayoutEffect=__webpack_require__(11).isBrowser?react_1.useLayoutEffect:react_1.useEffect;exports.default=useIsomorphicLayoutEffect},,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useMountedState(){var mountedRef=react_1.useRef(!1),get=react_1.useCallback((function(){return mountedRef.current}),[]);return react_1.useEffect((function(){return mountedRef.current=!0,function(){mountedRef.current=!1}}),[]),get}},,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useEffectOnce(effect){react_1.useEffect(effect,[])}},,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useFirstMountState_1=__webpack_require__(144);exports.default=function useUpdateEffect(effect,deps){var isFirstMount=useFirstMountState_1.useFirstMountState();react_1.useEffect((function(){if(!isFirstMount)return effect()}),deps)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFirstMountState=void 0;var react_1=__webpack_require__(0);exports.useFirstMountState=function useFirstMountState(){var isFirst=react_1.useRef(!0);return isFirst.current?(isFirst.current=!1,!0):isFirst.current}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(33),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useSetState(initialState){void 0===initialState&&(initialState={});var _a=react_1.useState(initialState),state=_a[0],set=_a[1];return[state,react_1.useCallback((function(patch){set((function(prevState){return Object.assign({},prevState,patch instanceof Function?patch(prevState):patch)}))}),[])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveHookState=void 0,exports.resolveHookState=function resolveHookState(nextState,currentState){return"function"==typeof nextState?nextState.length?nextState(currentState):nextState():nextState}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(182));exports.default=function useRafState(initialState){var frame=react_1.useRef(0),_a=react_1.useState(initialState),state=_a[0],setState=_a[1],setRafState=react_1.useCallback((function(value){cancelAnimationFrame(frame.current),frame.current=requestAnimationFrame((function(){setState(value)}))}),[]);return useUnmount_1.default((function(){cancelAnimationFrame(frame.current)})),[state,setRafState]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(120));exports.default=function useUnmount(fn){var fnRef=react_1.useRef(fn);fnRef.current=fn,useEffectOnce_1.default((function(){return function(){return fnRef.current()}}))}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.CenterStory=void 0;var React=__webpack_require__(2).__importStar(__webpack_require__(0)),CenterStory=function CenterStory(_a){var children=_a.children;return React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"400px",margin:"40px auto"}},React.createElement("div",{style:{width:"100%"}},children))};exports.CenterStory=CenterStory;try{CenterStory.displayName="CenterStory",CenterStory.__docgenInfo={description:"",displayName:"CenterStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/util/CenterStory.tsx#CenterStory"]={docgenInfo:CenterStory.__docgenInfo,name:"CenterStory",path:"stories/util/CenterStory.tsx#CenterStory"})}catch(__react_docgen_typescript_loader_error){}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useEvent_1=tslib_1.__importDefault(__webpack_require__(385)),util_1=__webpack_require__(11);exports.default=function useKey(key,fn,opts,deps){void 0===fn&&(fn=util_1.noop),void 0===opts&&(opts={}),void 0===deps&&(deps=[key]);var _a=opts.event,event=void 0===_a?"keydown":_a,target=opts.target,options=opts.options,useMemoHandler=react_1.useMemo((function(){var predicate=function createKeyPredicate(keyFilter){return"function"==typeof keyFilter?keyFilter:"string"==typeof keyFilter?function(event){return event.key===keyFilter}:keyFilter?function(){return!0}:function(){return!1}}(key);return function handler(handlerEvent){if(predicate(handlerEvent))return fn(handlerEvent)}}),deps);useEvent_1.default(event,useMemoHandler,target,options)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104));exports.default=function useAsyncFn(fn,deps,initialState){void 0===deps&&(deps=[]),void 0===initialState&&(initialState={loading:!1});var lastCallId=react_1.useRef(0),isMounted=useMountedState_1.default(),_a=react_1.useState(initialState),state=_a[0],set=_a[1];return[state,react_1.useCallback((function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];var callId=++lastCallId.current;return set((function(prevState){return tslib_1.__assign(tslib_1.__assign({},prevState),{loading:!0})})),fn.apply(void 0,args).then((function(value){return isMounted()&&callId===lastCallId.current&&set({value:value,loading:!1}),value}),(function(error){return isMounted()&&callId===lastCallId.current&&set({error:error,loading:!1}),error}))}),deps)]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2).__importDefault(__webpack_require__(782));exports.default=react_1.default},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(85),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useCustomCompareEffect(effect,deps,depsEqual){var ref=react_1.useRef(void 0);ref.current&&depsEqual(deps,ref.current)||(ref.current=deps),react_1.useEffect(effect,ref.current)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useTimeoutFn(fn,ms){void 0===ms&&(ms=0);var ready=react_1.useRef(!1),timeout=react_1.useRef(),callback=react_1.useRef(fn),isReady=react_1.useCallback((function(){return ready.current}),[]),set=react_1.useCallback((function(){ready.current=!1,timeout.current&&clearTimeout(timeout.current),timeout.current=setTimeout((function(){ready.current=!0,callback.current()}),ms)}),[ms]),clear=react_1.useCallback((function(){ready.current=null,timeout.current&&clearTimeout(timeout.current)}),[]);return react_1.useEffect((function(){callback.current=fn}),[fn]),react_1.useEffect((function(){return set(),clear}),[ms]),[isReady,clear,set]}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__webpack_require__(2).__importDefault(__webpack_require__(120));exports.default=function useMount(fn){useEffectOnce_1.default((function(){fn()}))}},,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(41),__webpack_require__(42),__webpack_require__(13),__webpack_require__(18),__webpack_require__(22);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(4),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(424);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(766);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function loadStories(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(160)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),defaultTarget=util_1.isBrowser?window:null,isListenerType1=function isListenerType1(target){return!!target.addEventListener},isListenerType2=function isListenerType2(target){return!!target.on};exports.default=function useEvent(name,handler,target,options){void 0===target&&(target=defaultTarget),react_1.useEffect((function(){if(handler&&target)return isListenerType1(target)?util_1.on(target,name,handler,options):isListenerType2(target)&&target.on(name,handler,options),function(){isListenerType1(target)?util_1.off(target,name,handler,options):isListenerType2(target)&&target.off(name,handler,options)}}),[name,handler,target,JSON.stringify(options)])}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.AsyncFnReturn=exports.AsyncState=void 0;var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useAsyncFn_1=tslib_1.__importDefault(__webpack_require__(252)),useAsyncFn_2=__webpack_require__(252);Object.defineProperty(exports,"AsyncState",{enumerable:!0,get:function get(){return useAsyncFn_2.AsyncState}}),Object.defineProperty(exports,"AsyncFnReturn",{enumerable:!0,get:function get(){return useAsyncFn_2.AsyncFnReturn}}),exports.default=function useAsync(fn,deps){void 0===deps&&(deps=[]);var _a=useAsyncFn_1.default(fn,deps,{loading:!0}),state=_a[0],callback=_a[1];return react_1.useEffect((function(){callback()}),[callback]),state}},function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),React=tslib_1.__importStar(__webpack_require__(0)),react_1=__webpack_require__(0),useSetState_1=tslib_1.__importDefault(__webpack_require__(145)),parseTimeRanges_1=tslib_1.__importDefault(__webpack_require__(780));exports.default=function createHTMLMediaHook(tag){return function(elOrProps){var element,props;props=React.isValidElement(elOrProps)?(element=elOrProps).props:elOrProps;var _a=useSetState_1.default({buffered:[],time:0,duration:0,paused:!0,muted:!1,volume:1}),state=_a[0],setState=_a[1],ref=react_1.useRef(null),wrapEvent=function wrapEvent(userEvent,proxyEvent){return function(event){try{proxyEvent&&proxyEvent(event)}finally{userEvent&&userEvent(event)}}},onPlay=function onPlay(){return setState({paused:!1})},onPause=function onPause(){return setState({paused:!0})},onVolumeChange=function onVolumeChange(){var el=ref.current;el&&setState({muted:el.muted,volume:el.volume})},onDurationChange=function onDurationChange(){var el=ref.current;if(el){var duration=el.duration,buffered=el.buffered;setState({duration:duration,buffered:parseTimeRanges_1.default(buffered)})}},onTimeUpdate=function onTimeUpdate(){var el=ref.current;el&&setState({time:el.currentTime})},onProgress=function onProgress(){var el=ref.current;el&&setState({buffered:parseTimeRanges_1.default(el.buffered)})};element=element?React.cloneElement(element,tslib_1.__assign(tslib_1.__assign({controls:!1},props),{ref:ref,onPlay:wrapEvent(props.onPlay,onPlay),onPause:wrapEvent(props.onPause,onPause),onVolumeChange:wrapEvent(props.onVolumeChange,onVolumeChange),onDurationChange:wrapEvent(props.onDurationChange,onDurationChange),onTimeUpdate:wrapEvent(props.onTimeUpdate,onTimeUpdate),onProgress:wrapEvent(props.onProgress,onProgress)})):React.createElement(tag,tslib_1.__assign(tslib_1.__assign({controls:!1},props),{ref:ref,onPlay:wrapEvent(props.onPlay,onPlay),onPause:wrapEvent(props.onPause,onPause),onVolumeChange:wrapEvent(props.onVolumeChange,onVolumeChange),onDurationChange:wrapEvent(props.onDurationChange,onDurationChange),onTimeUpdate:wrapEvent(props.onTimeUpdate,onTimeUpdate),onProgress:wrapEvent(props.onProgress,onProgress)}));var lockPlay=!1,controls={play:function play(){var el=ref.current;if(el&&!lockPlay){var promise=el.play();if("object"===_typeof(promise)){lockPlay=!0;var resetLock=function resetLock(){lockPlay=!1};promise.then(resetLock,resetLock)}return promise}},pause:function pause(){var el=ref.current;if(el&&!lockPlay)return el.pause()},seek:function seek(time){var el=ref.current;el&&void 0!==state.duration&&(time=Math.min(state.duration,Math.max(0,time)),el.currentTime=time)},volume:function volume(_volume){var el=ref.current;el&&(_volume=Math.min(1,Math.max(0,_volume)),el.volume=_volume,setState({volume:_volume}))},mute:function mute(){var el=ref.current;el&&(el.muted=!0)},unmute:function unmute(){var el=ref.current;el&&(el.muted=!1)}};return react_1.useEffect((function(){var el=ref.current;el&&(setState({volume:el.volume,muted:el.muted,paused:el.paused}),props.autoPlay&&el.paused&&controls.play())}),[props.src]),[element,state,controls,ref]}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),toggleReducer=function toggleReducer(state,nextValue){return"boolean"==typeof nextValue?nextValue:!state};exports.default=function useToggle(initialValue){return react_1.useReducer(toggleReducer,initialValue)}},function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useGetSet_1=tslib_1.__importDefault(__webpack_require__(391)),hookState_1=__webpack_require__(146);exports.default=function useCounter(initialValue,max,min){void 0===initialValue&&(initialValue=0),void 0===max&&(max=null),void 0===min&&(min=null);var init=hookState_1.resolveHookState(initialValue);"number"!=typeof init&&console.error("initialValue has to be a number, got "+_typeof(initialValue)),"number"==typeof min?init=Math.max(init,min):null!==min&&console.error("min has to be a number, got "+_typeof(min)),"number"==typeof max?init=Math.min(init,max):null!==max&&console.error("max has to be a number, got "+_typeof(max));var _a=useGetSet_1.default(init),get=_a[0],setInternal=_a[1];return[get(),react_1.useMemo((function(){var set=function set(newState){var prevState=get(),rState=hookState_1.resolveHookState(newState,prevState);prevState!==rState&&("number"==typeof min&&(rState=Math.max(rState,min)),"number"==typeof max&&(rState=Math.min(rState,max)),prevState!==rState&&setInternal(rState))};return{get:get,set:set,inc:function inc(delta){void 0===delta&&(delta=1);var rDelta=hookState_1.resolveHookState(delta,get());"number"!=typeof rDelta&&console.error("delta has to be a number or function returning a number, got "+_typeof(rDelta)),set((function(num){return num+rDelta}))},dec:function dec(delta){void 0===delta&&(delta=1);var rDelta=hookState_1.resolveHookState(delta,get());"number"!=typeof rDelta&&console.error("delta has to be a number or function returning a number, got "+_typeof(rDelta)),set((function(num){return num-rDelta}))},reset:function reset(value){void 0===value&&(value=init);var rValue=hookState_1.resolveHookState(value,get());"number"!=typeof rValue&&console.error("value has to be a number or function returning a number, got "+_typeof(rValue)),init=rValue,set(rValue)}}}),[init,min,max])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88)),hookState_1=__webpack_require__(146);exports.default=function useGetSet(initialState){var state=react_1.useRef(hookState_1.resolveHookState(initialState)),update=useUpdate_1.default();return react_1.useMemo((function(){return[function(){return state.current},function(newState){state.current=hookState_1.resolveHookState(newState,state.current),update()}]}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useHoverDirty(ref,enabled){void 0===enabled&&(enabled=!0);var _a=react_1.useState(!1),value=_a[0],setValue=_a[1];return react_1.useEffect((function(){var onMouseOver=function onMouseOver(){return setValue(!0)},onMouseOut=function onMouseOut(){return setValue(!1)};enabled&&ref&&ref.current&&(util_1.on(ref.current,"mouseover",onMouseOver),util_1.on(ref.current,"mouseout",onMouseOut));var current=ref.current;return function(){enabled&&current&&(util_1.off(current,"mouseover",onMouseOver),util_1.off(current,"mouseout",onMouseOut))}}),[enabled,ref]),value}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useKey_1=tslib_1.__importDefault(__webpack_require__(251));exports.default=function useKeyPress(keyFilter){var _a=react_1.useState([!1,null]),state=_a[0],set=_a[1];return useKey_1.default(keyFilter,(function(event){return set([!0,event])}),{event:"keydown"},[state]),useKey_1.default(keyFilter,(function(event){return set([!1,event])}),{event:"keyup"},[state]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useLatest(value){var ref=react_1.useRef(value);return ref.current=value,ref}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useLifecycles(mount,unmount){react_1.useEffect((function(){return mount&&mount(),function(){unmount&&unmount()}}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(30),__webpack_require__(96),__webpack_require__(386),__webpack_require__(51),__webpack_require__(364),__webpack_require__(256),__webpack_require__(53),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88)),hookState_1=__webpack_require__(146);exports.default=function useList(initialList){void 0===initialList&&(initialList=[]);var list=react_1.useRef(hookState_1.resolveHookState(initialList)),update=useUpdate_1.default(),actions=react_1.useMemo((function(){var a={set:function set(newList){list.current=hookState_1.resolveHookState(newList,list.current),update()},push:function push(){for(var items=[],_i=0;_i<arguments.length;_i++)items[_i]=arguments[_i];items.length&&actions.set((function(curr){return curr.concat(items)}))},updateAt:function updateAt(index,item){actions.set((function(curr){var arr=curr.slice();return arr[index]=item,arr}))},insertAt:function insertAt(index,item){actions.set((function(curr){var arr=curr.slice();return index>arr.length?arr[index]=item:arr.splice(index,0,item),arr}))},update:function update(predicate,newItem){actions.set((function(curr){return curr.map((function(item){return predicate(item,newItem)?newItem:item}))}))},updateFirst:function updateFirst(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0&&actions.updateAt(index,newItem)},upsert:function upsert(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0?actions.updateAt(index,newItem):actions.push(newItem)},sort:function sort(compareFn){actions.set((function(curr){return curr.slice().sort(compareFn)}))},filter:function filter(callbackFn,thisArg){actions.set((function(curr){return curr.slice().filter(callbackFn,thisArg)}))},removeAt:function removeAt(index){actions.set((function(curr){var arr=curr.slice();return arr.splice(index,1),arr}))},clear:function clear(){actions.set([])},reset:function reset(){actions.set(hookState_1.resolveHookState(initialList).slice())}};return a.remove=a.removeAt,a}),[]);return[list.current,actions]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useMediatedState=void 0;var react_1=__webpack_require__(0);exports.useMediatedState=function useMediatedState(mediator,initialState){var mediatorFn=react_1.useRef(mediator),_a=react_1.useState(initialState),state=_a[0],setMediatedState=_a[1];return[state,react_1.useCallback((function(newState){2===mediatorFn.current.length?mediatorFn.current(newState,setMediatedState):setMediatedState(mediatorFn.current(newState))}),[state])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(147)),util_1=__webpack_require__(11);exports.default=function useMouse(ref){var _a=useRafState_1.default({docX:0,docY:0,posX:0,posY:0,elX:0,elY:0,elH:0,elW:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var moveHandler=function moveHandler(event){if(ref&&ref.current){var _a=ref.current.getBoundingClientRect(),left=_a.left,top=_a.top,elW=_a.width,elH=_a.height,posX=left+window.pageXOffset,posY=top+window.pageYOffset,elX=event.pageX-posX,elY=event.pageY-posY;setState({docX:event.pageX,docY:event.pageY,posX:posX,posY:posY,elX:elX,elY:elY,elH:elH,elW:elW})}};return util_1.on(document,"mousemove",moveHandler),function(){util_1.off(document,"mousemove",moveHandler)}}),[ref]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89));exports.default=function useRaf(ms,delay){void 0===ms&&(ms=1e12),void 0===delay&&(delay=0);var _a=react_1.useState(0),elapsed=_a[0],set=_a[1];return useIsomorphicLayoutEffect_1.default((function(){var raf,timerStop,start,onFrame=function onFrame(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function loop(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout((function onStart(){timerStop=setTimeout((function(){cancelAnimationFrame(raf),set(1)}),ms),start=Date.now(),loop()}),delay);return function(){clearTimeout(timerStop),clearTimeout(timerDelay),cancelAnimationFrame(raf)}}),[ms,delay]),elapsed}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useStateValidator(state,validator,initialState){void 0===initialState&&(initialState=[void 0]);var validatorInner=react_1.useRef(validator),stateInner=react_1.useRef(state);validatorInner.current=validator,stateInner.current=state;var _a=react_1.useState(initialState),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(stateInner.current,setValidity):setValidity(validatorInner.current(stateInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),[state]),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useRendersCount=void 0;var react_1=__webpack_require__(0);exports.useRendersCount=function useRendersCount(){return++react_1.useRef(0).current}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetoggle"><code>useToggle</code></h1>\n<p>React state hook that tracks value of a boolean.</p>\n<p><code>useBoolean</code> is an alias for <code>useToggle</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useToggle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;{on ? &#39;ON&#39; : &#39;OFF&#39;}&lt;/div&gt;\n      &lt;button onClick={toggle}&gt;Toggle&lt;/button&gt;\n      &lt;button onClick={() =&gt; toggle(true)}&gt;set ON&lt;/button&gt;\n      &lt;button onClick={() =&gt; toggle(false)}&gt;set OFF&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedrop-and-usedroparea"><code>useDrop</code> and <code>useDropArea</code></h1>\n<p>Triggers on file, link drop and copy-paste.</p>\n<p><code>useDrop</code> tracks events for the whole page, <code>useDropArea</code> tracks drop events\nfor a specific element.</p>\n<h2 id="usage">Usage</h2>\n<p><code>useDrop</code>:</p>\n<pre><code class="language-jsx">import {useDrop} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useDrop({\n    onFiles: files =&gt; console.log(&#39;files&#39;, files),\n    onUri: uri =&gt; console.log(&#39;uri&#39;, uri),\n    onText: text =&gt; console.log(&#39;text&#39;, text),\n  });\n\n  return (\n    &lt;div&gt;\n      Drop something on the page.\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p><code>useDropArea</code>:</p>\n<pre><code class="language-jsx">import {useDropArea} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [bond, state] = useDropArea({\n    onFiles: files =&gt; console.log(&#39;files&#39;, files),\n    onUri: uri =&gt; console.log(&#39;uri&#39;, uri),\n    onText: text =&gt; console.log(&#39;text&#39;, text),\n  });\n\n  return (\n    &lt;div {...bond}&gt;\n      Drop something here.\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(2).__importStar(__webpack_require__(0)),NewTabStory=function NewTabStory(_a){var children=_a.children;return window.location===window.parent.location?children:React.createElement("p",null,"This story should be"," ",React.createElement("a",{href:window.location.href,target:"_blank",title:"Open in new tab"},"opened in a new tab"),".")};exports.default=NewTabStory;try{NewTabStory.displayName="NewTabStory",NewTabStory.__docgenInfo={description:"",displayName:"NewTabStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/util/NewTabStory.tsx#NewTabStory"]={docgenInfo:NewTabStory.__docgenInfo,name:"NewTabStory",path:"stories/util/NewTabStory.tsx#NewTabStory"})}catch(__react_docgen_typescript_loader_error){}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usehover-and-usehoverdirty"><code>useHover</code> and <code>useHoverDirty</code></h1>\n<p>React UI sensor hooks that track if some element is being hovered\nby a mouse.</p>\n<ul>\n<li><code>useHover</code> accepts a React element or a function that returns one,\n<code>useHoverDirty</code> accepts React ref.</li>\n<li><code>useHover</code> sets react <code>onMouseEnter</code> and <code>onMouseLeave</code> events,\n<code>useHoverDirty</code> sets DOM <code>onmouseover</code> and <code>onmouseout</code> events.</li>\n</ul>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useHover} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const element = (hovered) =&gt;\n    &lt;div&gt;\n      Hover me! {hovered &amp;&amp; &#39;Thanks!&#39;}\n    &lt;/div&gt;;\n  const [hoverable, hovered] = useHover(element);\n\n  return (\n    &lt;div&gt;\n      {hoverable}\n      &lt;div&gt;{hovered ? &#39;HOVERED&#39; : &#39;&#39;}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) =&gt; reactElement);\nconst isHovering = useHoverDirty(ref);</code></pre>\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemouse-and-usemousehovered"><code>useMouse</code> and <code>useMouseHovered</code></h1>\n<p>React sensor hooks that re-render on mouse position changes. <code>useMouse</code> simply tracks\nmouse position; <code>useMouseHovered</code> allows you to specify extra options:</p>\n<ul>\n<li><code>bound</code> &mdash; to bind mouse coordinates within the element</li>\n<li><code>whenHovered</code> &mdash; whether to attach <code>mousemove</code> event handler only when user hovers over the element</li>\n</ul>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMouse} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const ref = React.useRef(null);\n  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n  return (\n    &lt;div ref={ref}&gt;\n      &lt;div&gt;Mouse position in document - x:{docX} y:{docY}&lt;/div&gt;\n      &lt;div&gt;Mouse position in element - x:{elX} y:{elY}&lt;/div&gt;\n      &lt;div&gt;Element position- x:{posX} y:{posY}&lt;/div&gt;\n      &lt;div&gt;Element dimensions - {elW}x{elH}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});</code></pre>\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usescroll"><code>useScroll</code></h1>\n<p>React sensor hook that re-renders when the scroll position in a DOM element changes.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useScroll} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const scrollRef = React.useRef(null);\n  const {x, y} = useScroll(scrollRef);\n\n  return (\n    &lt;div ref={scrollRef}&gt;\n      &lt;div&gt;x: {x}&lt;/div&gt;\n      &lt;div&gt;y: {y}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useScroll(ref: RefObject&lt;HTMLElement&gt;);</code></pre>\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usethrottle-and-usethrottlefn"><code>useThrottle</code> and <code>useThrottleFn</code></h1>\n<p>React hooks that throttle.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from &#39;react&#39;;\nimport { useThrottle, useThrottleFn } from &#39;react-use&#39;;\n\nconst Demo = ({value}) =&gt; {\n  const throttledValue = useThrottle(value);\n  // const throttledValue = useThrottleFn(value =&gt; value, 200, [value]);\n\n  return (\n    &lt;&gt;\n      &lt;div&gt;Value: {value}&lt;/div&gt;\n      &lt;div&gt;Throttled value: {throttledValue}&lt;/div&gt;\n    &lt;/&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);</code></pre>\n'},,,,,,,,,,,function(module,exports,__webpack_require__){__webpack_require__(430),__webpack_require__(592),__webpack_require__(593),module.exports=__webpack_require__(739)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(4)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(39),__webpack_require__(32),__webpack_require__(53),__webpack_require__(740),__webpack_require__(41),__webpack_require__(42),__webpack_require__(741),__webpack_require__(742),__webpack_require__(1);var _root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(149),_root_repo_node_modules_storybook_client_logger__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(10),_root_repo_storybook_config_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(263);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(_root_repo_storybook_config_js__WEBPACK_IMPORTED_MODULE_11__).forEach((function(key){var value=_root_repo_storybook_config_js__WEBPACK_IMPORTED_MODULE_11__[key];switch(key){case"args":case"argTypes":return _root_repo_node_modules_storybook_client_logger__WEBPACK_IMPORTED_MODULE_10__.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(_root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__.b)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(_root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__.c)(loader,!1)}));case"parameters":return Object(_root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__.d)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(_root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__.a)(enhancer)}));case"globals":case"globalTypes":var v={};return v[key]=value,Object(_root_repo_node_modules_storybook_client_api__WEBPACK_IMPORTED_MODULE_9__.d)(v,!1);default:return console.log(key+" was not supported :( !")}}))},,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./comps/UseKey.story.tsx":767,"./createBreakpoint.story.tsx":770,"./createGlobalState.story.tsx":880,"./createMemo.story.tsx":882,"./createReducer.story.tsx":884,"./createReducerContext.story.tsx":888,"./createStateContext.story.tsx":890,"./useAsync.story.tsx":892,"./useAsyncFn.story.tsx":894,"./useAsyncRetry.story.tsx":896,"./useAudio.story.tsx":898,"./useBattery.story.tsx":900,"./useBeforeUnload.story.tsx":905,"./useBoolean.story.tsx":907,"./useClickAway.story.tsx":908,"./useCookie.story.tsx":912,"./useCopyToClipboard.story.tsx":914,"./useCounter.story.tsx":916,"./useCss.story.tsx":918,"./useCustomCompareEffect.story.tsx":920,"./useDebounce.story.tsx":922,"./useDeepCompareEffect.story.tsx":924,"./useDefault.story.tsx":926,"./useDrop.story.tsx":928,"./useDropArea.story.tsx":929,"./useEffectOnce.story.tsx":930,"./useEnsuredForwardedRef.story.tsx":933,"./useError.story.tsx":935,"./useEvent.story.tsx":937,"./useFavicon.story.tsx":939,"./useFirstMountState.story.tsx":941,"./useFullscreen.story.tsx":943,"./useGeolocation.story.tsx":945,"./useGetSet.story.tsx":947,"./useGetSetState.story.tsx":949,"./useHarmonicIntervalFn.story.tsx":951,"./useHash.story.tsx":953,"./useHover.story.tsx":955,"./useHoverDirty.story.tsx":956,"./useIdle.story.tsx":957,"./useIntersection.story.tsx":959,"./useInterval.story.tsx":961,"./useIsomorphicLayoutEffect.story.tsx":963,"./useKey.story.tsx":965,"./useKeyPress.story.tsx":967,"./useKeyPressEvent.story.tsx":969,"./useKeyboardJs.story.tsx":971,"./useLatest.story.tsx":977,"./useLifecycles.story.tsx":979,"./useList.story.tsx":981,"./useLocalStorage.story.tsx":983,"./useLocation.story.tsx":985,"./useLockBodyScroll.story.tsx":987,"./useLogger.story.tsx":994,"./useLongPress.story.tsx":999,"./useMap.story.tsx":1001,"./useMeasure.story.tsx":1005,"./useMedia.story.tsx":1007,"./useMediaDevices.story.tsx":1009,"./useMediatedState.story.tsx":1011,"./useMethods.story.tsx":1013,"./useMotion.story.tsx":1015,"./useMount.story.tsx":1017,"./useMountedState.story.tsx":1019,"./useMouse.story.tsx":1021,"./useMouseHovered.story.tsx":1022,"./useMouseWheel.story.tsx":1023,"./useMultiStateValidator.story.tsx":1025,"./useNetwork.story.tsx":1027,"./useObservable.story.tsx":1029,"./useOrientation.story.tsx":1031,"./usePageLeave.story.tsx":1033,"./usePermission.story.tsx":1035,"./usePrevious.story.tsx":1037,"./usePreviousDistinct.story.tsx":1039,"./usePromise.story.tsx":1041,"./useQueue.story.tsx":1043,"./useRaf.story.tsx":1045,"./useRafLoop.story.tsx":1047,"./useRafState.story.tsx":1049,"./useRendersCount.story.tsx":1051,"./useScratch.story.tsx":1053,"./useScroll.story.tsx":1055,"./useScrollbarWidth.story.tsx":1056,"./useScrolling.story.tsx":1057,"./useSearchParam.story.tsx":1059,"./useSessionStorage.story.tsx":1061,"./useSet.story.tsx":1063,"./useSetState.story.tsx":1065,"./useShallowCompareEffect.story.tsx":1067,"./useSize.story.tsx":1069,"./useSlider.story.tsx":1071,"./useSpeech.story.tsx":1073,"./useSpring.story.tsx":1075,"./useStartTyping.story.tsx":1079,"./useStateList.story.tsx":1081,"./useStateValidator.story.tsx":1083,"./useStateWithHistory.story.tsx":1085,"./useThrottle.story.tsx":1087,"./useThrottleFn.story.tsx":1088,"./useTimeout.story.tsx":1089,"./useTimeoutFn.story.tsx":1091,"./useTitle.story.tsx":1093,"./useToggle.story.tsx":1095,"./useTween.story.tsx":1096,"./useUnmount.story.tsx":1098,"./useUpdate.story.tsx":1100,"./useUpdateEffect.story.tsx":1102,"./useUpsert.story.tsx":1104,"./useVibrate.story.tsx":1106,"./useVideo.story.tsx":1108,"./useWindowScroll.story.tsx":1110,"./useWindowSize.story.tsx":1112};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=766},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),UseKey_1=tslib_1.__importDefault(__webpack_require__(768));react_1.storiesOf("Components/<UseKey>",module).add("Demo",(function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function fn(){return alert("Q pressed!")}}))}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(53),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useKey_1=tslib_1.__importDefault(__webpack_require__(251)),UseKey=tslib_1.__importDefault(__webpack_require__(769)).default(useKey_1.default,(function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,tslib_1.__rest(_a,["filter","fn","deps"]),deps]}));exports.default=UseKey;try{RenderProp.displayName="RenderProp",RenderProp.__docgenInfo={description:"",displayName:"RenderProp",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/component/UseKey.tsx#RenderProp"]={docgenInfo:RenderProp.__docgenInfo,name:"RenderProp",path:"src/component/UseKey.tsx#RenderProp"})}catch(__react_docgen_typescript_loader_error){}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function defaultMapPropsToArgs(props){return[props]};exports.default=function createRenderProp(hook,mapPropsToArgs){return void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs),function RenderProp(props){var state=hook.apply(void 0,mapPropsToArgs(props)),children=props.children,_a=props.render,render=void 0===_a?children:_a;return render&&render(state)||null}}},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useBreakpointA=src_1.createBreakpoint(),useBreakpointB=src_1.createBreakpoint({mobileM:350,laptop:1024,tablet:768}),Demo=function Demo(){var breakpointA=useBreakpointA(),breakpointB=useBreakpointB();return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"try resize your window"),react_2.default.createElement("p",null,"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"),react_2.default.createElement("p",null,breakpointA),react_2.default.createElement("p",null,"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"),react_2.default.createElement("p",null,breakpointB))};react_1.storiesOf("sensors/createBreakpoint",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(879)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function createMemo(fn){return function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return react_1.useMemo((function(){return fn.apply(void 0,args)}),args)}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function createReducerContext(reducer,defaultInitialState){var context=react_1.createContext(void 0);return[function useReducerContext(){var state=react_1.useContext(context);if(null==state)throw new Error("useReducerContext must be used inside a ReducerProvider.");return state},function ReducerProvider(_a){var children=_a.children,initialState=_a.initialState;return function providerFactory(props,children){return react_1.createElement(context.Provider,props,children)}({value:react_1.useReducer(reducer,void 0!==initialState?initialState:defaultInitialState)},children)},context]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(776),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(143));function composeMiddleware(chain){return function(context,dispatch){return chain.reduceRight((function(res,middleware){return middleware(context)(res)}),dispatch)}}exports.default=function createReducer(){for(var middlewares=[],_i=0;_i<arguments.length;_i++)middlewares[_i]=arguments[_i];var composedMiddleware=composeMiddleware(middlewares);return function(reducer,initialState,initializer){void 0===initializer&&(initializer=function initializer(value){return value});var ref=react_1.useRef(initializer(initialState)),setState=react_1.useState(ref.current)[1],dispatch=react_1.useCallback((function(action){return ref.current=reducer(ref.current,action),setState(ref.current),action}),[reducer]),dispatchRef=react_1.useRef(composedMiddleware({getState:function getState(){return ref.current},dispatch:function dispatch(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return dispatchRef.current.apply(dispatchRef,args)}},dispatch));return useUpdateEffect_1.default((function(){dispatchRef.current=composedMiddleware({getState:function getState(){return ref.current},dispatch:function dispatch(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return dispatchRef.current.apply(dispatchRef,args)}},dispatch)}),[dispatch]),[ref.current,dispatchRef.current]}}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function createStateContext(defaultInitialValue){var context=react_1.createContext(void 0);return[function useStateContext(){var state=react_1.useContext(context);if(null==state)throw new Error("useStateContext must be used inside a StateProvider.");return state},function StateProvider(_a){var children=_a.children,initialValue=_a.initialValue;return function providerFactory(props,children){return react_1.createElement(context.Provider,props,children)}({value:react_1.useState(void 0!==initialValue?initialValue:defaultInitialValue)},children)},context]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useAsync_1=tslib_1.__importDefault(__webpack_require__(387));exports.default=function useAsyncRetry(fn,deps){void 0===deps&&(deps=[]);var _a=react_1.useState(0),attempt=_a[0],setAttempt=_a[1],state=useAsync_1.default(fn,tslib_1.__spreadArrays(deps,[attempt])),stateLoading=state.loading,retry=react_1.useCallback((function(){stateLoading||setAttempt((function(currentAttempt){return currentAttempt+1}))}),tslib_1.__spreadArrays(deps,[stateLoading]));return tslib_1.__assign(tslib_1.__assign({},state),{retry:retry})}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useAudio=__webpack_require__(2).__importDefault(__webpack_require__(388)).default("audio");exports.default=useAudio},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function parseTimeRanges(ranges){for(var result=[],i=0;i<ranges.length;i++)result.push({start:ranges.start(i),end:ranges.end(i)});return result}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),util_1=__webpack_require__(11),isDeepEqual_1=tslib_1.__importDefault(__webpack_require__(253)),nav=util_1.isNavigator?navigator:void 0,isBatteryApiSupported=nav&&"function"==typeof nav.getBattery;exports.default=isBatteryApiSupported?function useBattery(){var _a=react_1.useState({isSupported:!0,fetched:!1}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var isMounted=!0,battery=null,handleChange=function handleChange(){if(isMounted&&battery){var newState={isSupported:!0,fetched:!0,level:battery.level,charging:battery.charging,dischargingTime:battery.dischargingTime,chargingTime:battery.chargingTime};!isDeepEqual_1.default(state,newState)&&setState(newState)}};return nav.getBattery().then((function(bat){isMounted&&(battery=bat,util_1.on(battery,"chargingchange",handleChange),util_1.on(battery,"chargingtimechange",handleChange),util_1.on(battery,"dischargingtimechange",handleChange),util_1.on(battery,"levelchange",handleChange),handleChange())})),function(){isMounted=!1,battery&&(util_1.off(battery,"chargingchange",handleChange),util_1.off(battery,"chargingtimechange",handleChange),util_1.off(battery,"dischargingtimechange",handleChange),util_1.off(battery,"levelchange",handleChange))}}),[]),state}:function useBatteryMock(){return{isSupported:!1}}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useBeforeUnload(enabled,message){void 0===enabled&&(enabled=!0);var handler=react_1.useCallback((function(event){if("function"!=typeof enabled||enabled())return event.preventDefault(),message&&(event.returnValue=message),message}),[enabled,message]);react_1.useEffect((function(){if(enabled)return util_1.on(window,"beforeunload",handler),function(){return util_1.off(window,"beforeunload",handler)}}),[enabled,handler])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useToggle_1=__webpack_require__(2).__importDefault(__webpack_require__(389));exports.default=useToggle_1.default},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),defaultEvents=["mousedown","touchstart"];exports.default=function useClickAway(ref,onClickAway,events){void 0===events&&(events=defaultEvents);var savedCallback=react_1.useRef(onClickAway);react_1.useEffect((function(){savedCallback.current=onClickAway}),[onClickAway]),react_1.useEffect((function(){for(var handler=function handler(event){var el=ref.current;el&&!el.contains(event.target)&&savedCallback.current(event)},_i=0,events_1=events;_i<events_1.length;_i++){var eventName=events_1[_i];util_1.on(document,eventName,handler)}return function(){for(var _i=0,events_2=events;_i<events_2.length;_i++){var eventName=events_2[_i];util_1.off(document,eventName,handler)}}}),[events,ref])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),js_cookie_1=tslib_1.__importDefault(__webpack_require__(787));exports.default=function useCookie(cookieName){var _a=react_1.useState((function(){return js_cookie_1.default.get(cookieName)||null})),value=_a[0],setValue=_a[1];return[value,react_1.useCallback((function(newValue,options){js_cookie_1.default.set(cookieName,newValue,options),setValue(newValue)}),[cookieName]),react_1.useCallback((function(){js_cookie_1.default.remove(cookieName),setValue(null)}),[cookieName])]}},,function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(13),__webpack_require__(97),__webpack_require__(54),__webpack_require__(32),__webpack_require__(35),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),copy_to_clipboard_1=tslib_1.__importDefault(__webpack_require__(789)),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104)),useSetState_1=tslib_1.__importDefault(__webpack_require__(145));exports.default=function useCopyToClipboard(){var isMounted=useMountedState_1.default(),_a=useSetState_1.default({value:void 0,error:void 0,noUserInteraction:!0}),state=_a[0],setState=_a[1];return[state,react_1.useCallback((function(value){var noUserInteraction,normalizedValue;if(isMounted())try{if("string"!=typeof value&&"number"!=typeof value){var error=new Error("Cannot copy typeof "+_typeof(value)+" to clipboard, must be a string");return void setState({value:value,error:error,noUserInteraction:!0})}if(""===value){error=new Error("Cannot copy empty string to clipboard.");return void setState({value:value,error:error,noUserInteraction:!0})}normalizedValue=value.toString(),noUserInteraction=copy_to_clipboard_1.default(normalizedValue),setState({value:normalizedValue,error:void 0,noUserInteraction:noUserInteraction})}catch(error){setState({value:normalizedValue,error:error,noUserInteraction:noUserInteraction})}}),[])]}},,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(13),__webpack_require__(97),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),nano_css_1=__webpack_require__(792),cssom_1=__webpack_require__(793),vcssom_1=__webpack_require__(794),cssToTree_1=__webpack_require__(796),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89)),nano=nano_css_1.create();cssom_1.addon(nano),vcssom_1.addon(nano);var counter=0;exports.default=function useCss(css){var className=react_1.useMemo((function(){return"react-use-css-"+(counter++).toString(36)}),[]),sheet=react_1.useMemo((function(){return new nano.VSheet}),[]);return useIsomorphicLayoutEffect_1.default((function(){var tree={};return cssToTree_1.cssToTree(tree,css,"."+className,""),sheet.diff(tree),function(){sheet.diff({})}})),className}},,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(255));exports.default=function useDebounce(fn,ms,deps){void 0===ms&&(ms=0),void 0===deps&&(deps=[]);var _a=useTimeoutFn_1.default(fn,ms),isReady=_a[0],cancel=_a[1],reset=_a[2];return react_1.useEffect(reset,deps),[isReady,cancel]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(85),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useCustomCompareEffect_1=tslib_1.__importDefault(__webpack_require__(254)),isDeepEqual_1=tslib_1.__importDefault(__webpack_require__(253));exports.default=function useDeepCompareEffect(effect,deps){useCustomCompareEffect_1.default(effect,deps,isDeepEqual_1.default)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useDefault(defaultValue,initialValue){var _a=react_1.useState(initialValue),value=_a[0],setValue=_a[1];return null==value?[defaultValue,setValue]:[value,setValue]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(117),__webpack_require__(19),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useDrop(options,args){void 0===options&&(options={}),void 0===args&&(args=[]);var onFiles=options.onFiles,onText=options.onText,onUri=options.onUri,_a=react_1.useState(!1),over=_a[0],setOverRaw=_a[1],setOver=react_1.useCallback(setOverRaw,[]),process=react_1.useMemo((function(){return function createProcess(options){return function(dataTransfer,event){var uri=dataTransfer.getData("text/uri-list");if(uri)(options.onUri||util_1.noop)(uri,event);else if(dataTransfer.files&&dataTransfer.files.length)(options.onFiles||util_1.noop)(Array.from(dataTransfer.files),event);else if(event.clipboardData){var text=event.clipboardData.getData("text");(options.onText||util_1.noop)(text,event)}else;}}(options)}),[onFiles,onText,onUri]);return react_1.useEffect((function(){var onDragOver=function onDragOver(event){event.preventDefault(),setOver(!0)},onDragEnter=function onDragEnter(event){event.preventDefault(),setOver(!0)},onDragLeave=function onDragLeave(){setOver(!1)},onDragExit=function onDragExit(){setOver(!1)},onDrop=function onDrop(event){event.preventDefault(),setOver(!1),process(event.dataTransfer,event)},onPaste=function onPaste(event){process(event.clipboardData,event)};return util_1.on(document,"dragover",onDragOver),util_1.on(document,"dragenter",onDragEnter),util_1.on(document,"dragleave",onDragLeave),util_1.on(document,"dragexit",onDragExit),util_1.on(document,"drop",onDrop),onText&&util_1.on(document,"paste",onPaste),function(){util_1.off(document,"dragover",onDragOver),util_1.off(document,"dragenter",onDragEnter),util_1.off(document,"dragleave",onDragLeave),util_1.off(document,"dragexit",onDragExit),util_1.off(document,"drop",onDrop),util_1.off(document,"paste",onPaste)}}),tslib_1.__spreadArrays([process],args)),{over:over}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(117),__webpack_require__(19),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104)),util_1=__webpack_require__(11);exports.default=function useDropArea(options){void 0===options&&(options={});var onFiles=options.onFiles,onText=options.onText,onUri=options.onUri,isMounted=useMountedState_1.default(),_a=react_1.useState(!1),over=_a[0],setOver=_a[1],process=react_1.useMemo((function(){return function createProcess(options,mounted){return function(dataTransfer,event){var uri=dataTransfer.getData("text/uri-list");uri?(options.onUri||util_1.noop)(uri,event):dataTransfer.files&&dataTransfer.files.length?(options.onFiles||util_1.noop)(Array.from(dataTransfer.files),event):dataTransfer.items&&dataTransfer.items.length&&dataTransfer.items[0].getAsString((function(text){mounted&&(options.onText||util_1.noop)(text,event)}))}}(options,isMounted())}),[onFiles,onText,onUri]);return[react_1.useMemo((function(){return function createBond(process,setOver){return{onDragOver:function onDragOver(event){event.preventDefault()},onDragEnter:function onDragEnter(event){event.preventDefault(),setOver(!0)},onDragLeave:function onDragLeave(){setOver(!1)},onDrop:function onDrop(event){event.preventDefault(),event.persist(),setOver(!1),process(event.dataTransfer,event)},onPaste:function onPaste(event){event.persist(),process(event.clipboardData,event)}}}(process,setOver)}),[process,setOver]),{over:over}]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.ensuredForwardRef=void 0;var react_1=__webpack_require__(0);function useEnsuredForwardedRef(forwardedRef){var ensuredRef=react_1.useRef(forwardedRef&&forwardedRef.current);return react_1.useEffect((function(){forwardedRef&&(forwardedRef.current=ensuredRef.current)}),[forwardedRef]),ensuredRef}exports.default=useEnsuredForwardedRef,exports.ensuredForwardRef=function ensuredForwardRef(Component){return react_1.forwardRef((function(props,ref){var ensuredRef=useEnsuredForwardedRef(ref);return Component(props,ensuredRef)}))}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useError(){var _a=react_1.useState(null),error=_a[0],setError=_a[1];return react_1.useEffect((function(){if(error)throw error}),[error]),react_1.useCallback((function(err){setError(err)}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useFavicon(href){react_1.useEffect((function(){var link=document.querySelector("link[rel*='icon']")||document.createElement("link");link.type="image/x-icon",link.rel="shortcut icon",link.href=href,document.getElementsByTagName("head")[0].appendChild(link)}),[href])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),screenfull_1=tslib_1.__importDefault(__webpack_require__(806)),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89)),util_1=__webpack_require__(11);exports.default=function useFullscreen(ref,enabled,options){void 0===options&&(options={});var video=options.video,_a=options.onClose,onClose=void 0===_a?util_1.noop:_a,_b=react_1.useState(enabled),isFullscreen=_b[0],setIsFullscreen=_b[1];return useIsomorphicLayoutEffect_1.default((function(){if(enabled&&ref.current){var onWebkitEndFullscreen=function onWebkitEndFullscreen(){(null==video?void 0:video.current)&&util_1.off(video.current,"webkitendfullscreen",onWebkitEndFullscreen),onClose()},onChange=function onChange(){if(screenfull_1.default.isEnabled){var isScreenfullFullscreen=screenfull_1.default.isFullscreen;setIsFullscreen(isScreenfullFullscreen),isScreenfullFullscreen||onClose()}};if(screenfull_1.default.isEnabled){try{screenfull_1.default.request(ref.current),setIsFullscreen(!0)}catch(error){onClose(error),setIsFullscreen(!1)}screenfull_1.default.on("change",onChange)}else video&&video.current&&video.current.webkitEnterFullscreen?(video.current.webkitEnterFullscreen(),util_1.on(video.current,"webkitendfullscreen",onWebkitEndFullscreen),setIsFullscreen(!0)):(onClose(),setIsFullscreen(!1));return function(){if(setIsFullscreen(!1),screenfull_1.default.isEnabled)try{screenfull_1.default.off("change",onChange),screenfull_1.default.exit()}catch(_a){}else video&&video.current&&video.current.webkitExitFullscreen&&(util_1.off(video.current,"webkitendfullscreen",onWebkitEndFullscreen),video.current.webkitExitFullscreen())}}}),[enabled,video,ref]),isFullscreen}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0);exports.default=function useGeolocation(options){var watchId,_a=react_1.useState({loading:!0,accuracy:null,altitude:null,altitudeAccuracy:null,heading:null,latitude:null,longitude:null,speed:null,timestamp:Date.now()}),state=_a[0],setState=_a[1],mounted=!0,onEvent=function onEvent(event){mounted&&setState({loading:!1,accuracy:event.coords.accuracy,altitude:event.coords.altitude,altitudeAccuracy:event.coords.altitudeAccuracy,heading:event.coords.heading,latitude:event.coords.latitude,longitude:event.coords.longitude,speed:event.coords.speed,timestamp:event.timestamp})},onEventError=function onEventError(error){return mounted&&setState((function(oldState){return tslib_1.__assign(tslib_1.__assign({},oldState),{loading:!1,error:error})}))};return react_1.useEffect((function(){return navigator.geolocation.getCurrentPosition(onEvent,onEventError,options),watchId=navigator.geolocation.watchPosition(onEvent,onEventError,options),function(){mounted=!1,navigator.geolocation.clearWatch(watchId)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(33),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88));exports.default=function useGetSetState(initialState){void 0===initialState&&(initialState={});var update=useUpdate_1.default(),state=react_1.useRef(tslib_1.__assign({},initialState));return[react_1.useCallback((function(){return state.current}),[]),react_1.useCallback((function(patch){patch&&(Object.assign(state.current,patch),update())}),[])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),set_harmonic_interval_1=__webpack_require__(810);exports.default=function useHarmonicIntervalFn(fn,delay){void 0===delay&&(delay=0);var latestCallback=react_1.useRef((function(){}));react_1.useEffect((function(){latestCallback.current=fn})),react_1.useEffect((function(){if(null!==delay){var interval_1=set_harmonic_interval_1.setHarmonicInterval((function(){return latestCallback.current()}),delay);return function(){return set_harmonic_interval_1.clearHarmonicInterval(interval_1)}}}),[delay])}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(2).__importStar(__webpack_require__(0)),util_1=__webpack_require__(11),useState=React.useState;exports.default=function useHover(element){var _a=useState(!1),state=_a[0],setState=_a[1];return"function"==typeof element&&(element=element(state)),[React.cloneElement(element,{onMouseEnter:function onMouseEnter(originalOnMouseEnter){return function(event){(originalOnMouseEnter||util_1.noop)(event),setState(!0)}}(element.props.onMouseEnter),onMouseLeave:function onMouseLeave(originalOnMouseLeave){return function(event){(originalOnMouseLeave||util_1.noop)(event),setState(!1)}}(element.props.onMouseLeave)}),state]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),throttle_debounce_1=__webpack_require__(813),util_1=__webpack_require__(11),defaultEvents=["mousemove","mousedown","resize","keydown","touchstart","wheel"];exports.default=function useIdle(ms,initialState,events){void 0===ms&&(ms=6e4),void 0===initialState&&(initialState=!1),void 0===events&&(events=defaultEvents);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect((function(){for(var timeout,mounted=!0,localState=state,set=function set(newState){mounted&&(localState=newState,setState(newState))},onEvent=throttle_debounce_1.throttle(50,(function(){localState&&set(!1),clearTimeout(timeout),timeout=setTimeout((function(){return set(!0)}),ms)})),onVisibility=function onVisibility(){document.hidden||onEvent()},i=0;i<events.length;i++)util_1.on(window,events[i],onEvent);return util_1.on(document,"visibilitychange",onVisibility),timeout=setTimeout((function(){return set(!0)}),ms),function(){mounted=!1;for(var i=0;i<events.length;i++)util_1.off(window,events[i],onEvent);util_1.off(document,"visibilitychange",onVisibility)}}),[ms,events]),state}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useIntersection(ref,options){var _a=react_1.useState(null),intersectionObserverEntry=_a[0],setIntersectionObserverEntry=_a[1];return react_1.useEffect((function(){if(ref.current&&"function"==typeof IntersectionObserver){var observer_1=new IntersectionObserver((function handler(entries){setIntersectionObserverEntry(entries[0])}),options);return observer_1.observe(ref.current),function(){setIntersectionObserverEntry(null),observer_1.disconnect()}}return function(){}}),[ref.current,options.threshold,options.root,options.rootMargin]),intersectionObserverEntry}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useInterval(callback,delay){var savedCallback=react_1.useRef((function(){}));react_1.useEffect((function(){savedCallback.current=callback})),react_1.useEffect((function(){if(null!==delay){var interval_1=setInterval((function(){return savedCallback.current()}),delay||0);return function(){return clearInterval(interval_1)}}}),[delay])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(256),__webpack_require__(86),__webpack_require__(67),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function createBreakpoint(breakpoints){return void 0===breakpoints&&(breakpoints={laptopL:1440,laptop:1024,tablet:768}),function(){var _a=react_1.useState(util_1.isBrowser?window.innerWidth:0),screen=_a[0],setScreen=_a[1];react_1.useEffect((function(){var setSideScreen=function setSideScreen(){setScreen(window.innerWidth)};return setSideScreen(),util_1.on(window,"resize",setSideScreen),function(){util_1.off(window,"resize",setSideScreen)}}));var sortedBreakpoints=react_1.useMemo((function(){return Object.entries(breakpoints).sort((function(a,b){return a[1]>=b[1]?1:-1}))}),[breakpoints]);return sortedBreakpoints.reduce((function(acc,_a){var name=_a[0],width=_a[1];return screen>=width?name:acc}),sortedBreakpoints[0][0])}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(393)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(143));exports.default=function useKeyPressEvent(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useLocalStorage(key,initialValue,options){if(!util_1.isBrowser)return[initialValue,util_1.noop,util_1.noop];if(!key)throw new Error("useLocalStorage key may not be falsy");var deserializer=options?options.raw?function(value){return value}:options.deserializer:JSON.parse,initializer=react_1.useRef((function(key){try{var serializer=options?options.raw?String:options.serializer:JSON.stringify,localStorageValue=localStorage.getItem(key);return null!==localStorageValue?deserializer(localStorageValue):(initialValue&&localStorage.setItem(key,serializer(initialValue)),initialValue)}catch(_a){return initialValue}})),_a=react_1.useState((function(){return initializer.current(key)})),state=_a[0],setState=_a[1];react_1.useLayoutEffect((function(){return setState(initializer.current(key))}),[key]);var set=react_1.useCallback((function(valOrFunc){try{var newState="function"==typeof valOrFunc?valOrFunc(state):valOrFunc;if(void 0===newState)return;var value=void 0;value=options?options.raw?"string"==typeof newState?newState:JSON.stringify(newState):options.serializer?options.serializer(newState):JSON.stringify(newState):JSON.stringify(newState),localStorage.setItem(key,value),setState(deserializer(value))}catch(_a){}}),[key,setState]),remove=react_1.useCallback((function(){try{localStorage.removeItem(key),setState(void 0)}catch(_a){}}),[key,setState]);return[state,set,remove]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(135),__webpack_require__(40),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),patchHistoryMethod=function patchHistoryMethod(method){var history=window.history,original=history[method];history[method]=function(state){var result=original.apply(this,arguments),event=new Event(method.toLowerCase());return event.state=state,window.dispatchEvent(event),result}};util_1.isBrowser&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function buildState(trigger){var _a=window.history,state=_a.state,length=_a.length,_b=window.location;return{trigger:trigger,state:state,length:length,hash:_b.hash,host:_b.host,hostname:_b.hostname,href:_b.href,origin:_b.origin,pathname:_b.pathname,port:_b.port,protocol:_b.protocol,search:_b.search}},hasEventConstructor="function"==typeof Event;exports.default=util_1.isBrowser&&hasEventConstructor?function useLocationBrowser(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var onPopstate=function onPopstate(){return setState(buildState("popstate"))},onPushstate=function onPushstate(){return setState(buildState("pushstate"))},onReplacestate=function onReplacestate(){return setState(buildState("replacestate"))};return util_1.on(window,"popstate",onPopstate),util_1.on(window,"pushstate",onPushstate),util_1.on(window,"replacestate",onReplacestate),function(){util_1.off(window,"popstate",onPopstate),util_1.off(window,"pushstate",onPushstate),util_1.off(window,"replacestate",onReplacestate)}}),[]),state}:function useLocationServer(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(331),__webpack_require__(13),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),__webpack_require__(32),__webpack_require__(35),__webpack_require__(38),Object.defineProperty(exports,"__esModule",{value:!0}),exports.getClosestBody=void 0;var react_1=__webpack_require__(0),util_1=__webpack_require__(11);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}function preventDefault(rawEvent){var e=rawEvent||window.event;return e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1)}exports.getClosestBody=getClosestBody;var isIosDevice=util_1.isBrowser&&window.navigator&&window.navigator.platform&&/iP(ad|hone|od)/.test(window.navigator.platform),bodies=new Map,doc="object"===("undefined"==typeof document?"undefined":_typeof(document))?document:void 0,documentListenerAdded=!1;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0);var bodyRef=react_1.useRef(doc.body);elementRef=elementRef||bodyRef;var unlock=function unlock(body){var bodyInfo=bodies.get(body);bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),isIosDevice?(body.ontouchmove=null,documentListenerAdded&&(util_1.off(document,"touchmove",preventDefault),documentListenerAdded=!1)):body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))};react_1.useEffect((function(){var body=getClosestBody(elementRef.current);body&&(locked?function lock(body){var bodyInfo=bodies.get(body);bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),isIosDevice?documentListenerAdded||(util_1.on(document,"touchmove",preventDefault,{passive:!1}),documentListenerAdded=!0):body.style.overflow="hidden")}(body):unlock(body))}),[locked,elementRef.current]),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body)return function(){unlock(body)}}),[])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(120)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(143));exports.default=function useLogger(componentName){for(var rest=[],_i=1;_i<arguments.length;_i++)rest[_i-1]=arguments[_i];useEffectOnce_1.default((function(){return console.log.apply(console,tslib_1.__spreadArrays([componentName+" mounted"],rest)),function(){return console.log(componentName+" unmounted")}})),useUpdateEffect_1.default((function(){console.log.apply(console,tslib_1.__spreadArrays([componentName+" updated"],rest))}))}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),preventDefault=function preventDefault(ev){(function isTouchEvent(ev){return"touches"in ev})(ev)&&ev.touches.length<2&&ev.preventDefault&&ev.preventDefault()};exports.default=function useLongPress(callback,_a){var _b=void 0===_a?{}:_a,_c=_b.isPreventDefault,isPreventDefault=void 0===_c||_c,_d=_b.delay,delay=void 0===_d?300:_d,timeout=react_1.useRef(),target=react_1.useRef(),start=react_1.useCallback((function(event){isPreventDefault&&event.target&&(util_1.on(event.target,"touchend",preventDefault,{passive:!1}),target.current=event.target),timeout.current=setTimeout((function(){return callback(event)}),delay)}),[callback,delay,isPreventDefault]),clear=react_1.useCallback((function(){timeout.current&&clearTimeout(timeout.current),isPreventDefault&&target.current&&util_1.off(target.current,"touchend",preventDefault)}),[isPreventDefault]);return{onMouseDown:function onMouseDown(e){return start(e)},onTouchStart:function onTouchStart(e){return start(e)},onMouseUp:clear,onMouseLeave:clear,onTouchEnd:clear}}},function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0);exports.default=function useMap(initialMap){void 0===initialMap&&(initialMap={});var _a=react_1.useState(initialMap),map=_a[0],_set=_a[1],stableActions=react_1.useMemo((function(){return{set:function set(key,entry){_set((function(prevMap){var _a;return tslib_1.__assign(tslib_1.__assign({},prevMap),((_a={})[key]=entry,_a))}))},setAll:function setAll(newMap){_set(newMap)},remove:function remove(key){_set((function(prevMap){var _a=prevMap,_b=key;_a[_b];return tslib_1.__rest(_a,["symbol"===_typeof(_b)?_b:_b+""])}))},reset:function reset(){return _set(initialMap)}}}),[_set]),utils=tslib_1.__assign({get:react_1.useCallback((function(key){return map[key]}),[map])},stableActions);return[map,utils]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useMedia(query,defaultState){void 0===defaultState&&(defaultState=!1);var _a=react_1.useState(util_1.isBrowser?function(){return window.matchMedia(query).matches}:defaultState),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var mounted=!0,mql=window.matchMedia(query),onChange=function onChange(){mounted&&setState(!!mql.matches)};return mql.addListener(onChange),setState(mql.matches),function(){mounted=!1,mql.removeListener(onChange)}}),[query]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(51),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=util_1.isNavigator&&navigator.mediaDevices?function useMediaDevices(){var _a=react_1.useState({}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var mounted=!0,onChange=function onChange(){navigator.mediaDevices.enumerateDevices().then((function(devices){mounted&&setState({devices:devices.map((function(_a){return{deviceId:_a.deviceId,groupId:_a.groupId,kind:_a.kind,label:_a.label}}))})})).catch(util_1.noop)};return util_1.on(navigator.mediaDevices,"devicechange",onChange),onChange(),function(){mounted=!1,util_1.off(navigator.mediaDevices,"devicechange",onChange)}}),[]),state}:function useMediaDevicesMock(){return{}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(39),__webpack_require__(67),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useMethods(createMethods,initialState){var reducer=react_1.useMemo((function(){return function(reducerState,action){var _a;return(_a=createMethods(reducerState))[action.type].apply(_a,action.payload)}}),[createMethods]),_a=react_1.useReducer(reducer,initialState),state=_a[0],dispatch=_a[1];return[state,react_1.useMemo((function(){return Object.keys(createMethods(initialState)).reduce((function(acc,type){return acc[type]=function(){for(var payload=[],_i=0;_i<arguments.length;_i++)payload[_i]=arguments[_i];return dispatch({type:type,payload:payload})},acc}),{})}),[createMethods,initialState])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),defaultState={acceleration:{x:null,y:null,z:null},accelerationIncludingGravity:{x:null,y:null,z:null},rotationRate:{alpha:null,beta:null,gamma:null},interval:16};exports.default=function useMotion(initialState){void 0===initialState&&(initialState=defaultState);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handler=function handler(event){var acceleration=event.acceleration,accelerationIncludingGravity=event.accelerationIncludingGravity,rotationRate=event.rotationRate,interval=event.interval;setState({acceleration:{x:acceleration.x,y:acceleration.y,z:acceleration.z},accelerationIncludingGravity:{x:accelerationIncludingGravity.x,y:accelerationIncludingGravity.y,z:accelerationIncludingGravity.z},rotationRate:{alpha:rotationRate.alpha,beta:rotationRate.beta,gamma:rotationRate.gamma},interval:interval})};return util_1.on(window,"devicemotion",handler),function(){util_1.off(window,"devicemotion",handler)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useHoverDirty_1=tslib_1.__importDefault(__webpack_require__(392)),useMouse_1=tslib_1.__importDefault(__webpack_require__(398)),nullRef={current:null};exports.default=function useMouseHovered(ref,options){void 0===options&&(options={});var whenHovered=!!options.whenHovered,bound=!!options.bound,isHovered=useHoverDirty_1.default(ref,whenHovered),state=useMouse_1.default(whenHovered&&!isHovered?nullRef:ref);return bound&&(state.elX=Math.max(0,Math.min(state.elX,state.elW)),state.elY=Math.max(0,Math.min(state.elY,state.elH))),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function(){var _a=react_1.useState(0),mouseWheelScrolled=_a[0],setMouseWheelScrolled=_a[1];return react_1.useEffect((function(){var updateScroll=function updateScroll(e){setMouseWheelScrolled(e.deltaY+mouseWheelScrolled)};return util_1.on(window,"wheel",updateScroll,!1),function(){return util_1.off(window,"wheel",updateScroll)}})),mouseWheelScrolled}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),nav=util_1.isNavigator?navigator:void 0,conn=nav&&(nav.connection||nav.mozConnection||nav.webkitConnection);function getConnectionState(previousState){var online=null==nav?void 0:nav.onLine,previousOnline=null==previousState?void 0:previousState.online;return{online:online,previous:previousOnline,since:online!==previousOnline?new Date:null==previousState?void 0:previousState.since,downlink:null==conn?void 0:conn.downlink,downlinkMax:null==conn?void 0:conn.downlinkMax,effectiveType:null==conn?void 0:conn.effectiveType,rtt:null==conn?void 0:conn.rtt,saveData:null==conn?void 0:conn.saveData,type:null==conn?void 0:conn.type}}exports.default=function useNetworkState(initialState){var _a=react_1.useState(null!=initialState?initialState:getConnectionState),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handleStateChange=function handleStateChange(){setState(getConnectionState)};return util_1.on(window,"online",handleStateChange,{passive:!0}),util_1.on(window,"offline",handleStateChange,{passive:!0}),conn&&util_1.on(conn,"change",handleStateChange,{passive:!0}),function(){util_1.off(window,"online",handleStateChange),util_1.off(window,"offline",handleStateChange),conn&&util_1.off(conn,"change",handleStateChange)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useCounter_1=__webpack_require__(2).__importDefault(__webpack_require__(390));exports.default=useCounter_1.default},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89));exports.default=function useObservable(observable$,initialValue){var _a=react_1.useState(initialValue),value=_a[0],update=_a[1];return useIsomorphicLayoutEffect_1.default((function(){var s=observable$.subscribe(update);return function(){return s.unsubscribe()}}),[observable$]),value}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),defaultState={angle:0,type:"landscape-primary"};exports.default=function useOrientation(initialState){void 0===initialState&&(initialState=defaultState);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var screen=window.screen,mounted=!0,onChange=function onChange(){if(mounted){var orientation=screen.orientation;if(orientation){var angle=orientation.angle,type=orientation.type;setState({angle:angle,type:type})}else void 0!==window.orientation?setState({angle:"number"==typeof window.orientation?window.orientation:0,type:""}):setState(initialState)}};return util_1.on(window,"orientationchange",onChange),onChange(),function(){mounted=!1,util_1.off(window,"orientationchange",onChange)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function usePageLeave(onPageLeave,args){void 0===args&&(args=[]),react_1.useEffect((function(){if(onPageLeave){var handler=function handler(event){var from=(event=event||window.event).relatedTarget||event.toElement;from&&"HTML"!==from.nodeName||onPageLeave()};return util_1.on(document,"mouseout",handler),function(){util_1.off(document,"mouseout",handler)}}}),args)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function usePermission(permissionDesc){var mounted=!0,permissionStatus=null,_a=react_1.useState(""),state=_a[0],setState=_a[1],onChange=function onChange(){mounted&&permissionStatus&&setState(permissionStatus.state)};return react_1.useEffect((function(){return navigator.permissions.query(permissionDesc).then((function(status){permissionStatus=status,function changeState(){onChange(),util_1.on(permissionStatus,"change",onChange)}()})).catch(util_1.noop),function(){mounted=!1,permissionStatus&&util_1.off(permissionStatus,"change",onChange)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function usePrevious(state){var ref=react_1.useRef();return react_1.useEffect((function(){ref.current=state})),ref.current}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useFirstMountState_1=__webpack_require__(144),strictEquals=function strictEquals(prev,next){return prev===next};exports.default=function usePreviousDistinct(value,compare){void 0===compare&&(compare=strictEquals);var prevRef=react_1.useRef(),curRef=react_1.useRef(value);return useFirstMountState_1.useFirstMountState()||compare(curRef.current,value)||(prevRef.current=curRef.current,curRef.current=value),prevRef.current}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104));exports.default=function usePromise(){var isMounted=useMountedState_1.default();return react_1.useCallback((function(promise){return new Promise((function(resolve,reject){promise.then((function onValue(value){isMounted()&&resolve(value)}),(function onError(error){isMounted()&&reject(error)}))}))}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(96),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0);exports.default=function useQueue(initialValue){void 0===initialValue&&(initialValue=[]);var _a=react_1.useState(initialValue),state=_a[0],set=_a[1];return{add:function add(value){set((function(queue){return tslib_1.__spreadArrays(queue,[value])}))},remove:function remove(){var result;return set((function(_a){var first=_a[0],rest=_a.slice(1);return result=first,rest})),result},get first(){return state[0]},get last(){return state[state.length-1]},get size(){return state.length}}}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useRafLoop(callback,initiallyActive){void 0===initiallyActive&&(initiallyActive=!0);var raf=react_1.useRef(null),rafActivity=react_1.useRef(!1),rafCallback=react_1.useRef(callback);rafCallback.current=callback;var step=react_1.useCallback((function(time){rafActivity.current&&(rafCallback.current(time),raf.current=requestAnimationFrame(step))}),[]),result=react_1.useMemo((function(){return[function(){rafActivity.current&&(rafActivity.current=!1,raf.current&&cancelAnimationFrame(raf.current))},function(){rafActivity.current||(rafActivity.current=!0,raf.current=requestAnimationFrame(step))},function(){return rafActivity.current}]}),[]);return react_1.useEffect((function(){return initiallyActive&&result[1](),result[0]}),[]),result}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(340),__webpack_require__(13),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),__webpack_require__(135),__webpack_require__(40),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),getValue=function getValue(search,param){return new URLSearchParams(search).get(param)};exports.default=util_1.isBrowser?function useSearchParam(param){var location=window.location,_a=react_1.useState((function(){return getValue(location.search,param)})),value=_a[0],setValue=_a[1];return react_1.useEffect((function(){var onChange=function onChange(){setValue(getValue(location.search,param))};return util_1.on(window,"popstate",onChange),util_1.on(window,"pushstate",onChange),util_1.on(window,"replacestate",onChange),function(){util_1.off(window,"popstate",onChange),util_1.off(window,"pushstate",onChange),util_1.off(window,"replacestate",onChange)}}),[]),value}:function useSearchParamServer(){return null}},function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0}),exports.ScratchSensor=void 0;var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),react_universal_interface_1=__webpack_require__(843),useLatest_1=tslib_1.__importDefault(__webpack_require__(394)),util_1=__webpack_require__(11),useScratch=function useScratch(params){void 0===params&&(params={});var disabled=params.disabled,paramsRef=useLatest_1.default(params),_a=react_1.useState({isScratching:!1}),state=_a[0],setState=_a[1],refState=react_1.useRef(state),refScratching=react_1.useRef(!1),refAnimationFrame=react_1.useRef(null),_b=react_1.useState(null),el=_b[0],setEl=_b[1];return react_1.useEffect((function(){if(!disabled&&el){var onMouseUp,onTouchEnd,onMoveEvent=function onMoveEvent(docX,docY){cancelAnimationFrame(refAnimationFrame.current),refAnimationFrame.current=requestAnimationFrame((function(){var _a=el.getBoundingClientRect(),left=_a.left,top=_a.top,elX=left+window.scrollX,elY=top+window.scrollY,x=docX-elX,y=docY-elY;setState((function(oldState){var newState=tslib_1.__assign(tslib_1.__assign({},oldState),{dx:x-(oldState.x||0),dy:y-(oldState.y||0),end:Date.now(),isScratching:!0});return refState.current=newState,(paramsRef.current.onScratch||util_1.noop)(newState),newState}))}))},onMouseMove=function onMouseMove(event){onMoveEvent(event.pageX,event.pageY)},onTouchMove=function onTouchMove(event){onMoveEvent(event.changedTouches[0].pageX,event.changedTouches[0].pageY)},stopScratching=function stopScratching(){refScratching.current&&(refScratching.current=!1,refState.current=tslib_1.__assign(tslib_1.__assign({},refState.current),{isScratching:!1}),(paramsRef.current.onScratchEnd||util_1.noop)(refState.current),setState({isScratching:!1}),util_1.off(window,"mousemove",onMouseMove),util_1.off(window,"touchmove",onTouchMove),util_1.off(window,"mouseup",onMouseUp),util_1.off(window,"touchend",onTouchEnd))};onMouseUp=stopScratching,onTouchEnd=stopScratching;var startScratching=function startScratching(docX,docY){if(refScratching.current){var _a=el.getBoundingClientRect(),left=_a.left,top=_a.top,elX=left+window.scrollX,elY=top+window.scrollY,x=docX-elX,y=docY-elY,time=Date.now(),newState={isScratching:!0,start:time,end:time,docX:docX,docY:docY,x:x,y:y,dx:0,dy:0,elH:el.offsetHeight,elW:el.offsetWidth,elX:elX,elY:elY};refState.current=newState,(paramsRef.current.onScratchStart||util_1.noop)(newState),setState(newState),util_1.on(window,"mousemove",onMouseMove),util_1.on(window,"touchmove",onTouchMove),util_1.on(window,"mouseup",onMouseUp),util_1.on(window,"touchend",onTouchEnd)}},onMouseDown=function onMouseDown(event){refScratching.current=!0,startScratching(event.pageX,event.pageY)},onTouchStart=function onTouchStart(event){refScratching.current=!0,startScratching(event.changedTouches[0].pageX,event.changedTouches[0].pageY)};return util_1.on(el,"mousedown",onMouseDown),util_1.on(el,"touchstart",onTouchStart),function(){util_1.off(el,"mousedown",onMouseDown),util_1.off(el,"touchstart",onTouchStart),util_1.off(window,"mousemove",onMouseMove),util_1.off(window,"touchmove",onTouchMove),util_1.off(window,"mouseup",onMouseUp),util_1.off(window,"touchend",onTouchEnd),refAnimationFrame.current&&cancelAnimationFrame(refAnimationFrame.current),refAnimationFrame.current=null,refScratching.current=!1,refState.current={isScratching:!1},setState(refState.current)}}}),[el,disabled,paramsRef]),[setEl,state]};exports.ScratchSensor=function ScratchSensor(props){props.children;var params=tslib_1.__rest(props,["children"]),_a=useScratch(params),_ref=_a[0],state=_a[1],element=react_universal_interface_1.render(props,state);return react_1.cloneElement(element,tslib_1.__assign(tslib_1.__assign({},element.props),{ref:function ref(el){element.props.ref&&("object"===_typeof(element.props.ref)&&(element.props.ref.current=el),"function"==typeof element.props.ref&&element.props.ref(el)),_ref(el)}}))},exports.default=useScratch},,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(147)),util_1=__webpack_require__(11);exports.default=function useScroll(ref){var _a=useRafState_1.default({x:0,y:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handler=function handler(){ref.current&&setState({x:ref.current.scrollLeft,y:ref.current.scrollTop})};return ref.current&&util_1.on(ref.current,"scroll",handler,{capture:!1,passive:!0}),function(){ref.current&&util_1.off(ref.current,"scroll",handler)}}),[ref]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useScrolling(ref){var _a=react_1.useState(!1),scrolling=_a[0],setScrolling=_a[1];return react_1.useEffect((function(){if(ref.current){var scrollingTimeout_1,handleScroll_1=function handleScroll_1(){setScrolling(!0),clearTimeout(scrollingTimeout_1),scrollingTimeout_1=setTimeout((function(){return function handleScrollEnd_1(){setScrolling(!1)}()}),150)};return util_1.on(ref.current,"scroll",handleScroll_1,!1),function(){ref.current&&util_1.off(ref.current,"scroll",handleScroll_1,!1)}}return function(){}}),[ref]),scrolling}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11);exports.default=function useSessionStorage(key,initialValue,raw){if(!util_1.isBrowser)return[initialValue,function(){}];var _a=react_1.useState((function(){try{var sessionStorageValue=sessionStorage.getItem(key);return"string"!=typeof sessionStorageValue?(sessionStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?sessionStorageValue:JSON.parse(sessionStorageValue||"null")}catch(_a){return initialValue}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){try{var serializedState=raw?String(state):JSON.stringify(state);sessionStorage.setItem(key,serializedState)}catch(_a){}})),[state,setState]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(85),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),fast_shallow_equal_1=__webpack_require__(852),useCustomCompareEffect_1=tslib_1.__importDefault(__webpack_require__(254)),shallowEqualDepsList=function shallowEqualDepsList(prevDeps,nextDeps){return prevDeps.every((function(dep,index){return fast_shallow_equal_1.equal(dep,nextDeps[index])}))};exports.default=function useShallowCompareEffect(effect,deps){useCustomCompareEffect_1.default(effect,deps,shallowEqualDepsList)}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),React=tslib_1.__importStar(__webpack_require__(0)),util_1=__webpack_require__(11),useState=React.useState,useEffect=React.useEffect,useRef=React.useRef;exports.default=function useSize(element,_a){var _b=void 0===_a?{}:_a,_c=_b.width,width=void 0===_c?1/0:_c,_d=_b.height,height=void 0===_d?1/0:_d;if(!util_1.isBrowser)return["function"==typeof element?element({width:width,height:height}):element,{width:width,height:height}];var _e=useState({width:width,height:height}),state=_e[0],setState=_e[1];"function"==typeof element&&(element=element(state));var style=element.props.style||{},ref=useRef(null),window=null,setSize=function setSize(){var iframe=ref.current,size=iframe?{width:iframe.offsetWidth,height:iframe.offsetHeight}:{width:width,height:height};setState(size)},onWindow=function onWindow(windowToListenOn){util_1.on(windowToListenOn,"resize",setSize),function DRAF(callback){setTimeout(callback,35)}(setSize)};return useEffect((function(){var iframe=ref.current;if(iframe){if(iframe.contentWindow)window=iframe.contentWindow,onWindow(window);else{util_1.off(iframe,"load",(function onLoad_1(){util_1.on(iframe,"load",onLoad_1),window=iframe.contentWindow,onWindow(window)}))}return function(){window&&window.removeEventListener&&util_1.off(window,"resize",setSize)}}}),[]),style.position="relative",[React.cloneElement.apply(React,tslib_1.__spreadArrays([element,{style:style}],tslib_1.__spreadArrays([React.createElement("iframe",{ref:ref,style:{background:"transparent",border:"none",height:"100%",left:0,position:"absolute",top:0,width:"100%",zIndex:-1}})],React.Children.toArray(element.props.children)))),state]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(855),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),util_1=__webpack_require__(11),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104)),useSetState_1=tslib_1.__importDefault(__webpack_require__(145));exports.default=function useSlider(ref,options){void 0===options&&(options={});var isMounted=useMountedState_1.default(),isSliding=react_1.useRef(!1),valueRef=react_1.useRef(0),frame=react_1.useRef(0),_a=useSetState_1.default({isSliding:!1,value:0}),state=_a[0],setState=_a[1];return valueRef.current=state.value,react_1.useEffect((function(){if(util_1.isBrowser){var styles=void 0===options.styles||options.styles,reverse_1=void 0!==options.reverse&&options.reverse;ref.current&&styles&&(ref.current.style.userSelect="none");var startScrubbing_1=function startScrubbing_1(){!isSliding.current&&isMounted()&&((options.onScrubStart||util_1.noop)(),isSliding.current=!0,setState({isSliding:!0}),bindEvents_1())},stopScrubbing_1=function stopScrubbing_1(){isSliding.current&&isMounted()&&((options.onScrubStop||util_1.noop)(valueRef.current),isSliding.current=!1,setState({isSliding:!1}),unbindEvents_1())},onMouseDown_1=function onMouseDown_1(event){startScrubbing_1(),onMouseMove_1(event)},onMouseMove_1=options.vertical?function(event){return onScrub_1(event.clientY)}:function(event){return onScrub_1(event.clientX)},onTouchStart_1=function onTouchStart_1(event){startScrubbing_1(),onTouchMove_1(event)},onTouchMove_1=options.vertical?function(event){return onScrub_1(event.changedTouches[0].clientY)}:function(event){return onScrub_1(event.changedTouches[0].clientX)},bindEvents_1=function bindEvents_1(){util_1.on(document,"mousemove",onMouseMove_1),util_1.on(document,"mouseup",stopScrubbing_1),util_1.on(document,"touchmove",onTouchMove_1),util_1.on(document,"touchend",stopScrubbing_1)},unbindEvents_1=function unbindEvents_1(){util_1.off(document,"mousemove",onMouseMove_1),util_1.off(document,"mouseup",stopScrubbing_1),util_1.off(document,"touchmove",onTouchMove_1),util_1.off(document,"touchend",stopScrubbing_1)},onScrub_1=function onScrub_1(clientXY){cancelAnimationFrame(frame.current),frame.current=requestAnimationFrame((function(){if(isMounted()&&ref.current){var rect=ref.current.getBoundingClientRect(),pos=options.vertical?rect.top:rect.left,length=options.vertical?rect.height:rect.width;if(!length)return;var value=(clientXY-pos)/length;value>1?value=1:value<0&&(value=0),reverse_1&&(value=1-value),setState({value:value}),(options.onScrub||util_1.noop)(value)}}))};return util_1.on(ref.current,"mousedown",onMouseDown_1),util_1.on(ref.current,"touchstart",onTouchStart_1),function(){util_1.off(ref.current,"mousedown",onMouseDown_1),util_1.off(ref.current,"touchstart",onTouchStart_1)}}}),[ref,options.vertical]),state}},,function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMount_1=tslib_1.__importDefault(__webpack_require__(257)),useSetState_1=tslib_1.__importDefault(__webpack_require__(145)),voices=__webpack_require__(11).isBrowser&&"object"===_typeof(window.speechSynthesis)?window.speechSynthesis.getVoices():[];exports.default=function useSpeech(text,opts){void 0===opts&&(opts={});var _a=useSetState_1.default({isPlaying:!1,lang:opts.lang||"default",voice:opts.voice||voices[0],rate:opts.rate||1,pitch:opts.pitch||1,volume:opts.volume||1}),state=_a[0],setState=_a[1],uterranceRef=react_1.useRef(null);return useMount_1.default((function(){var utterance=new SpeechSynthesisUtterance(text);opts.lang&&(utterance.lang=opts.lang),opts.voice&&(utterance.voice=opts.voice),utterance.rate=opts.rate||1,utterance.pitch=opts.pitch||1,utterance.volume=opts.volume||1,utterance.onstart=function(){return setState({isPlaying:!0})},utterance.onresume=function(){return setState({isPlaying:!0})},utterance.onend=function(){return setState({isPlaying:!1})},utterance.onpause=function(){return setState({isPlaying:!1})},uterranceRef.current=utterance,window.speechSynthesis.speak(uterranceRef.current)})),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useIsomorphicLayoutEffect_1=__webpack_require__(2).__importDefault(__webpack_require__(89)),util_1=__webpack_require__(11);exports.default=function useStartTyping(onStartTyping){useIsomorphicLayoutEffect_1.default((function(){var keydown=function keydown(event){!function isFocusedElementEditable(){var activeElement=document.activeElement,body=document.body;if(!activeElement)return!1;if(activeElement===body)return!1;switch(activeElement.tagName){case"INPUT":case"TEXTAREA":return!0}return activeElement.hasAttribute("contenteditable")}()&&function isTypedCharGood(_a){var keyCode=_a.keyCode,metaKey=_a.metaKey,ctrlKey=_a.ctrlKey,altKey=_a.altKey;return!(metaKey||ctrlKey||altKey)&&(keyCode>=48&&keyCode<=57||keyCode>=65&&keyCode<=90)}(event)&&onStartTyping(event)};return util_1.on(document,"keydown",keydown),function(){util_1.off(document,"keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(96),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useStateWithHistory=void 0;var react_1=__webpack_require__(0),useFirstMountState_1=__webpack_require__(144),hookState_1=__webpack_require__(146);exports.useStateWithHistory=function useStateWithHistory(initialState,capacity,initialHistory){if(void 0===capacity&&(capacity=10),capacity<1)throw new Error("Capacity has to be greater than 1, got '"+capacity+"'");var isFirstMount=useFirstMountState_1.useFirstMountState(),_a=react_1.useState(initialState),state=_a[0],innerSetState=_a[1],history=react_1.useRef(null!=initialHistory?initialHistory:[]),historyPosition=react_1.useRef(0);return isFirstMount&&(history.current.length?(history.current[history.current.length-1]!==initialState&&history.current.push(initialState),history.current.length>capacity&&(history.current=history.current.slice(history.current.length-capacity))):history.current.push(initialState),historyPosition.current=history.current.length&&history.current.length-1),[state,react_1.useCallback((function(newState){innerSetState((function(currentState){return(newState=hookState_1.resolveHookState(newState,currentState))!==currentState&&(historyPosition.current<history.current.length-1&&(history.current=history.current.slice(0,historyPosition.current+1)),historyPosition.current=history.current.push(newState)-1,history.current.length>capacity&&(history.current=history.current.slice(history.current.length-capacity))),newState}))}),[state,capacity]),react_1.useMemo((function(){return{history:history.current,position:historyPosition.current,capacity:capacity,back:function back(amount){void 0===amount&&(amount=1),historyPosition.current&&innerSetState((function(){return historyPosition.current-=Math.min(amount,historyPosition.current),history.current[historyPosition.current]}))},forward:function forward(amount){void 0===amount&&(amount=1),historyPosition.current!==history.current.length-1&&innerSetState((function(){return historyPosition.current=Math.min(historyPosition.current+amount,history.current.length-1),history.current[historyPosition.current]}))},go:function go(position){position!==historyPosition.current&&innerSetState((function(){return historyPosition.current=position<0?Math.max(history.current.length+position,0):Math.min(history.current.length-1,position),history.current[historyPosition.current]}))}}}),[state])]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(114),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(104)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(143));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var isMounted=useMountedState_1.default(),update=useUpdate_1.default(),index=react_1.useRef(0);useUpdateEffect_1.default((function(){stateSet.length<=index.current&&(index.current=stateSet.length-1,update())}),[stateSet.length]);var actions=react_1.useMemo((function(){return{next:function next(){return actions.setStateAt(index.current+1)},prev:function prev(){return actions.setStateAt(index.current-1)},setStateAt:function setStateAt(newIndex){isMounted()&&stateSet.length&&newIndex!==index.current&&(index.current=newIndex>=0?newIndex%stateSet.length:stateSet.length+newIndex%stateSet.length,update())},setState:function setState(state){if(isMounted()){var newIndex=stateSet.length?stateSet.indexOf(state):-1;if(-1===newIndex)throw new Error("State '"+state+"' is not a valid state (does not exist in state list)");index.current=newIndex,update()}}}}),[stateSet]);return tslib_1.__assign({state:stateSet[index.current],currentIndex:index.current},actions)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(182));exports.default=function useThrottle(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextValue=react_1.useRef(null),hasNextValue=react_1.useRef(0);return react_1.useEffect((function(){if(timeout.current)nextValue.current=value,hasNextValue.current=!0;else{setState(value);timeout.current=setTimeout((function timeoutCallback_1(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0}),ms)}}),[value]),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(182));exports.default=function useThrottleFn(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextArgs=react_1.useRef();return react_1.useEffect((function(){if(timeout.current)nextArgs.current=args;else{setState(fn.apply(void 0,args));timeout.current=setTimeout((function timeoutCallback_1(){nextArgs.current?(setState(fn.apply(void 0,nextArgs.current)),nextArgs.current=void 0,timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0}),ms)}}),args),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(255)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),DEFAULT_USE_TITLE_OPTIONS={restoreOnUnmount:!1};exports.default="undefined"!=typeof document?function useTitle(title,options){void 0===options&&(options=DEFAULT_USE_TITLE_OPTIONS);var prevTitleRef=react_1.useRef(document.title);document.title=title,react_1.useEffect((function(){return options&&options.restoreOnUnmount?function(){document.title=prevTitleRef.current}:void 0}),[])}:function(_title){}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(167),__webpack_require__(39),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),ts_easing_1=__webpack_require__(865),useRaf_1=tslib_1.__importDefault(__webpack_require__(399));exports.default=function useTween(easingName,ms,delay){return void 0===easingName&&(easingName="inCirc"),void 0===ms&&(ms=200),void 0===delay&&(delay=0),(0,ts_easing_1.easing[easingName])(useRaf_1.default(ms,delay))}},,function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(120));exports.default=function useUnmountPromise(){var refUnmounted=react_1.useRef(!1);return useEffectOnce_1.default((function(){return function(){refUnmounted.current=!0}})),react_1.useMemo((function(){return function race(promise,onError){return new Promise((function(resolve,reject){promise.then((function(result){refUnmounted.current||resolve(result)}),(function(error){refUnmounted.current?onError?onError(error):console.error("useUnmountPromise",error):reject(error)}))}))}}),[])}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),useList_1=tslib_1.__importDefault(__webpack_require__(396));exports.default=function useUpsert(predicate,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),list=_a[0],listActions=_a[1];return[list,tslib_1.__assign(tslib_1.__assign({},listActions),{upsert:function upsert(newItem){listActions.upsert(predicate,newItem)}})]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(67),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(11),isVibrationApiSupported=util_1.isNavigator&&"vibrate"in navigator;exports.default=isVibrationApiSupported?function useVibrate(enabled,pattern,loop){void 0===enabled&&(enabled=!0),void 0===pattern&&(pattern=[1e3,1e3]),void 0===loop&&(loop=!0),react_1.useEffect((function(){var interval;if(enabled&&(navigator.vibrate(pattern),loop)){var duration=pattern instanceof Array?pattern.reduce((function(a,b){return a+b})):pattern;interval=setInterval((function(){navigator.vibrate(pattern)}),duration)}return function(){enabled&&(navigator.vibrate(0),loop&&clearInterval(interval))}}),[enabled])}:util_1.noop},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__webpack_require__(2).__importDefault(__webpack_require__(388)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useScrollbarWidth=void 0;var scrollbar_width_1=__webpack_require__(871),react_1=__webpack_require__(0);exports.useScrollbarWidth=function useScrollbarWidth(){var _a=react_1.useState(scrollbar_width_1.scrollbarWidth()),sbw=_a[0],setSbw=_a[1];return react_1.useEffect((function(){if(void 0===sbw){var raf=requestAnimationFrame((function(){setSbw(scrollbar_width_1.scrollbarWidth())}));return function(){return cancelAnimationFrame(raf)}}}),[]),sbw}},,function(module,exports,__webpack_require__){"use strict";function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(1),__webpack_require__(115),__webpack_require__(32),__webpack_require__(35),__webpack_require__(13),__webpack_require__(38),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useMultiStateValidator=void 0;var react_1=__webpack_require__(0);exports.useMultiStateValidator=function useMultiStateValidator(states,validator,initialValidity){if(void 0===initialValidity&&(initialValidity=[void 0]),"object"!==_typeof(states))throw new Error("states expected to be an object or array, got "+_typeof(states));var validatorInner=react_1.useRef(validator),statesInner=react_1.useRef(states);validatorInner.current=validator,statesInner.current=states;var _a=react_1.useState(initialValidity),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(statesInner.current,setValidity):setValidity(validatorInner.current(statesInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),Object.values(states)),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),util_1=__webpack_require__(11),useRafState_1=tslib_1.__importDefault(__webpack_require__(147));exports.default=function useWindowScroll(){var _a=useRafState_1.default((function(){return{x:util_1.isBrowser?window.pageXOffset:0,y:util_1.isBrowser?window.pageYOffset:0}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handler=function handler(){setState((function(state){var pageXOffset=window.pageXOffset,pageYOffset=window.pageYOffset;return state.x!==pageXOffset||state.y!==pageYOffset?{x:pageXOffset,y:pageYOffset}:state}))};return handler(),util_1.on(window,"scroll",handler,{capture:!1,passive:!0}),function(){util_1.off(window,"scroll",handler)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(147)),util_1=__webpack_require__(11);exports.default=function useWindowSize(initialWidth,initialHeight){void 0===initialWidth&&(initialWidth=1/0),void 0===initialHeight&&(initialHeight=1/0);var _a=useRafState_1.default({width:util_1.isBrowser?window.innerWidth:initialWidth,height:util_1.isBrowser?window.innerHeight:initialHeight}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){if(util_1.isBrowser){var handler_1=function handler_1(){setState({width:window.innerWidth,height:window.innerHeight})};return util_1.on(window,"resize",handler_1),function(){util_1.off(window,"resize",handler_1)}}}),[]),state}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89)),util_1=__webpack_require__(11),defaultState={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};exports.default=util_1.isBrowser&&void 0!==window.ResizeObserver?function useMeasure(){var _a=react_1.useState(null),element=_a[0],ref=_a[1],_b=react_1.useState(defaultState),rect=_b[0],setRect=_b[1],observer=react_1.useMemo((function(){return new window.ResizeObserver((function(entries){if(entries[0]){var _a=entries[0].contentRect,x=_a.x,y=_a.y,width=_a.width,height=_a.height,top=_a.top,left=_a.left,bottom=_a.bottom,right=_a.right;setRect({x:x,y:y,width:width,height:height,top:top,left:left,bottom:bottom,right:right})}}))}),[]);return useIsomorphicLayoutEffect_1.default((function(){if(element)return observer.observe(element),function(){observer.disconnect()}}),[element]),[ref,rect]}:function(){return[util_1.noop,defaultState]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(98),__webpack_require__(13),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),__webpack_require__(117),__webpack_require__(53),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0);exports.default=function useSet(initialSet){void 0===initialSet&&(initialSet=new Set);var _a=react_1.useState(initialSet),set=_a[0],setSet=_a[1],stableActions=react_1.useMemo((function(){return{add:function add(item){return setSet((function(prevSet){return new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},remove:function remove(item){return setSet((function(prevSet){return new Set(Array.from(prevSet).filter((function(i){return i!==item})))}))},toggle:function toggle(item){return setSet((function(prevSet){return prevSet.has(item)?new Set(Array.from(prevSet).filter((function(i){return i!==item}))):new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},reset:function reset(){return setSet(initialSet)}}}),[setSet]),utils=tslib_1.__assign({has:react_1.useCallback((function(item){return set.has(item)}),[set])},stableActions);return[set,utils]}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(41),__webpack_require__(42),__webpack_require__(53),__webpack_require__(99),__webpack_require__(100),Object.defineProperty(exports,"__esModule",{value:!0}),exports.createGlobalState=void 0;var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),hookState_1=__webpack_require__(146),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(120)),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(89));function createGlobalState(initialState){var store={state:initialState instanceof Function?initialState():initialState,setState:function setState(nextState){store.state=hookState_1.resolveHookState(nextState,store.state),store.setters.forEach((function(setter){return setter(store.state)}))},setters:[]};return function(){var _a=react_1.useState(store.state),globalState=_a[0],stateSetter=_a[1];return useEffectOnce_1.default((function(){return function(){store.setters=store.setters.filter((function(setter){return setter!==stateSetter}))}})),useIsomorphicLayoutEffect_1.default((function(){store.setters.includes(stateSetter)||store.setters.push(stateSetter)})),[globalState,store.setState]}}exports.createGlobalState=createGlobalState,exports.default=createGlobalState},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0}),exports.useHash=void 0;var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useLifecycles_1=tslib_1.__importDefault(__webpack_require__(395)),util_1=__webpack_require__(11);exports.useHash=function useHash(){var _a=react_1.useState((function(){return window.location.hash})),hash=_a[0],setHash=_a[1],onHashChange=react_1.useCallback((function(){setHash(window.location.hash)}),[]);useLifecycles_1.default((function(){util_1.on(window,"hashchange",onHashChange)}),(function(){util_1.off(window,"hashchange",onHashChange)}));var _setHash=react_1.useCallback((function(newHash){newHash!==hash&&(window.location.hash=newHash)}),[hash]);return[hash,_setHash]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="createbreakpoint"><code>createBreakpoint</code></h1>\n<h2 id="usage">Usage</h2>\n<h3 id="use-default-breakpoint">use default breakpoint</h3>\n<p>laptopL: 1440, laptop: 1024, tablet: 768</p>\n<pre><code class="language-jsx">import React from &quot;react&quot;;\nimport { createBreakpoint } from &quot;react-use&quot;;\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () =&gt; {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === &quot;laptopL&quot;) return &lt;div&gt; This is very big Laptop &lt;/div&gt;;\n  else if (breakpoint == &quot;laptop&quot;) return &lt;div&gt; This is Laptop&lt;/div&gt;;\n  else if (breakpoint == &quot;tablet&quot;) return &lt;div&gt; This is Tablet&lt;/div&gt;;\n  else return &lt;div&gt; Too small!&lt;/div&gt;;\n};</code></pre>\n<h3 id="use-custom-breakpoint">use custom breakpoint</h3>\n<p>XL: 1280, L: 768, S: 350</p>\n<pre><code class="language-jsx">import React from &quot;react&quot;;\nimport { createBreakpoint } from &quot;react-use&quot;;\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () =&gt; {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === &quot;XL&quot;) return &lt;div&gt; XL &lt;/div&gt;;\n  else if (breakpoint == &quot;L&quot;) return &lt;div&gt; LoL&lt;/div&gt;;\n  else if (breakpoint == &quot;S&quot;) return &lt;div&gt; Sexyy&lt;/div&gt;;\n  else return &lt;div&gt; Wth&lt;/div&gt;;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useGlobalValue=src_1.createGlobalState(0),CompA=function CompA(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function onClick(){return setValue(value+1)}},"+")},CompB=function CompB(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function onClick(){return setValue(value-1)}},"-")},Demo=function Demo(){var value=useGlobalValue()[0];return react_2.default.createElement("div",null,react_2.default.createElement("p",null,value),react_2.default.createElement(CompA,null),react_2.default.createElement(CompB,null))};react_1.storiesOf("State/createGlobalState",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(881)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useglobalstate"><code>useGlobalState</code></h1>\n<p>A React hook that creates a globally shared state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-tsx">const useGlobalValue = createGlobalState&lt;number&gt;(0);\n\nconst CompA: FC = () =&gt; {\n  const [value, setValue] = useGlobalValue();\n\n  return &lt;button onClick={() =&gt; setValue(value + 1)}&gt;+&lt;/button&gt;;\n};\n\nconst CompB: FC = () =&gt; {\n  const [value, setValue] = useGlobalValue();\n\n  return &lt;button onClick={() =&gt; setValue(value - 1)}&gt;-&lt;/button&gt;;\n};\n\nconst Demo: FC = () =&gt; {\n  const [value] = useGlobalValue();\n  return (\n    &lt;div&gt;\n      &lt;p&gt;{value}&lt;/p&gt;\n      &lt;CompA /&gt;\n      &lt;CompB /&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p>It also allows initializing the state with a function and using a function in the setState:</p>\n<pre><code class="language-tsx">const useGlobalValue = createGlobalState&lt;number&gt;(() =&gt; 0);\n\nconst CompA: FC = () =&gt; {\n  const [value, setValue] = useGlobalValue();\n\n  return &lt;button onClick={() =&gt; setValue(value =&gt; value + 1)}&gt;+&lt;/button&gt;;\n};\n\nconst CompB: FC = () =&gt; {\n  const [value, setValue] = useGlobalValue();\n\n  return &lt;button onClick={() =&gt; setValue(value =&gt; value - 1)}&gt;-&lt;/button&gt;;\n};\n\nconst Demo: FC = () =&gt; {\n  const [value] = useGlobalValue();\n  return (\n    &lt;div&gt;\n      &lt;p&gt;{value}&lt;/p&gt;\n      &lt;CompA /&gt;\n      &lt;CompB /&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useMemoFibonacci=src_1.createMemo((function fibonacci(n){return 0===n?0:1===n?1:fibonacci(n-1)+fibonacci(n-2)})),Demo=function Demo(){var result=useMemoFibonacci(10);return React.createElement("div",null,"fib(10) = ",result)};react_1.storiesOf("State/createMemo",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(883)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="creatememo"><code>createMemo</code></h1>\n<p>Hook factory, receives a function to be memoized, returns a memoized React hook,\nwhich receives the same arguments and returns the same result as the original function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {createMemo} from &#39;react-use&#39;;\n\nconst fibonacci = n =&gt; {\n  if (n === 0) return 0;\n  if (n === 1) return 1;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n};\n\nconst useMemoFibonacci = createMemo(fibonacci);\n\nconst Demo = () =&gt; {\n  const result = useMemoFibonacci(10);\n\n  return (\n    &lt;div&gt;\n      fib(10) = {result}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const useMemoFn = createMemo(fn);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),redux_logger_1=tslib_1.__importDefault(__webpack_require__(885)),redux_thunk_1=tslib_1.__importDefault(__webpack_require__(886)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useThunkReducer=src_1.createReducer(redux_thunk_1.default,redux_logger_1.default);function init(initialCount){return{count:initialCount}}function reducer(state,action){switch(action.type){case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};case"reset":return init(action.payload);default:throw new Error}}var Demo=function Demo(_a){var _b=_a.initialCount,initialCount=void 0===_b?1:_b,addAndReset=React.useCallback((function(){return function(dispatch2){dispatch2({type:"increment"}),setTimeout((function(){dispatch2({type:"reset",payload:initialCount})}),1e3)}}),[initialCount]),_c=useThunkReducer(reducer,initialCount,init),state=_c[0],dispatch=_c[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:function onClick(){return dispatch(addAndReset())}},"Add and reset"),React.createElement("button",{onClick:function onClick(){return dispatch({type:"reset",payload:initialCount})}},"Reset"),React.createElement("button",{onClick:function onClick(){return dispatch({type:"increment"})}},"+"),React.createElement("button",{onClick:function onClick(){return dispatch({type:"decrement"})}},"-"),React.createElement("p",null,"Open your developer console to see actions logged by middleware"))};react_1.storiesOf("State/createReducer",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(887)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="createreducer"><code>createReducer</code></h1>\n<p>Factory for reducer hooks with custom middleware with an identical API as <a href="https://reactjs.org/docs/hooks-reference.html#usereducer">React&#39;s <code>useReducer</code></a>. Compatible with <a href="https://redux.js.org/advanced/middleware">Redux middleware</a>.</p>\n<h2 id="usage">Usage</h2>\n<p>An example with <a href="https://github.com/reduxjs/redux-thunk"><code>redux-thunk</code></a> and <a href="https://github.com/LogRocket/redux-logger"><code>redux-logger</code></a>.</p>\n<pre><code class="language-jsx">import { createReducer } from &#39;react-use&#39;;\nimport logger from &#39;redux-logger&#39;;\nimport thunk from &#39;redux-thunk&#39;;\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case &#39;increment&#39;:\n      return { count: state.count + 1 };\n    case &#39;decrement&#39;:\n      return { count: state.count - 1 };\n    case &#39;reset&#39;:\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) =&gt; {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() =&gt; {\n    return dispatch =&gt; {\n      dispatch({ type: &#39;increment&#39; });\n\n      setTimeout(() =&gt; {\n        dispatch({ type: &#39;reset&#39;, payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;count: {state.count}&lt;/p&gt;\n      &lt;button onClick={() =&gt; dispatch(addAndReset())}&gt;Add and reset&lt;/button&gt;\n      &lt;button\n        onClick={() =&gt; dispatch({ type: &#39;reset&#39;, payload: { count: initialCount }})}\n      &gt;\n        Reset\n      &lt;/button&gt;\n      &lt;button onClick={() =&gt; dispatch({ type: &#39;increment&#39; })}&gt;+&lt;/button&gt;\n      &lt;button onClick={() =&gt; dispatch({ type: &#39;decrement&#39; })}&gt;-&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const useMiddlewareReducer = createReducer(...middlewares);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),_a=src_1.createReducerContext((function reducer(state,action){switch(action){case"increment":return state+1;case"decrement":return state-1;default:throw new Error}}),0),useSharedCounter=_a[0],SharedCounterProvider=_a[1],ComponentA=function ComponentA(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component A  ",React.createElement("button",{type:"button",onClick:function onClick(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function onClick(){return dispatch("increment")}},"+"))},ComponentB=function ComponentB(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component B  ",React.createElement("button",{type:"button",onClick:function onClick(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function onClick(){return dispatch("increment")}},"+"))},Demo=function Demo(){return React.createElement(SharedCounterProvider,null,React.createElement("p",null,"Those two counters share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State/createReducerContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(889)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="createreducercontext"><code>createReducerContext</code></h1>\n<p>Factory for react context hooks that will behave just like <a href="https://reactjs.org/docs/hooks-reference.html#usereducer">React&#39;s <code>useReducer</code></a> except the state will be shared among all components in the provider.</p>\n<p>This allows you to have a shared state that any component can update easily.</p>\n<h2 id="usage">Usage</h2>\n<p>An example with two counters that shared the same value.</p>\n<pre><code class="language-jsx">import { createReducerContext } from &#39;react-use&#39;;\n\ntype Action = &#39;increment&#39; | &#39;decrement&#39;;\n\nconst reducer = (state: number, action: Action) =&gt; {\n  switch (action) {\n    case &#39;increment&#39;:\n      return state + 1;\n    case &#39;decrement&#39;:\n      return state - 1;\n    default:\n      throw new Error();\n  }\n};\n\nconst [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);\n\nconst ComponentA = () =&gt; {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    &lt;p&gt;\n      Component A &amp;nbsp;\n      &lt;button type=&quot;button&quot; onClick={() =&gt; dispatch(&#39;decrement&#39;)}&gt;\n        -\n      &lt;/button&gt;\n      &amp;nbsp;{count}&amp;nbsp;\n      &lt;button type=&quot;button&quot; onClick={() =&gt; dispatch(&#39;increment&#39;)}&gt;\n        +\n      &lt;/button&gt;\n    &lt;/p&gt;\n  );\n};\n\nconst ComponentB = () =&gt; {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    &lt;p&gt;\n      Component B &amp;nbsp;\n      &lt;button type=&quot;button&quot; onClick={() =&gt; dispatch(&#39;decrement&#39;)}&gt;\n        -\n      &lt;/button&gt;\n      &amp;nbsp;{count}&amp;nbsp;\n      &lt;button type=&quot;button&quot; onClick={() =&gt; dispatch(&#39;increment&#39;)}&gt;\n        +\n      &lt;/button&gt;\n    &lt;/p&gt;\n  );\n};\n\nconst Demo = () =&gt; {\n  return (\n    &lt;SharedCounterProvider&gt;\n      &lt;p&gt;Those two counters share the same value.&lt;/p&gt;\n      &lt;ComponentA /&gt;\n      &lt;ComponentB /&gt;\n    &lt;/SharedCounterProvider&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);\n\n// In wrapper\nconst Wrapper = ({ children }) =&gt; (\n  // You can override the initial state for each Provider\n  &lt;SharedStateProvider initialState={overrideInitialState}&gt;\n    { children }\n  &lt;/SharedStateProvider&gt;\n)\n\n// In a component\nconst Component = () =&gt; {\n  const [sharedState, dispatch] = useSharedState();\n\n  // ...\n}</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),_a=src_1.createStateContext(""),useSharedText=_a[0],SharedTextProvider=_a[1],ComponentA=function ComponentA(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component A:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function onInput(ev){return setText(ev.currentTarget.value)}}))},ComponentB=function ComponentB(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component B:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function onInput(ev){return setText(ev.currentTarget.value)}}))},Demo=function Demo(){return React.createElement(SharedTextProvider,null,React.createElement("p",null,"Those two fields share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State/createStateContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(891)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="createstatecontext"><code>createStateContext</code></h1>\n<p>Factory for react context hooks that will behave just like <a href="https://reactjs.org/docs/hooks-reference.html#usestate">React&#39;s <code>useState</code></a> except the state will be shared among all components in the provider.</p>\n<p>This allows you to have a shared state that any component can update easily.</p>\n<h2 id="usage">Usage</h2>\n<p>An example with a shared text between two input fields.</p>\n<pre><code class="language-jsx">import { createStateContext } from &#39;react-use&#39;;\n\nconst [useSharedText, SharedTextProvider] = createStateContext(&#39;&#39;);\n\nconst ComponentA = () =&gt; {\n  const [text, setText] = useSharedText();\n  return (\n    &lt;p&gt;\n      Component A:\n      &lt;br /&gt;\n      &lt;input type=&quot;text&quot; value={text} onInput={ev =&gt; setText(ev.target.value)} /&gt;\n    &lt;/p&gt;\n  );\n};\n\nconst ComponentB = () =&gt; {\n  const [text, setText] = useSharedText();\n  return (\n    &lt;p&gt;\n      Component B:\n      &lt;br /&gt;\n      &lt;input type=&quot;text&quot; value={text} onInput={ev =&gt; setText(ev.target.value)} /&gt;\n    &lt;/p&gt;\n  );\n};\n\nconst Demo = () =&gt; {\n  return (\n    &lt;SharedTextProvider&gt;\n      &lt;p&gt;Those two fields share the same value.&lt;/p&gt;\n      &lt;ComponentA /&gt;\n      &lt;ComponentB /&gt;\n    &lt;/SharedTextProvider&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [useSharedState, SharedStateProvider] = createStateContext(initialValue);\n\n// In wrapper\nconst Wrapper = ({ children }) =&gt; (\n  // You can override the initial value for each Provider\n  &lt;SharedStateProvider initialValue={overrideInitialValue}&gt;\n    { children }\n  &lt;/SharedStateProvider&gt;\n)\n\n// In a component\nconst Component = () =&gt; {\n  const [sharedState, setSharedState] = useSharedState();\n\n  // ...\n}</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(_a){var delay=_a.delay,state=src_1.useAsync((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects/useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(893)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasync"><code>useAsync</code></h1>\n<p>React hook that resolves an <code>async</code> function or a function that returns\na promise;</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsync} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n  const state = useAsync(async () =&gt; {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    &lt;div&gt;\n      {state.loading\n        ? &lt;div&gt;Loading...&lt;/div&gt;\n        : state.error\n          ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n          : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n      }\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsync(fn, args?: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function onClick(){return callback()}},"Start"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects/useAsyncFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(895)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasyncfn"><code>useAsyncFn</code></h1>\n<p>React hook that returns state and a callback for an <code>async</code> function or a\nfunction that returns a promise. The state is of the same shape as <code>useAsync</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsyncFn} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n  const [state, doFetch] = useAsyncFn(async () =&gt; {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    &lt;div&gt;\n      {state.loading\n        ? &lt;div&gt;Loading...&lt;/div&gt;\n        : state.error\n          ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n          : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n      }\n      &lt;button onClick={() =&gt; doFetch()}&gt;Start loading&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsyncFn&lt;Result, Args&gt;(fn, deps?: any[], initialState?: AsyncState&lt;Result&gt;);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(_a){var delay=_a.delay,state=src_1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function onClick(){return state.retry()}},"Retry"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects/useAsyncRetry",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(897)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasyncretry"><code>useAsyncRetry</code></h1>\n<p>Uses <code>useAsync</code> with an additional <code>retry</code> method to easily retry/refresh the async function;</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsyncRetry} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n  const state = useAsyncRetry(async () =&gt; {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    &lt;div&gt;\n      {state.loading\n        ? &lt;div&gt;Loading...&lt;/div&gt;\n        : state.error\n          ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n          : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n      }\n      {!loading &amp;&amp; &lt;button onClick={() =&gt; state.retry()}&gt;Start loading&lt;/button&gt;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsyncRetry(fn, args?: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useAudio({src:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",autoPlay:!0}),audio=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,audio,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function onClick(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function onClick(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function onClick(){return controls.seek(state.time+5)}},"+5 sec"))};react_1.storiesOf("UI/useAudio",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(899)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useaudio"><code>useAudio</code></h1>\n<p>Creates <code>&lt;audio&gt;</code> element, tracks its state and exposes playback controls.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAudio} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [audio, state, controls, ref] = useAudio({\n    src: &#39;https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3&#39;,\n    autoPlay: true,\n  });\n\n  return (\n    &lt;div&gt;\n      {audio}\n      &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n      &lt;button onClick={controls.pause}&gt;Pause&lt;/button&gt;\n      &lt;button onClick={controls.play}&gt;Play&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={controls.mute}&gt;Mute&lt;/button&gt;\n      &lt;button onClick={controls.unmute}&gt;Un-mute&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={() =&gt; controls.volume(.1)}&gt;Volume: 10%&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.volume(.5)}&gt;Volume: 50%&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.volume(1)}&gt;Volume: 100%&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={() =&gt; controls.seek(state.time - 5)}&gt;-5 sec&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.seek(state.time + 5)}&gt;+5 sec&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(&lt;audio {...props}/&gt;);</code></pre>\n<p><code>audio</code> is React&#39;s <code>&lt;audio&gt;</code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx">&lt;div&gt;{audio}&lt;/div&gt;</code></pre>\n<p><code>state</code> tracks the state of the audio and has the following shape:</p>\n<pre><code class="language-json">{\n  &quot;buffered&quot;: [\n    {\n      &quot;start&quot;: 0,\n      &quot;end&quot;: 425.952625\n    }\n  ],\n  &quot;time&quot;: 5.244996,\n  &quot;duration&quot;: 425.952625,\n  &quot;paused&quot;: false,\n  &quot;muted&quot;: false,\n  &quot;volume&quot;: 1\n}</code></pre>\n<p><code>controls</code> is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:</p>\n<pre><code class="language-ts">interface AudioControls {\n  play: () =&gt; Promise&lt;void&gt; | void;\n  pause: () =&gt; void;\n  mute: () =&gt; void;\n  unmute: () =&gt; void;\n  volume: (volume: number) =&gt; void;\n  seek: (time: number) =&gt; void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code>&lt;audio&gt;</code> element, you can access the element by\n<code>ref.current</code>, note that it may be <code>null</code>.</p>\n<p>And finally, <code>props</code> &mdash; all props that <code>&lt;audio&gt;</code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(901),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var batteryState=src_1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":  "," ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors/useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(904)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usebattery"><code>useBattery</code></h1>\n<p>React sensor hook that tracks battery status.</p>\n<blockquote>\n<p><strong>Note:</strong> current <code>BatteryManager</code> API state is obsolete.<br>Although it may still work in some browsers, its use is discouraged since it could be removed at any time.</p>\n</blockquote>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useBattery} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      &lt;div&gt;\n        &lt;strong&gt;Battery sensor&lt;/strong&gt;: &lt;span&gt;not supported&lt;/span&gt;\n      &lt;/div&gt;\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      &lt;div&gt;\n        &lt;strong&gt;Battery sensor&lt;/strong&gt;: &lt;span&gt;supported&lt;/span&gt; &lt;br /&gt;\n        &lt;strong&gt;Battery state&lt;/strong&gt;: &lt;span&gt;fetching&lt;/span&gt;\n      &lt;/div&gt;\n    );\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;strong&gt;Battery sensor&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;supported&lt;/span&gt; &lt;br /&gt;\n      &lt;strong&gt;Battery state&lt;/strong&gt;: &lt;span&gt;fetched&lt;/span&gt; &lt;br /&gt;\n      &lt;strong&gt;Charge level&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ (batteryState.level * 100).toFixed(0) }%&lt;/span&gt; &lt;br /&gt;\n      &lt;strong&gt;Charging&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ batteryState.charging ? &#39;yes&#39; : &#39;no&#39; }&lt;/span&gt; &lt;br /&gt;\n      &lt;strong&gt;Charging time&lt;/strong&gt;:&amp;nbsp;&amp;nbsp;\n      &lt;span&gt;{ batteryState.chargingTime ? batteryState.chargingTime : &#39;finished&#39; }&lt;/span&gt; &lt;br /&gt;\n      &lt;strong&gt;Discharging time&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ batteryState.dischargingTime }&lt;/span&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();</code></pre>\n<ul>\n<li><strong><code>isSupported</code></strong><em><code>: boolean</code></em> - whether browser/devise supports BatteryManager;</li>\n<li><strong><code>fetched</code></strong><em><code>: boolean</code></em> - whether battery state is fetched;</li>\n<li><strong><code>level</code></strong><em><code>: number</code></em> - representing the system&#39;s battery charge level scaled to a value between 0.0 and 1.0.</li>\n<li><strong><code>charging</code></strong><em><code>: boolean</code></em> - indicating whether or not the battery is currently being charged.</li>\n<li><strong><code>dischargingTime</code></strong><em><code>: number</code></em> - remaining time in seconds until the battery is completely discharged and the system will suspend.</li>\n<li><strong><code>chargingTime</code></strong><em><code>: number</code></em> - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),DemoBool=function DemoBool(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return src_1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function onClick(){return toggleDirty()}},dirty?"Disable":"Enable"))},DemoFunc=function DemoFunc(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1],dirtyFn=react_2.useCallback((function(){return dirty}),[dirty]);return src_1.useBeforeUnload(dirtyFn,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function onClick(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects/useBeforeUnload",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(906)})})).add("Demo (boolean)",(function(){return react_2.default.createElement(DemoBool,null)})).add("Demo (function)",(function(){return react_2.default.createElement(DemoFunc,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usebeforeunload"><code>useBeforeUnload</code></h1>\n<p>React side-effect hook that shows browser alert when user try to reload or close the page.</p>\n<h2 id="usage">Usage</h2>\n<h3 id="boolean-check">Boolean check</h3>\n<pre><code class="language-jsx">import {useBeforeUnload} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, &#39;You have unsaved changes, are you sure?&#39;);\n\n  return (\n    &lt;div&gt;\n      {dirty &amp;&amp; &lt;p&gt;Try to reload or close tab&lt;/p&gt;}\n      &lt;button onClick={() =&gt; toggleDirty()}&gt;{dirty ? &#39;Disable&#39; : &#39;Enable&#39;}&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h3 id="function-check">Function check</h3>\n<p>Note: Since every <code>dirtyFn</code> change registers a new callback, you should use\n<a href="https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback">refs</a>\nif your test value changes often.</p>\n<pre><code class="language-jsx">import {useBeforeUnload} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [dirty, toggleDirty] = useToggle(false);\n  const dirtyFn = useCallback(() =&gt; {\n    return dirty;\n  }, [dirty]);\n  useBeforeUnload(dirtyFn, &#39;You have unsaved changes, are you sure?&#39;);\n\n  return (\n    &lt;div&gt;\n      {dirty &amp;&amp; &lt;p&gt;Try to reload or close tab&lt;/p&gt;}\n      &lt;button onClick={() =&gt; toggleDirty()}&gt;{dirty ? &#39;Disable&#39; : &#39;Enable&#39;}&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useBoolean(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:function onClick(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function onClick(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function onClick(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State/useBoolean",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(403)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_actions_1=__webpack_require__(258),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var ref=react_2.useRef(null);return src_1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI/useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(911)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useclickaway"><code>useClickAway</code></h1>\n<p>React UI hook that triggers a callback when user\nclicks outside the target element.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useClickAway} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const ref = useRef(null);\n  useClickAway(ref, () =&gt; {\n    console.log(&#39;OUTSIDE CLICKED&#39;);\n  });\n\n  return (\n    &lt;div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: &#39;red&#39;,\n    }} /&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, [&#39;click&#39;])\nuseClickAway(ref, onMouseEvent, [&#39;mousedown&#39;, &#39;touchstart&#39;])</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useCookie("my-cookie"),value=_a[0],updateCookie=_a[1],deleteCookie=_a[2],_b=react_2.useState(1),counter=_b[0],setCounter=_b[1];react_2.useEffect((function(){deleteCookie()}),[]);return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"Value: ",value),react_2.default.createElement("button",{onClick:function updateCookieHandler(){updateCookie("my-awesome-cookie-"+counter),setCounter((function(c){return c+1}))}},"Update Cookie"),react_2.default.createElement("br",null),react_2.default.createElement("button",{onClick:deleteCookie},"Delete Cookie"))};react_1.storiesOf("Side effects/useCookie",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(913)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecookie"><code>useCookie</code></h1>\n<p>React hook that returns the current value of a <code>cookie</code>, a callback to update the <code>cookie</code>\nand a callback to delete the <code>cookie.</code></p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useCookie } from &quot;react-use&quot;;\n\nconst Demo = () =&gt; {\n  const [value, updateCookie, deleteCookie] = useCookie(&quot;my-cookie&quot;);\n  const [counter, setCounter] = useState(1);\n\n  useEffect(() =&gt; {\n    deleteCookie();\n  }, []);\n\n  const updateCookieHandler = () =&gt; {\n    updateCookie(`my-awesome-cookie-${counter}`);\n    setCounter(c =&gt; c + 1);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Value: {value}&lt;/p&gt;\n      &lt;button onClick={updateCookieHandler}&gt;Update Cookie&lt;/button&gt;\n      &lt;br /&gt;\n      &lt;button onClick={deleteCookie}&gt;Delete Cookie&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=src_1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function onChange(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function onClick(){return copyToClipboard(text)}},"copy text"),state.error?React.createElement("p",null,"Unable to copy value: ",state.error.message):state.value&&React.createElement(React.Fragment,null,React.createElement("p",null,"Copied ",state.value," ",state.noUserInteraction?"without":"with"," user interaction"),React.createElement("input",{type:"text",placeholder:"Paste it in here to check"})))};react_1.storiesOf("Side-effects/useCopyToClipboard",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(915)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecopytoclipboard"><code>useCopyToClipboard</code></h1>\n<p>Copy text to a user&#39;s clipboard.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">const Demo = () =&gt; {\n  const [text, setText] = React.useState(&#39;&#39;);\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    &lt;div&gt;\n      &lt;input value={text} onChange={e =&gt; setText(e.target.value)} /&gt;\n      &lt;button type=&quot;button&quot; onClick={() =&gt; copyToClipboard(text)}&gt;copy text&lt;/button&gt;\n      {state.error\n        ? &lt;p&gt;Unable to copy value: {state.error.message}&lt;/p&gt;\n        : state.value &amp;&amp; &lt;p&gt;Copied {state.value}&lt;/p&gt;}\n    &lt;/div&gt;\n  )\n}</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();</code></pre>\n<ul>\n<li><code>value</code> &mdash; value that was copied to clipboard, undefined when nothing was copied.</li>\n<li><code>error</code> &mdash; caught error when trying to copy to clipboard.</li>\n<li><code>noUserInteraction</code> &mdash; boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying <a href="https://github.com/sudodoki/copy-to-clipboard"><code>copy-to-clipboard</code></a> library.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(5),initialValue=_a[0],setInitialValue=_a[1],_b=src_1.useCounter(1),min=_b[0],_c=_b[1],incMin=_c.inc,decMin=_c.dec,_d=src_1.useCounter(10),max=_d[0],_e=_d[1],incMax=_e.inc,decMax=_e.dec,_f=src_1.useCounter(initialValue,max,min),value=_f[0],_g=_f[1],inc=_g.inc,dec=_g.dec,set=_g.set,reset=_g.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function onClick(){return inc()}},"Increment"),React.createElement("button",{onClick:function onClick(){return dec()}},"Decrement"),React.createElement("button",{onClick:function onClick(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function onClick(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function onClick(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function onClick(){return reset()}},"Reset"),React.createElement("button",{onClick:function onClick(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function onClick(){return incMin()}},"Increment"),React.createElement("button",{onClick:function onClick(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function onClick(){return incMax()}},"Increment"),React.createElement("button",{onClick:function onClick(){return decMax()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Initial value: ",initialValue,React.createElement("button",{onClick:function onClick(){return setInitialValue((function(v){return++v}))}},"Increment"),React.createElement("button",{onClick:function onClick(){return setInitialValue((function(v){return--v}))}},"Decrement"))};react_1.storiesOf("State/useCounter",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(917)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecounter"><code>useCounter</code></h1>\n<p>React state hook that tracks a numeric value.</p>\n<p><code>useNumber</code> is an alias for <code>useCounter</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useNumber} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n  const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;\n        current: { value } [min: { min }; max: { max }]\n      &lt;/div&gt;\n\n      &lt;br /&gt;\n      Current value: &lt;button onClick={ () =&gt; inc() }&gt;Increment&lt;/button&gt;\n      &lt;button onClick={ () =&gt; dec() }&gt;Decrement&lt;/button&gt;\n      &lt;button onClick={ () =&gt; inc(5) }&gt;Increment (+5)&lt;/button&gt;\n      &lt;button onClick={ () =&gt; dec(5) }&gt;Decrement (-5)&lt;/button&gt;\n      &lt;button onClick={ () =&gt; set(100) }&gt;Set 100&lt;/button&gt;\n      &lt;button onClick={ () =&gt; reset() }&gt;Reset&lt;/button&gt;\n      &lt;button onClick={ () =&gt; reset(25) }&gt;Reset (25)&lt;/button&gt;\n\n      &lt;br /&gt;\n      &lt;br /&gt;\n      Min value:\n      &lt;button onClick={ () =&gt; incMin() }&gt;Increment&lt;/button&gt;\n      &lt;button onClick={ () =&gt; decMin() }&gt;Decrement&lt;/button&gt;\n\n      &lt;br /&gt;\n      &lt;br /&gt;\n      Max value:\n      &lt;button onClick={ () =&gt; incMax() }&gt;Increment&lt;/button&gt;\n      &lt;button onClick={ () =&gt; decMax() }&gt;Decrement&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, min: number | null = null);</code></pre>\n<ul>\n<li><code>current</code> - current counter value;</li>\n<li><code>get(): number</code> - getter of current counter value;</li>\n<li><code>inc(delta: number): void</code> - increment current value;</li>\n<li><code>dec(delta: number): void</code> - decrement current value;</li>\n<li><code>set(value: number): void</code> - set arbitrary value;</li>\n<li><code>reset(value: number): void</code> - as the <code>set</code>, but also will assign value by reference to the <code>initial</code> parameter;</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var className=src_1.useCss({color:"red",border:"1px solid red","&:hover":{color:"blue"}});return React.createElement("div",{className:className},"hello")};react_1.storiesOf("UI/useCss",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(919)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecss"><code>useCss</code></h1>\n<p>React UI hook that changes <a href="https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation">CSS dynamically</a>. Works like &quot;virtual CSS&quot; &mdash;\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCss} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const className = useCss({\n    color: &#39;red&#39;,\n    border: &#39;1px solid red&#39;,\n    &#39;&amp;:hover&#39;: {\n      color: &#39;blue&#39;,\n    },\n  });\n\n  return (\n    &lt;div className={className}&gt;\n      Hover me!\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const className = useCss({\n  color: &#39;tomato&#39;,\n  &#39;&amp;:hover&#39;: {\n    color: &#39;orange&#39;,\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: &#39;tomato&#39;,\n  },\n  &#39;.global_class &amp;:hover svg&#39;: {\n    fill: &#39;orange&#39;,\n  },\n});\n\nconst className = useCss({\n  color: &#39;tomato&#39;,\n  &#39;@media only screen and (max-width: 600px)&#39;: {\n    color: &#39;orange&#39;,\n    &#39;&amp;:hover&#39;: {\n      color: &#39;red&#39;,\n    }\n  },\n});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),isDeepEqual_1=tslib_1.__importDefault(__webpack_require__(253)),Demo=function Demo(){var _a=src_1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=src_1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal<options.max&&incNormal()}),[options]),src_1.useCustomCompareEffect((function(){countNormal<options.max&&incDeep()}),[options],(function(prevDeps,nextDeps){return isDeepEqual_1.default(prevDeps,nextDeps)})),React.createElement("div",null,React.createElement("p",null,"useEffect: ",countNormal),React.createElement("p",null,"useCustomCompareEffect: ",countDeep))};react_1.storiesOf("Lifecycle/useCustomCompareEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(921)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecustomcompareeffect"><code>useCustomCompareEffect</code></h1>\n<p>A modified useEffect hook that accepts a comparator which is used for comparison on dependencies instead of reference equality.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useCustomCompareEffect} from &#39;react-use&#39;;\nimport isEqual from &#39;lodash/isEqual&#39;;\n\nconst Demo = () =&gt; {\n  const [count, {inc: inc}] = useCounter(0);\n  const options = { step: 2 };\n\n  useCustomCompareEffect(() =&gt; {\n    inc(options.step)\n  }, [options], (prevDeps, nextDeps) =&gt; isEqual(prevDeps, nextDeps));\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;useCustomCompareEffect with deep comparison: {count}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useCustomCompareEffect(effect: () =&gt; void | (() =&gt; void | undefined), deps: any[], depsEqual: (prevDeps: any[], nextDeps: any[]) =&gt; boolean);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1],cancel=src_1.useDebounce((function(){setState("Typing stopped"),setDebouncedValue(val)}),2e3,[val])[1];return React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function onChange(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue,React.createElement("button",{onClick:cancel},"Cancel debounce")))};react_1.storiesOf("Side effects/useDebounce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(923)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedebounce"><code>useDebounce</code></h1>\n<p>React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.</p>\n<p>The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">const Demo = () =&gt; {\n  const [state, setState] = React.useState(&#39;Typing stopped&#39;);\n  const [val, setVal] = React.useState(&#39;&#39;);\n  const [debouncedValue, setDebouncedValue] = React.useState(&#39;&#39;);\n\n  const [, cancel] = useDebounce(\n    () =&gt; {\n      setState(&#39;Typing stopped&#39;);\n      setDebouncedValue(val);\n    },\n    2000,\n    [val]\n  );\n\n  return (\n    &lt;div&gt;\n      &lt;input\n        type=&quot;text&quot;\n        value={val}\n        placeholder=&quot;Debounced input&quot;\n        onChange={({ currentTarget }) =&gt; {\n          setState(&#39;Waiting for typing to stop...&#39;);\n          setVal(currentTarget.value);\n        }}\n      /&gt;\n      &lt;div&gt;{state}&lt;/div&gt;\n      &lt;div&gt;\n        Debounced value: {debouncedValue}\n        &lt;button onClick={cancel}&gt;Cancel debounce&lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [\n    isReady: () =&gt; boolean | null,\n    cancel: () =&gt; void,\n] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);</code></pre>\n<ul>\n<li><strong><code>fn</code></strong><em><code>: Function</code></em> - function that will be called;</li>\n<li><strong><code>ms</code></strong><em><code>: number</code></em> - delay in milliseconds;</li>\n<li><strong><code>deps</code></strong><em><code>: DependencyList</code></em> - array of values that the debounce depends on, in the same manner as useEffect;</li>\n<li><strong><code>isReady</code></strong><em><code>: ()=&gt;boolean|null</code></em> - function returning current debounce state:<ul>\n<li><code>false</code> - pending</li>\n<li><code>true</code> - called</li>\n<li><code>null</code> - cancelled</li>\n</ul>\n</li>\n<li><strong><code>cancel</code></strong><em><code>: ()=&gt;void</code></em> - cancel the debounce</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=src_1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal<options.max&&incNormal()}),[options]),src_1.useDeepCompareEffect((function(){countNormal<options.max&&incDeep()}),[options]),React.createElement("div",null,React.createElement("p",null,"useEffect: ",countNormal),React.createElement("p",null,"useDeepCompareEffect: ",countDeep))};react_1.storiesOf("Lifecycle/useDeepCompareEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(925)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedeepcompareeffect"><code>useDeepCompareEffect</code></h1>\n<p>A modified useEffect hook that is using deep comparison on its dependencies instead of reference equality.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useDeepCompareEffect} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, {inc: inc}] = useCounter(0);\n  const options = { step: 2 };\n\n  useDeepCompareEffect(() =&gt; {\n    inc(options.step)\n  }, [options]);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;useDeepCompareEffect: {count}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useDeepCompareEffect(effect: () =&gt; void | (() =&gt; void | undefined), deps: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(57),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useDefault({name:"Mathers"},{name:"Marshall"}),user=_a[0],setUser=_a[1];return React.createElement("div",null,React.createElement("div",null,"User: ",user.name),React.createElement("input",{onChange:function onChange(e){return setUser({name:e.target.value})}}),React.createElement("button",{onClick:function onClick(){return setUser(null)}},"set to null"))};react_1.storiesOf("State/useDefault",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(927)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedefault"><code>useDefault</code></h1>\n<p>React state hook that returns the default value when state is null or undefined.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useDefault} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const initialUser = { name: &#39;Marshall&#39; }\n  const defaultUser = { name: &#39;Mathers&#39; }\n  const [user, setUser] = useDefault(defaultUser, initialUser);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;User: {user.name}&lt;/div&gt;\n      &lt;input onChange={e =&gt; setUser({ name: e.target.value })} /&gt;\n      &lt;button onClick={() =&gt; setUser(null)}&gt;set to null&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useDrop({onFiles:function onFiles(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return console.log.apply(console,tslib_1.__spreadArrays(["onFiles"],args))},onUri:function onUri(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return console.log.apply(console,tslib_1.__spreadArrays(["onUri"],args))},onText:function onText(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return console.log.apply(console,tslib_1.__spreadArrays(["onText"],args))}}),style=tslib_1.__assign({width:300,height:200,margin:"50px auto",border:"1px dotted #000",textAlign:"center",lineHeight:"200px"},state.over?{border:"1px dotted green",outline:"3px solid yellow",background:"#f8f8f8"}:{});return React.createElement("div",null,React.createElement("div",{style:style},"Drop anywhere on page"),React.createElement("div",{style:{maxWidth:300,margin:"0 auto"}},React.createElement("ul",{style:{margin:0,padding:"10px 18px"}},React.createElement("li",null,"See logs in ",React.createElement("code",null,"Actions")," tab."),React.createElement("li",null,"Drag in and drop files."),React.createElement("li",null,React.createElement("code",null,"Cmd + V")," paste text here."),React.createElement("li",null,"Drag in images from other tabs."),React.createElement("li",null,"Drag in link from navigation bar."),React.createElement("li",null,"Below is state returned by the hook:")),React.createElement("pre",null,JSON.stringify(state,null,4))))};react_1.storiesOf("UI/useDrop",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(411)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_actions_1=__webpack_require__(258),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useDropArea({onFiles:addon_actions_1.action("onFiles"),onUri:addon_actions_1.action("onUri"),onText:addon_actions_1.action("onText")}),bond=_a[0],state=_a[1],style=tslib_1.__assign({width:300,height:200,margin:"50px auto",border:"1px solid #000",textAlign:"center",lineHeight:"200px"},state.over?{border:"1px solid green",outline:"3px solid yellow",background:"#f8f8f8"}:{});return React.createElement("div",null,React.createElement("div",tslib_1.__assign({},bond,{style:style}),"Drop here"),React.createElement("div",{style:{maxWidth:300,margin:"0 auto"}},React.createElement("ul",{style:{margin:0,padding:"10px 18px"}},React.createElement("li",null,"See logs in ",React.createElement("code",null,"Actions")," tab."),React.createElement("li",null,"Drag in and drop files."),React.createElement("li",null,React.createElement("code",null,"Cmd + V")," paste text here."),React.createElement("li",null,"Drag in images from other tabs."),React.createElement("li",null,"Drag in link from navigation bar."),React.createElement("li",null,"Below is state returned by the hook:")),React.createElement("pre",null,JSON.stringify(state,null,4))))};react_1.storiesOf("UI/useDropArea",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(411)})})).add("Default",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ConsoleStory_1=tslib_1.__importDefault(__webpack_require__(931)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useEffectOnce((function(){return console.log("Running effect once on mount"),function(){console.log("Running clean-up of effect on unmount")}})),React.createElement(ConsoleStory_1.default,null)};react_1.storiesOf("Lifecycle/useEffectOnce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(932)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(2).__importStar(__webpack_require__(0)),ConsoleStory=function ConsoleStory(_a){var _b=_a.message,message=void 0===_b?"Open the developer console to see logs":_b;return React.createElement("p",null,message)};exports.default=ConsoleStory;try{ConsoleStory.displayName="ConsoleStory",ConsoleStory.__docgenInfo={description:"",displayName:"ConsoleStory",props:{message:{defaultValue:{value:"Open the developer console to see logs"},description:"",name:"message",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/util/ConsoleStory.tsx#ConsoleStory"]={docgenInfo:ConsoleStory.__docgenInfo,name:"ConsoleStory",path:"stories/util/ConsoleStory.tsx#ConsoleStory"})}catch(__react_docgen_typescript_loader_error){}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useeffectonce"><code>useEffectOnce</code></h1>\n<p>React lifecycle hook that runs an effect only once.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useEffectOnce} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useEffectOnce(() =&gt; {\n    console.log(&#39;Running effect once on mount&#39;)\n\n    return () =&gt; {\n      console.log(&#39;Running clean-up of effect on unmount&#39;)\n    }\n  });\n\n  return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useEffectOnce(effect: EffectCallback);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),addon_knobs_1=__webpack_require__(103),INITIAL_SIZE={width:null,height:null},Demo=function Demo(_a){var activeForwardRef=_a.activeForwardRef,ref=react_2.useRef(null),_b=react_2.useState(INITIAL_SIZE),size=_b[0],setSize=_b[1];react_2.useEffect((function(){handleClick()}),[activeForwardRef]);var handleClick=function handleClick(){if(activeForwardRef){var _a=ref.current.getBoundingClientRect(),width=_a.width,height=_a.height;setSize({width:width,height:height})}else setSize(INITIAL_SIZE)};return react_2.default.createElement(react_2.default.Fragment,null,react_2.default.createElement("button",{onClick:handleClick,disabled:!activeForwardRef},activeForwardRef?"Update parent component":"forwardRef value is undefined"),react_2.default.createElement("div",null,"Parent component using external ref: (textarea size)"),react_2.default.createElement("pre",null,JSON.stringify(size,null,2)),react_2.default.createElement(Child,{ref:activeForwardRef?ref:void 0}))},Child=react_2.forwardRef((function(_a,ref){var ensuredForwardRef=src_1.useEnsuredForwardedRef(ref),_b=react_2.useState(INITIAL_SIZE),size=_b[0],setSize=_b[1];react_2.useEffect((function(){handleMouseUp()}),[]);var handleMouseUp=function handleMouseUp(){var _a=ensuredForwardRef.current.getBoundingClientRect(),width=_a.width,height=_a.height;setSize({width:width,height:height})};return react_2.default.createElement(react_2.default.Fragment,null,react_2.default.createElement("div",null,"Child forwardRef component using forwardRef: (textarea size)"),react_2.default.createElement("pre",null,JSON.stringify(size,null,2)),react_2.default.createElement("div",null,"You can resize this textarea:"),react_2.default.createElement("textarea",{ref:ensuredForwardRef,onMouseUp:handleMouseUp}))}));react_1.storiesOf("Miscellaneous/useEnsuredForwardedRef",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(934)})})).add("Demo",(function(){var activeForwardRef=addon_knobs_1.boolean("activeForwardRef",!0);return react_2.default.createElement(Demo,{activeForwardRef:activeForwardRef})}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useensuredforwardedref"><code>useEnsuredForwardedRef</code></h1>\n<p>React hook to use a ForwardedRef safely.</p>\n<p>In some scenarios, you may need to use a <em>ref</em> from inside and outside a component. If that&#39;s the case, you should use <code>React.forwardRef</code> to pass it through the child component. This is useful when you only want to forward that <em>ref</em> and expose an internal <code>HTMLelement</code> to a parent component, for example. However, if you need to manipulate that reference inside a child&#39;s lifecycle hook... things get complicated, since you can&#39;t always ensure that the <em>ref</em> is being sent by the parent component and if it is not, you will get <code>undefined</code> instead of a valid <em>ref</em>.</p>\n<p>This hook is useful in this specific case, it will <strong>ensure</strong> that you get a valid reference on the other side.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {ensuredForwardRef} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  return (\n    &lt;Child /&gt;\n  );\n};\n\nconst Child = ensuredForwardRef((props, ref) =&gt; {\n  useEffect(() =&gt; {\n    console.log(ref.current.getBoundingClientRect())\n  }, [])\n\n  return (\n    &lt;div ref={ref} /&gt;\n  );\n});</code></pre>\n<h2 id="alternative-usage">Alternative usage</h2>\n<pre><code class="language-jsx">import {useEnsuredForwardedRef} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  return (\n    &lt;Child /&gt;\n  );\n};\n\nconst Child = React.forwardRef((props, ref) =&gt; {\n  // Here `ref` is undefined\n  const ensuredForwardRef = useEnsuredForwardedRef(ref);\n  // ensuredForwardRef will always be a valid reference.\n\n  useEffect(() =&gt; {\n    console.log(ensuredForwardRef.current.getBoundingClientRect())\n  }, [])\n\n  return (\n    &lt;div ref={ensuredForwardRef} /&gt;\n  );\n});</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">ensuredForwardRef&lt;T, P = {}&gt;(Component: RefForwardingComponent&lt;T, P&gt;): ForwardRefExoticComponent&lt;PropsWithoutRef&lt;P&gt; &amp; RefAttributes&lt;T&gt;&gt;;\n\nuseEnsuredForwardedRef&lt;T&gt;(ref: React.MutableRefObject&lt;T&gt;): React.MutableRefObject&lt;T&gt;;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),ErrorBoundary=function(_super){function ErrorBoundary(props){var _this=_super.call(this,props)||this;return _this.state={hasError:!1},_this}return tslib_1.__extends(ErrorBoundary,_super),ErrorBoundary.getDerivedStateFromError=function(error){return{hasError:!0}},ErrorBoundary.prototype.render=function(){var _this=this;return this.state.hasError?react_2.default.createElement("div",null,react_2.default.createElement("h1",null,"Something went wrong."),react_2.default.createElement("button",{onClick:function onClick(){return _this.setState({hasError:!1})}},"Retry")):this.props.children},ErrorBoundary}(react_2.default.Component),Demo=function Demo(){var dispatchError=src_1.useError();return react_2.default.createElement("button",{onClick:function clickHandler(){dispatchError(new Error("Some error!"))}},"Click me to throw")};react_1.storiesOf("Side effects/useError",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(936)})})).add("Demo",(function(){return react_2.default.createElement(ErrorBoundary,null,react_2.default.createElement(Demo,null))}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useerror"><code>useError</code></h1>\n<p>React side-effect hook that returns an error dispatcher.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useError } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const dispatchError = useError();\n\n  const clickHandler = () =&gt; {\n    dispatchError(new Error(&#39;Some error!&#39;));\n  };\n\n  return &lt;button onClick={clickHandler}&gt;Click me to throw&lt;/button&gt;;\n};\n\n// In parent app\nconst App = () =&gt; (\n  &lt;ErrorBoundary&gt;\n    &lt;Demo /&gt;\n  &lt;/ErrorBoundary&gt;\n);</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const dispatchError = useError();</code></pre>\n<ul>\n<li><code>dispatchError</code> &mdash; Callback of type <code>(err: Error) =&gt; void</code></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),CenterStory_1=__webpack_require__(183),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useCallback=React.useCallback,Demo=function Demo(){var _a=src_1.useList(),list=_a[0],_b=_a[1],push=_b.push,clear=_b.clear,onKeyDown=useCallback((function(_a){var key=_a.key;"r"===key&&clear(),push(key)}),[]);return src_1.useEvent("keydown",onKeyDown),React.createElement(CenterStory_1.CenterStory,null,React.createElement("p",null,"Press some keys on your keyboard, ",React.createElement("code",{style:{color:"tomato"}},"r")," key resets the list"),React.createElement("pre",null,JSON.stringify(list,null,4)))};react_1.storiesOf("Sensors/useEvent",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(938)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useevent"><code>useEvent</code></h1>\n<p>React sensor hook that subscribes a <code>handler</code> to events.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useEvent, useList} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [list, {push, clear}] = useList();\n\n  const onKeyDown = useCallback(({key}) =&gt; {\n    if (key === &#39;r&#39;) clear();\n    push(key);\n  }, []);\n\n  useEvent(&#39;keydown&#39;, onKeyDown);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\n        Press some keys on your keyboard, &lt;code style={{color: &#39;tomato&#39;}}&gt;r&lt;/code&gt; key resets the list\n      &lt;/p&gt;\n      &lt;pre&gt;\n        {JSON.stringify(list, null, 4)}\n      &lt;/pre&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">useEvent(&#39;keydown&#39;, handler)\nuseEvent(&#39;scroll&#39;, handler, window, {capture: true})</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(412)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useFavicon("https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"),React.createElement(NewTabStory_1.default,null,"Favicon should be the Stack Overflow logo")};react_1.storiesOf("Side effects/useFavicon",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(940)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usefavicon"><code>useFavicon</code></h1>\n<p>React side-effect hook sets the favicon of the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useFavicon} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useFavicon(&#39;https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico&#39;);\n\n  return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useFirstMountState_1=__webpack_require__(144),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var isFirstMount=useFirstMountState_1.useFirstMountState(),update=useUpdate_1.default();return React.createElement("div",null,React.createElement("span",null,"This component is just mounted: ",isFirstMount?"YES":"NO"),React.createElement("br",null),React.createElement("button",{onClick:update},"re-render"))};react_1.storiesOf("State/useFirstMountState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(942)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usefirstmountstate"><code>useFirstMountState</code></h1>\n<p>Returns <code>true</code> if component is just mounted (on first render) and <code>false</code> otherwise.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-typescript">import * as React from &#39;react&#39;;\nimport { useFirstMountState } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const isFirstMount = useFirstMountState();\n  const update = useUpdate();\n\n  return (\n    &lt;div&gt;\n      &lt;span&gt;This component is just mounted: {isFirstMount ? &#39;YES&#39; : &#39;NO&#39;}&lt;/span&gt;\n      &lt;br /&gt;\n      &lt;button onClick={update}&gt;re-render&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-typescript">const isFirstMount: boolean = useFirstMountState();</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useToggle(!1),show=_a[0],toggle=_a[1],ref=React.useRef(null),videoRef=React.useRef(null),isFullScreen=src_1.useFullscreen(ref,show,{onClose:function onClose(){return toggle(!1)},video:videoRef}),controls=React.createElement("div",{style:{background:"white",padding:"20px"}},React.createElement("div",null,isFullScreen?"is full screen":"not full screen"),React.createElement("button",{onClick:function onClick(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function onClick(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function onClick(){return toggle(!1)}},"set OFF"));return React.createElement("div",null,React.createElement("div",{ref:ref,style:{backgroundColor:isFullScreen?"black":"grey",width:400,height:300,display:"flex",justifyContent:"center",alignItems:"center"}},React.createElement("video",{ref:videoRef,style:{width:"70%"},src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",autoPlay:!0}),isFullScreen&&controls),React.createElement("br",null),React.createElement("br",null),!isFullScreen&&controls)};react_1.storiesOf("UI/useFullscreen",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(944)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usefullscreen"><code>useFullscreen</code></h1>\n<p>Display an element full-screen, optional fallback for fullscreen video on iOS.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useFullscreen, useToggle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const ref = useRef(null)\n  const [show, toggle] = useToggle(false);\n  const isFullscreen = useFullscreen(ref, show, {onClose: () =&gt; toggle(false)});\n\n  return (\n    &lt;div ref={ref} style={{backgroundColor: &#39;white&#39;}}&gt;\n      &lt;div&gt;{isFullscreen ? &#39;Fullscreen&#39; : &#39;Not fullscreen&#39;}&lt;/div&gt;\n      &lt;button onClick={() =&gt; toggle()}&gt;Toggle&lt;/button&gt;\n      &lt;video src=&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot; autoPlay /&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useFullscreen(ref, show, {onClose})</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useGeolocation();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors/useGeolocation",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(946)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegeolocation"><code>useGeolocation</code></h1>\n<p>React sensor hook that tracks user&#39;s geographic location. This hook accepts <a href="https://developer.mozilla.org/docs/Web/API/PositionOptions">position options</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useGeolocation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useGeolocation();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useGeolocation(options: PositionOptions)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useGetSet(0),get=_a[0],set=_a[1];return React.createElement("button",{onClick:function onClick(){setTimeout((function(){set(get()+1)}),1e3)}},"Clicked: ",get())},DemoWrong=function DemoWrong(){var _a=react_2.useState(0),cnt=_a[0],set=_a[1];return React.createElement("button",{onClick:function onClick(){setTimeout((function(){set(cnt+1)}),1e3)}},"Clicked: ",cnt)};react_1.storiesOf("State/useGetSet",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(948)})})).add("Demo, 1s delay",(function(){return React.createElement(Demo,null)})).add("DemoWrong, 1s delay",(function(){return React.createElement(DemoWrong,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegetset"><code>useGetSet</code></h1>\n<p>React state hook that returns state getter function instead of\nraw state itself, this prevents subtle bugs when state is used\nin nested functions.</p>\n<h2 id="usage">Usage</h2>\n<p>Below example uses <code>useGetSet</code> to increment a number after 1 second\non each click.</p>\n<pre><code class="language-jsx">import {useGetSet} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [get, set] = useGetSet(0);\n  const onClick = () =&gt; {\n    setTimeout(() =&gt; {\n      set(get() + 1)\n    }, 1_000);\n  };\n\n  return (\n    &lt;button onClick={onClick}&gt;Clicked: {get()}&lt;/button&gt;\n  );\n};</code></pre>\n<p>If you would do this example in a naive way using regular <code>useState</code>\nhook, the counter would not increment correctly if you click fast multiple times.</p>\n<pre><code class="language-jsx">const DemoWrong = () =&gt; {\n  const [cnt, set] = useState(0);\n  const onClick = () =&gt; {\n    setTimeout(() =&gt; {\n      set(cnt + 1)\n    }, 1_000);\n  };\n\n  return (\n    &lt;button onClick={onClick}&gt;Clicked: {cnt}&lt;/button&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useGetSetState({cnt:0}),get=_a[0],setState=_a[1];return React.createElement("button",{onClick:function onClick(){setTimeout((function(){setState({cnt:get().cnt+1})}),1e3)}},"Clicked: ",get().cnt)};react_1.storiesOf("State/useGetSetState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(950)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegetsetstate"><code>useGetSetState</code></h1>\n<p>A mix of <code>useGetSet</code> and <code>useGetSetState</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useGetSetState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [get, setState] = useGetSetState({cnt: 0});\n  const onClick = () =&gt; {\n    setTimeout(() =&gt; {\n      setState({cnt: get().cnt + 1})\n    }, 1000);\n  };\n\n  return (\n    &lt;button onClick={onClick}&gt;Clicked: {get().cnt}&lt;/button&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(57),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Clock=function Clock(_a){var useInt=_a.useInt,_b=React.useState(0),count=_b[0],setCount=_b[1];useInt((function(){setCount((function(cnt){return cnt+1}))}),1e3);var m=Math.floor(count/60),s=count%60;m=m<10?"0"+m:String(m),s=s<10?"0"+s:String(s);return React.createElement("div",{style:{padding:"20px 5px",border:"1px solid #fafafa",float:"left",fontFamily:"monospace"}},m+":"+s)},Demo=function Demo(_a){var useInt=_a.useInt,_b=React.useState(!1),showSecondClock=_b[0],setShowSecondClock=_b[1];src_1.useTimeoutFn((function(){setShowSecondClock(!0)}),500);return React.createElement(React.Fragment,null,React.createElement("div",{style:{width:"100%",clear:"both"}},React.createElement("h2",{style:{fontFamily:"sans",fontSize:"20px",padding:"0",lineHeight:"1.5em"}},useInt.name),React.createElement(Clock,{useInt:useInt}),showSecondClock?React.createElement(Clock,{useInt:useInt}):null))};react_1.storiesOf("Animation/useHarmonicIntervalFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(952)})})).add("Demo",(function(){return React.createElement(React.Fragment,null,React.createElement(Demo,{useInt:src_1.useInterval}),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement(Demo,{useInt:src_1.useHarmonicIntervalFn}))}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useharmonicintervalfn"><code>useHarmonicIntervalFn</code></h1>\n<p>Same as <a href="./useInterval.md"><code>useInterval</code></a> hook, but triggers all effects with the same delay\nat the same time.</p>\n<p>For example, this allows you to create ticking clocks on the page which re-render second counter\nall at the same time.</p>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useHarmonicIntervalFn(fn, delay?: number)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useHash(),hash=_a[0],setHash=_a[1];return src_1.useMount((function(){setHash("#/path/to/page?userId=123")})),React.createElement("div",null,React.createElement("div",null,"window.location.href:"),React.createElement("div",null,React.createElement("pre",null,window.location.href)),React.createElement("div",null,"Edit hash: "),React.createElement("div",null,React.createElement("input",{style:{width:"100%"},value:hash,onChange:function onChange(e){return setHash(e.target.value)}})))};react_1.storiesOf("Sensors/useHash",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(954)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usehash"><code>useHash</code></h1>\n<p>React sensor hook that tracks browser&#39;s location hash.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useHash} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [hash, setHash] = useHash();\n\n  useMount(() =&gt; {\n    setHash(&#39;#/path/to/page?userId=123&#39;);\n  });\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;window.location.href:&lt;/div&gt;\n      &lt;div&gt;\n        &lt;pre&gt;{window.location.href}&lt;/pre&gt;\n      &lt;/div&gt;\n      &lt;div&gt;Edit hash: &lt;/div&gt;\n      &lt;div&gt;\n        &lt;input style={{ width: &#39;100%&#39; }} value={hash} onChange={e =&gt; setHash(e.target.value)} /&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="api">API</h2>\n<p><code>const [hash, setHash] = useHash()</code></p>\n<p>Get latest url hash with <code>hash</code> and set url hash with <code>setHash</code>.</p>\n<ul>\n<li><code>hash: string</code>: get current url hash. listen to <code>hashchange</code> event.</li>\n<li><code>setHash: (newHash: string) =&gt; void</code>: change url hash. Invoke this method will trigger <code>hashchange</code> event.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useHover((function element(hasHovered){return React.createElement("div",null,"Hover me! ",hasHovered&&"Thanks!")})),hoverable=_a[0],hovered=_a[1];return React.createElement("div",null,hoverable,React.createElement("div",null,hovered?"HOVERED":""))};react_1.storiesOf("Sensors/useHover",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(413)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var ref=react_2.useRef(null),isHovered=src_1.useHoverDirty(ref);return React.createElement("div",{ref:ref},isHovered?"😁":"☹️")};react_1.storiesOf("Sensors/useHoverDirty",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(413)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(3e3),idleDelay=_a[0],setIdleDelay=_a[1],isIdle=src_1.useIdle(idleDelay);return React.createElement("div",null,"Idle delay ms:"," ",React.createElement("input",{type:"number",value:idleDelay,onChange:function onChange(_a){var target=_a.target;return setIdleDelay(+target.value)}}),React.createElement("div",null,"User is idle: ",isIdle?"Yes":"No"))};react_1.storiesOf("Sensors/useIdle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(958)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useidle"><code>useIdle</code></h1>\n<p>React sensor hook that tracks if user on the page is idle.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useIdle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const isIdle = useIdle(3e3);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;User is idle: {isIdle ? &#39;Yes 😴&#39; : &#39;Nope&#39;}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useIdle(ms, initialState);</code></pre>\n<ul>\n<li><code>ms</code> &mdash; time in milliseconds after which to consider use idle, defaults to <code>60e3</code> &mdash; one minute.</li>\n<li><code>initialState</code> &mdash; whether to consider user initially idle, defaults to false.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Spacer=function Spacer(){return React.createElement("div",{style:{width:"200px",height:"300px",backgroundColor:"whitesmoke"}})},Demo=function Demo(){var intersectionRef=React.useRef(null),intersection=src_1.useIntersection(intersectionRef,{root:null,rootMargin:"0px",threshold:1});return React.createElement("div",{style:{width:"400px",height:"400px",backgroundColor:"whitesmoke",overflow:"scroll"}},"Scroll me",React.createElement(Spacer,null),React.createElement("div",{ref:intersectionRef,style:{width:"100px",height:"100px",padding:"20px",backgroundColor:"palegreen"}},intersection&&intersection.intersectionRatio<1?"Obscured":"Fully in view"),React.createElement(Spacer,null))};react_1.storiesOf("Sensors/useIntersection",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(960)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useintersection"><code>useIntersection</code></h1>\n<p>React sensor hook that tracks the changes in the intersection of a target element with an ancestor element or with a top-level document&#39;s viewport. Uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry">IntersectionObserverEntry</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport { useIntersection } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const intersectionRef = React.useRef(null);\n  const intersection = useIntersection(intersectionRef, {\n    root: null,\n    rootMargin: &#39;0px&#39;,\n    threshold: 1\n  });\n\n  return (\n    &lt;div ref={intersectionRef}&gt;\n      {intersection &amp;&amp; intersection.intersectionRatio &lt; 1\n        ? &#39;Obscured&#39;\n        : &#39;Fully in view&#39;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useIntersection(\n  ref: RefObject&lt;HTMLElement&gt;,\n  options: IntersectionObserverInit,\n): IntersectionObserverEntry | null;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(225),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(1e3),delay=_b[0],setDelay=_b[1],_c=src_1.useBoolean(!0),isRunning=_c[0],toggleIsRunning=_c[1];return src_1.useInterval((function(){setCount(count+1)}),isRunning?delay:null),React.createElement("div",null,React.createElement("div",null,"delay: ",React.createElement("input",{value:delay,onChange:function onChange(event){return setDelay(Number(event.target.value))}})),React.createElement("h1",null,"count: ",count),React.createElement("div",null,React.createElement("button",{onClick:toggleIsRunning},isRunning?"stop":"start")))};react_1.storiesOf("Animation/useInterval",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(962)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useinterval"><code>useInterval</code></h1>\n<p>A declarative interval hook based on <a href="https://overreacted.io/making-setinterval-declarative-with-react-hooks">Dan Abramov&#39;s article on overreacted.io</a>. The interval can be paused by setting the delay to <code>null</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport {useInterval} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, setCount] = React.useState(0);\n  const [delay, setDelay] = React.useState(1000);\n  const [isRunning, toggleIsRunning] = useBoolean(true);\n\n  useInterval(\n    () =&gt; {\n      setCount(count + 1);\n    },\n    isRunning ? delay : null\n  );\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;\n        delay: &lt;input value={delay} onChange={event =&gt; setDelay(Number(event.target.value))} /&gt;\n      &lt;/div&gt;\n      &lt;h1&gt;count: {count}&lt;/h1&gt;\n      &lt;div&gt;\n        &lt;button onClick={toggleIsRunning}&gt;{isRunning ? &#39;stop&#39; : &#39;start&#39;}&lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useInterval(callback, delay?: number)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6));react_1.storiesOf("Lifecycle/useIsomorphicLayoutEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(964)})}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useisomorphiclayouteffect"><code>useIsomorphicLayoutEffect</code></h1>\n<p><code>useLayoutEffect</code> that does not show warning when server-side rendering, see <a href="https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a">Alex Reardon&#39;s article</a> for more info.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useIsomorphicLayoutEffect} from &#39;react-use&#39;;\n\nconst Demo = ({value}) =&gt; {\n  useIsomorphicLayoutEffect(() =&gt; {\n    window.console.log(value)\n  }, [value]);\n\n  return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useIsomorphicLayoutEffect(effect: EffectCallback, deps?: ReadonlyArray&lt;any&gt; | undefined);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),CenterStory_1=__webpack_require__(183),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1];return src_1.useKey("]",(function increment(){return setCount((function(currentCount){return++currentCount}))})),src_1.useKey("[",(function decrement(){return setCount((function(currentCount){return--currentCount}))})),src_1.useKey("r",(function reset(){return setCount((function(){return 0}))})),React.createElement(CenterStory_1.CenterStory,null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"["),", ",React.createElement("code",null,"]"),", and ",React.createElement("code",null,"r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))},CounterDemo=function CounterDemo(){var _a=React.useState(0),count=_a[0],setCount=_a[1];return src_1.useKey("ArrowUp",(function increment(){return setCount((function(currentCount){return++currentCount}))})),React.createElement("div",null,"Press arrow up: ",count)};react_1.storiesOf("Sensors/useKey",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(966)})})).add("Demo",(function(){return React.createElement(Demo,null)})).add("Simple counter",(function(){return React.createElement(CounterDemo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekey"><code>useKey</code></h1>\n<p>React UI sensor hook that executes a <code>handler</code> when a keyboard key is used.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useKey} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, set] = useState(0);\n  const increment = () =&gt; set(count =&gt; ++count);\n  useKey(&#39;ArrowUp&#39;, increment);\n\n  return (\n    &lt;div&gt;\n      Press arrow up: {count}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p>Or as render-prop:</p>\n<pre><code class="language-jsx">import UseKey from &#39;react-use/lib/component/UseKey&#39;;\n\n&lt;UseKey filter=&#39;a&#39; fn={() =&gt; alert(&#39;&quot;a&quot; key pressed!&#39;)} /&gt;</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKey(filter, handler, options?, deps?)</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">useKey(&#39;a&#39;, () =&gt; alert(&#39;&quot;a&quot; pressed&#39;));\n\nconst predicate = (event) =&gt; event.key === &#39;a&#39;\nuseKey(predicate, handler, {event: &#39;keyup&#39;});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(67),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),CenterStory_1=__webpack_require__(183),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),keys=["1","2","3","4","5","6","7","8","9","0"],Demo=function Demo(){for(var states=[],_i=0,keys_1=keys;_i<keys_1.length;_i++){var key=keys_1[_i];states.push(src_1.useKeyPress(key)[0])}return React.createElement(CenterStory_1.CenterStory,null,React.createElement("div",{style:{textAlign:"center"}},"Try pressing numbers",React.createElement("br",null),states.reduce((function(s,pressed,index){return s+(pressed?(s?" + ":"")+keys[index]:"")}),"")))};react_1.storiesOf("Sensors/useKeyPress",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(968)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeypress"><code>useKeyPress</code></h1>\n<p>React UI sensor hook that detects when the user is pressing a specific\nkey on their keyboard.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useKeyPress} from &#39;react-use&#39;;\n\nconst keys = [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;, &#39;7&#39;, &#39;8&#39;, &#39;9&#39;, &#39;0&#39;];\n\nconst Demo = () =&gt; {\n  const states = [];\n  for (const key of keys) states.push(useKeyPress(key)[0]);\n\n  return (\n    &lt;div style={{textAlign: &#39;center&#39;}}&gt;\n      Try pressing numbers\n      &lt;br /&gt;\n      {states.reduce((s, pressed, index) =&gt; s + (pressed ? (s ? &#39; + &#39; : &#39;&#39;) + keys[index] : &#39;&#39;), &#39;&#39;)}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const isPressed = useKeyPress(&#39;a&#39;);\n\nconst predicate = (event) =&gt; event.key === &#39;a&#39;;\nconst isPressed = useKeyPress(predicate);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1];return src_1.useKeyPressEvent("]",(function increment(){console.log("INCREMENT"),setCount((function(currentCount){return++currentCount}))})),src_1.useKeyPressEvent("[",(function decrement(){console.log("DECREMENT"),setCount((function(currentCount){return--currentCount}))})),src_1.useKeyPressEvent("r",(function reset(){return setCount((function(){return 0}))})),React.createElement("div",null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"["),", ",React.createElement("code",null,"]"),", and ",React.createElement("code",null,"r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))},DemoKeyboardJs=function DemoKeyboardJs(){var _a=React.useState(0),count=_a[0],setCount=_a[1],increment=function increment(){console.log("INCREMENT"),setCount((function(currentCount){return++currentCount}))},decrement=function decrement(){console.log("DECREMENT"),setCount((function(currentCount){return--currentCount}))};return src_1.useKeyPressEvent("q + ]",increment,increment,src_1.useKeyboardJs),src_1.useKeyPressEvent("q + [",decrement,decrement,src_1.useKeyboardJs),src_1.useKeyPressEvent("q + r",(function reset(){return setCount((function(){return 0}))}),null,src_1.useKeyboardJs),React.createElement("div",null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"q + ["),", ",React.createElement("code",null,"q + ]"),", and ",React.createElement("code",null,"q + r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))};react_1.storiesOf("Sensors/useKeyPressEvent",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(970)})})).add("Demo",(function(){return React.createElement(Demo,null)})).add("KeyboardJs",(function(){return React.createElement(DemoKeyboardJs,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeypressevent"><code>useKeyPressEvent</code></h1>\n<p>This hook fires <code>keydown</code> and <code>keyup</code> callbacks, similar to how <a href="./useKey.md"><code>useKey</code></a>\nhook does, but it only triggers each callback once per press cycle. For example,\nif you press and hold a key, it will fire <code>keydown</code> callback only once.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from React;\nimport {useKeyPressEvent} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, setCount] = useState(0);\n\n  const increment = () =&gt; setCount(count =&gt; ++count);\n  const decrement = () =&gt; setCount(count =&gt; --count);\n  const reset = () =&gt; setCount(count =&gt; 0);\n\n  useKeyPressEvent(&#39;]&#39;, increment, increment);\n  useKeyPressEvent(&#39;[&#39;, decrement, decrement);\n  useKeyPressEvent(&#39;r&#39;, reset);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\n        Try pressing &lt;code&gt;[&lt;/code&gt;, &lt;code&gt;]&lt;/code&gt;, and &lt;code&gt;r&lt;/code&gt; to\n        see the count incremented and decremented.&lt;/p&gt;\n      &lt;p&gt;Count: {count}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown);\nuseKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown, keyup);\nuseKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown, keyup, useKeyPress);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useKeyboardJs_1=tslib_1.__importDefault(__webpack_require__(972)),CenterStory_1=__webpack_require__(183),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(_a){var combo=_a.combo,pressed=useKeyboardJs_1.default(combo)[0];return React.createElement(CenterStory_1.CenterStory,null,React.createElement("div",{style:{textAlign:"center"}},"Press"," ",React.createElement("code",{style:{color:"red",background:"#f6f6f6",padding:"3px 6px",borderRadius:"3px"}},combo)," ","combo",React.createElement("br",null),React.createElement("br",null),React.createElement("div",{style:{fontSize:"4em"}},pressed?"💋":"")))};react_1.storiesOf("Sensors/useKeyboardJs",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(976)})})).add("Demo",(function(){var combo=addon_knobs_1.text("Combo","i + l + u");return React.createElement(Demo,{combo:combo})}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),__webpack_require__(973),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(0),useMount_1=tslib_1.__importDefault(__webpack_require__(257));exports.default=function useKeyboardJs(combination){var _a=react_1.useState([!1,null]),state=_a[0],set=_a[1],_b=react_1.useState(null),keyboardJs=_b[0],setKeyboardJs=_b[1];return useMount_1.default((function(){Promise.resolve().then((function(){return tslib_1.__importStar(__webpack_require__(975))})).then((function(k){return setKeyboardJs(k.default||k)}))})),react_1.useEffect((function(){if(keyboardJs){var down=function down(event){return set([!0,event])},up=function up(event){return set([!1,event])};return keyboardJs.bind(combination,down,up,!0),function(){keyboardJs.unbind(combination,down,up)}}}),[combination,keyboardJs]),state}},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeyboardjs"><code>useKeyboardJs</code></h1>\n<p>React UI sensor hook that detects complex key combos like detecting when\nmultiple keys are held down at the same time or requiring them to be held down in a specified order.</p>\n<p>Via <a href="https://github.com/RobertWHurst/KeyboardJS">KeyboardJS key combos</a>.\nCheck its documentation for further details on how to make combo strings.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import useKeyboardJs from &#39;react-use/lib/useKeyboardJs&#39;;\n\nconst Demo = () =&gt; {\n  const [isPressed] = useKeyboardJs(&#39;a + b&#39;);\n\n  return (\n    &lt;div&gt;\n      [a + b] pressed: {isPressed ? &#39;Yes&#39; : &#39;No&#39;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p>Note: Because of dependency on <code>keyboardjs</code> you have to import this hook directly like shown above.</p>\n<h2 id="requirements">Requirements</h2>\n<p>Install <a href="https://github.com/RobertWHurst/KeyboardJS"><code>keyboardjs</code></a> peer dependency:</p>\n<pre><code class="language-bash">npm add keyboardjs\n# or\nyarn add keyboardjs</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKeyboardJs(combination: string | string[]): [isPressed: boolean, event?: KeyboardEvent]</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1],latestCount=src_1.useLatest(count);return React.createElement("div",null,React.createElement("p",null,"You clicked ",count," times"),React.createElement("button",{onClick:function onClick(){return setCount(count+1)}},"Click me"),React.createElement("button",{onClick:function handleAlertClick(){setTimeout((function(){alert("Latest count value: "+latestCount.current)}),3e3)}},"Show alert in ",3,"s"))};react_1.storiesOf("State/useLatest",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(978)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselatest"><code>useLatest</code></h1>\n<p>React state hook that returns the latest state as described in the <a href="https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function">React hooks FAQ</a>.</p>\n<p>This is mostly useful to get access to the latest value of some props or state inside an asynchronous callback, instead of that value at the time the callback was created from.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useLatest } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, setCount] = React.useState(0);\n  const latestCount = useLatest(count);\n\n  function handleAlertClick() {\n    setTimeout(() =&gt; {\n      alert(`Latest count value: ${latestCount.current}`);\n    }, 3000);\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;You clicked {count} times&lt;/p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;\n      &lt;button onClick={handleAlertClick}&gt;Show alert&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const latestState = useLatest = &lt;T&gt;(state: T): MutableRefObject&lt;T&gt;;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useLifecycles((function(){return console.log("MOUNTED")}),(function(){return console.log("UNMOUNTED")})),null};react_1.storiesOf("Lifecycle/useLifecycles",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(980)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselifecycles"><code>useLifecycles</code></h1>\n<p>React lifecycle hook that call <code>mount</code> and <code>unmount</code> callbacks, when\ncomponent is mounted and un-mounted, respectively.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLifecycles} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useLifecycles(() =&gt; console.log(&#39;MOUNTED&#39;), () =&gt; console.log(&#39;UNMOUNTED&#39;));\n  return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLifecycles(mount, unmount);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(256),__webpack_require__(53),__webpack_require__(90),__webpack_require__(54),__webpack_require__(51),__webpack_require__(13),__webpack_require__(97),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useList([1,2,3,4,5]),list=_a[0],_b=_a[1],set=_b.set,push=_b.push,updateAt=_b.updateAt,insertAt=_b.insertAt,update=_b.update,updateFirst=_b.updateFirst,sort=_b.sort,filter=_b.filter,removeAt=_b.removeAt,clear=_b.clear,reset=_b.reset;return React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return set([1,2,3])}},"Set to [1, 2, 3]"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return push(Date.now())}},"Push timestamp"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return insertAt(1,Date.now())}},"Insert new value at index 1"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return updateAt(1,Date.now())}},"Update value at index 1"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return removeAt(1)}},"Remove element at index 1"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return filter((function(item){return item%2==0}))}},"Filter even values"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return update((function(item){return item%2==0}),Date.now())}},"Update all even values with timestamp"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return updateFirst((function(item){return item%2==0}),Date.now())}},"Update first even value with timestamp"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return sort((function(a,b){return a-b}))}},"Sort ascending"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return sort((function(a,b){return b-a}))}},"Sort descending"),React.createElement("br",null),React.createElement("button",{onClick:clear},"Clear"),React.createElement("br",null),React.createElement("button",{onClick:reset},"Reset"),React.createElement("br",null),React.createElement("pre",null,JSON.stringify(list,null,2)))},upsertPredicate=function upsertPredicate(a,b){return a.id===b.id},upsertInitialItems=[{id:"1",text:"Sample"},{id:"2",text:"Example"}],UpsertDemo=function UpsertDemo(){var _a=src_1.useList(upsertInitialItems),list=_a[0],_b=_a[1],upsert=_b.upsert,reset=_b.reset,removeAt=_b.removeAt;return React.createElement("div",{style:{display:"inline-flex",flexDirection:"column"}},list.map((function(item,index){return React.createElement("div",{key:item.id},React.createElement("input",{value:item.text,onChange:function onChange(e){return upsert(upsertPredicate,tslib_1.__assign(tslib_1.__assign({},item),{text:e.target.value}))}}),React.createElement("button",{onClick:function onClick(){return removeAt(index)}},"Remove"))})),React.createElement("button",{onClick:function onClick(){return upsert(upsertPredicate,{id:(list.length+1).toString(),text:""})}},"Add item"),React.createElement("button",{onClick:function onClick(){return reset()}},"Reset"))};react_1.storiesOf("State/useList",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(982)})})).add("Demo",(function(){return React.createElement(Demo,null)})).add("Upsert Demo",(function(){return React.createElement(UpsertDemo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselist"><code>useList</code></h1>\n<p>Tracks an array and provides methods to modify it.<br>To cause component re-render you have to use these methods instead of direct interaction with array - it won&#39;t cause re-render.</p>\n<p>We can ensure that actions object and actions itself will not mutate or change between renders, so there is no need to add it to useEffect dependencies and safe to pass them down to children.  </p>\n<p><strong>Note:</strong> <code>remove</code> action is deprecated and actually is a copy of <code>removeAt</code> action. Within closest updates it will gain different functionality.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useList} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [list, { set, push, updateAt, insertAt, update, updateFirst, upsert, sort, filter, removeAt, clear, reset }] = useList([1, 2, 3, 4, 5]);\n\n  return (\n    &lt;div&gt;\n      &lt;button onClick={() =&gt; set([1, 2, 3])}&gt;Set to [1, 2, 3]&lt;/button&gt;\n      &lt;button onClick={() =&gt; push(Date.now())}&gt;Push timestamp&lt;/button&gt;\n      &lt;button onClick={() =&gt; updateAt(1, Date.now())}&gt;Update value at index 1&lt;/button&gt;\n      &lt;button onClick={() =&gt; remove(1)}&gt;Remove element at index 1&lt;/button&gt;\n      &lt;button onClick={() =&gt; filter(item =&gt; item % 2 === 0)}&gt;Filter even values&lt;/button&gt;\n      &lt;button onClick={() =&gt; sort((a, b) =&gt; a - b)}&gt;Sort ascending&lt;/button&gt;\n      &lt;button onClick={() =&gt; sort((a, b) =&gt; b - a)}&gt;Sort descending&lt;/button&gt;\n      &lt;button onClick={clear}&gt;Clear&lt;/button&gt;\n      &lt;button onClick={reset}&gt;Reset&lt;/button&gt;\n      &lt;pre&gt;{JSON.stringify(list, null, 2)}&lt;/pre&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">import {useList} from &quot;react-use&quot;;\n\nconst [list, { \n    set, \n    push, \n    updateAt, \n    insertAt, \n    update, \n    updateFirst,\n    upsert, \n    sort, \n    filter, \n    removeAt, \n    remove, \n    clear, \n    reset \n}] = useList(array: any[] | ()=&gt; any[]);</code></pre>\n<ul>\n<li><strong><code>list</code></strong><em><code>: T{}</code></em> &mdash; current list;</li>\n<li><strong><code>set</code></strong><em><code>: (list: T[]) =&gt; void;</code></em> &mdash; Set new list instead old one;</li>\n<li><strong><code>push</code></strong><em><code>: (...items: T[]) =&gt; void;</code></em> &mdash; Add item(s) at the end of list;</li>\n<li><strong><code>updateAt</code></strong><em><code>: (index: number, item: T) =&gt; void;</code></em> &mdash; Replace item at given position. If item at given position not exists it will be set;</li>\n<li><strong><code>insertAt</code></strong><em><code>: (index: number, item: T) =&gt; void;</code></em> &mdash; Insert item at given position, all items to the right will be shifted;</li>\n<li><strong><code>update</code></strong><em><code>: (predicate: (a: T, b: T) =&gt; boolean, newItem: T) =&gt; void;</code></em> &mdash; Replace all items that matches predicate with given one;</li>\n<li><strong><code>updateFirst</code></strong><em><code>: (predicate: (a: T, b: T) =&gt; boolean, newItem: T) =&gt; void;</code></em> &mdash; Replace first item matching predicate with given one;</li>\n<li><strong><code>upsert</code></strong><em><code>: (predicate: (a: T, b: T) =&gt; boolean, newItem: T) =&gt; void;</code></em> &mdash; Like <code>updateFirst</code> but in case of predicate miss - pushes item to the list;</li>\n<li><strong><code>sort</code></strong><em><code>: (compareFn?: (a: T, b: T) =&gt; number) =&gt; void;</code></em> &mdash; Sort list with given sorting function;</li>\n<li><strong><code>filter</code></strong><em><code>: (callbackFn: (value: T, index?: number, array?: T[]) =&gt; boolean, thisArg?: any) =&gt; void;</code></em> &mdash; Same as native Array&#39;s method;</li>\n<li><strong><code>removeAt</code></strong><em><code>: (index: number) =&gt; void;</code></em> &mdash; Removes item at given position. All items to the right from removed will be shifted;</li>\n<li><strong><code>remove</code></strong><em><code>: (index: number) =&gt; void;</code></em> &mdash; <em><strong>DEPRECATED:</strong></em> Use removeAt method instead;</li>\n<li><strong><code>clear</code></strong><em><code>: () =&gt; void;</code></em> &mdash; Make the list empty;</li>\n<li><strong><code>reset</code></strong><em><code>: () =&gt; void;</code></em> &mdash; Reset list to initial value;</li>\n</ul>\n<h2 id="related-hooks">Related hooks</h2>\n<ul>\n<li><a href="./useUpsert.md">useUpsert</a></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useLocalStorage("hello-key","foo"),value=_a[0],setValue=_a[1],_b=src_1.useLocalStorage("removeable-key"),removableValue=_b[0],setRemovableValue=_b[1],remove=_b[2];return React.createElement("div",null,React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function onClick(){return setValue("bar")}},"bar"),React.createElement("button",{onClick:function onClick(){return setValue("baz")}},"baz"),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Removable Value: ",removableValue),React.createElement("button",{onClick:function onClick(){return setRemovableValue("foo")}},"foo"),React.createElement("button",{onClick:function onClick(){return setRemovableValue("bar")}},"bar"),React.createElement("button",{onClick:function onClick(){return remove()}},"Remove"))};react_1.storiesOf("Side effects/useLocalStorage",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(984)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselocalstorage"><code>useLocalStorage</code></h1>\n<p>React side-effect hook that manages a single <code>localStorage</code> key.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useLocalStorage } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [value, setValue, remove] = useLocalStorage(&#39;my-key&#39;, &#39;foo&#39;);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;Value: {value}&lt;/div&gt;\n      &lt;button onClick={() =&gt; setValue(&#39;bar&#39;)}&gt;bar&lt;/button&gt;\n      &lt;button onClick={() =&gt; setValue(&#39;baz&#39;)}&gt;baz&lt;/button&gt;\n      &lt;button onClick={() =&gt; remove()}&gt;Remove&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLocalStorage(key);\nuseLocalStorage(key, initialValue);\nuseLocalStorage(key, initialValue, { raw: true });\nuseLocalStorage(key, initialValue, {\n  raw: false,\n  serializer: (value: T) =&gt; string,\n  deserializer: (value: string) =&gt; T,\n});</code></pre>\n<ul>\n<li><code>key</code> &mdash; <code>localStorage</code> key to manage.</li>\n<li><code>initialValue</code> &mdash; initial value to set, if value in <code>localStorage</code> is empty.</li>\n<li><code>raw</code> &mdash; boolean, if set to <code>true</code>, hook will not attempt to JSON serialize stored values.</li>\n<li><code>serializer</code> &mdash; custom serializer (defaults to <code>JSON.stringify</code>)</li>\n<li><code>deserializer</code> &mdash; custom deserializer (defaults to <code>JSON.parse</code>)</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),go=function go(page){return window.history.pushState({},"",page)},Demo=function Demo(){var state=src_1.useLocation();return React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return go("page-1")}},"Page 1"),React.createElement("button",{onClick:function onClick(){return go("page-2")}},"Page 2"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Sensors/useLocation",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(986)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselocation"><code>useLocation</code></h1>\n<p>React sensor hook that tracks brower&#39;s location.</p>\n<p>For Internet Explorer you need to <a href="https://github.com/streamich/react-use/issues/73">install a polyfill</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLocation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useLocation();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),react_frame_component_1=tslib_1.__importDefault(__webpack_require__(988)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useToggle(!1),locked=_a[0],toggleLocked=_a[1];return src_1.useLockBodyScroll(locked),React.createElement("div",{style:{height:"200vh"}},React.createElement("button",{onClick:function onClick(){return toggleLocked()},style:{position:"fixed",left:0}},locked?"Unlock":"Lock"))},AnotherComponent=function AnotherComponent(){var _a=src_1.useToggle(!1),locked=_a[0],toggleLocked=_a[1];return src_1.useLockBodyScroll(locked),React.createElement("button",{onClick:function onClick(){return toggleLocked()},style:{position:"fixed",left:0,top:40}},locked?"Unlock":"Lock")},IframeComponent=function IframeComponent(){var _a=src_1.useToggle(!1),mainLocked=_a[0],toggleMainLocked=_a[1],_b=src_1.useToggle(!1),iframeLocked=_b[0],toggleIframeLocked=_b[1],iframeElementRef=react_2.useRef(null);return src_1.useLockBodyScroll(mainLocked),src_1.useLockBodyScroll(iframeLocked,iframeElementRef),React.createElement("div",{style:{height:"200vh"}},React.createElement(react_frame_component_1.default,{style:{height:"50vh",width:"50vw"}},React.createElement("div",{style:{height:"200vh"},ref:iframeElementRef},React.createElement("button",{onClick:function onClick(){return toggleMainLocked()},style:{position:"fixed",left:0,top:0}},mainLocked?"Unlock":"Lock"," main window scroll"),React.createElement("button",{onClick:function onClick(){return toggleIframeLocked()},style:{position:"fixed",left:0,top:64}},iframeLocked?"Unlock":"Lock"," iframe window scroll"))))};react_1.storiesOf("Side effects/useLockBodyScroll",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(993)})})).add("Demo",(function(){return React.createElement(Demo,null)})).add("Two hooks on page",(function(){return React.createElement(React.Fragment,null,React.createElement(AnotherComponent,null),React.createElement(Demo,null),React.createElement(IframeComponent,null))})).add("Iframe",(function(){return React.createElement(IframeComponent,null)}))}).call(this,__webpack_require__(3)(module))},,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselockbodyscroll"><code>useLockBodyScroll</code></h1>\n<p>React side-effect hook that locks scrolling on the body element. Useful for modal and other overlay components.</p>\n<p>Accepts ref object pointing to any HTML element as second parameter. Parent body element will be found and it&#39;s scroll will be locked/unlocked. It is needed to proper iFrame handling.<br>By default it uses body element of script&#39;s parent window. </p>\n<blockquote>\n<p>Note: To improve performance you can pass body&#39;s or iframe&#39;s ref object, thus no parent lookup will be performed </p>\n</blockquote>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLockBodyScroll, useToggle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [locked, toggleLocked] = useToggle(false)\n\n  useLockBodyScroll(locked);\n\n  return (\n    &lt;div&gt;\n      &lt;button onClick={() =&gt; toggleLocked()}&gt;\n        {locked ? &#39;Unlock&#39; : &#39;Lock&#39;}\n      &lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useLockBodyScroll(locked: boolean = true, elementRef?: RefObject&lt;HTMLElement&gt;);</code></pre>\n<ul>\n<li><code>locked</code> &mdash; Hook will lock scrolling on the body element if <code>true</code>, defaults to <code>true</code></li>\n<li><code>elementRef</code> &mdash; The element ref object to find the body element. Can be either a ref to body or iframe element.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(995),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(props){var _a=src_1.useCounter(0),state=_a[0],inc=_a[1].inc;return src_1.useLogger("Demo",props,state),React.createElement(React.Fragment,null,React.createElement("p",{style:{fontWeight:props.bold?"bold":"normal"}},props.title),React.createElement("button",{onClick:function onClick(){return inc()}},"Update state (",state,")"))};react_1.storiesOf("Lifecycle/useLogger",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(998)})})).add("Demo",(function(){var props={title:addon_knobs_1.text("title","Open the developer console to see logs"),bold:addon_knobs_1.boolean("bold",!1)};return React.createElement(Demo,tslib_1.__assign({},props))}))}).call(this,__webpack_require__(3)(module))},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselogger"><code>useLogger</code></h1>\n<p>React lifecycle hook that console logs parameters as component transitions through lifecycles.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLogger} from &#39;react-use&#39;;\n\nconst Demo = (props) =&gt; {\n  useLogger(&#39;Demo&#39;, props);\n  return null;\n};</code></pre>\n<h2 id="example-output">Example Output</h2>\n<pre><code>Demo mounted {}\nDemo updated {}\nDemo unmounted</code></pre><h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLogger(componentName: string, ...rest);</code></pre>\n<ul>\n<li><code>componentName</code> &mdash; component name.</li>\n<li><code>...rest</code> &mdash; parameters to log.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var longPressEvent=src_1.useLongPress((function onLongPress(){console.log("calls callback after long pressing 300ms")}),{isPreventDefault:!0,delay:300});return React.createElement("button",tslib_1.__assign({},longPressEvent),"useLongPress")};react_1.storiesOf("Sensors/useLongPress",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1e3)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselongpress"><code>useLongPress</code></h1>\n<p>React sensor hook that fires a callback after long pressing.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useLongPress } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const onLongPress = () =&gt; {\n    console.log(&#39;calls callback after long pressing 300ms&#39;);\n  };\n\n  const defaultOptions = {\n    isPreventDefault: true,\n    delay: 300,\n  };\n  const longPressEvent = useLongPress(onLongPress, defaultOptions);\n\n  return &lt;button {...longPressEvent}&gt;useLongPress&lt;/button&gt;;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const {\n  onMouseDown,\n  onTouchStart,\n  onMouseUp,\n  onMouseLeave,\n  onTouchEnd\n} = useLongPress(\n  callback: (e: TouchEvent | MouseEvent) =&gt; void,\n  options?: {\n    isPreventDefault?: true,\n    delay?: 300\n  }\n)</code></pre>\n<ul>\n<li><code>callback</code> &mdash; callback function.</li>\n<li><code>options?</code> &mdash; optional parameter.<ul>\n<li><code>isPreventDefault?</code> &mdash; whether to call <code>event.preventDefault()</code> of <code>touchend</code> event, for preventing ghost click on mobile devices in some cases, defaults to <code>true</code>.</li>\n<li><code>delay?</code> &mdash; delay in milliseconds after which to calls provided callback, defaults to <code>300</code>.</li>\n</ul>\n</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),__webpack_require__(1002),__webpack_require__(1003),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useMap({hello:"there"}),map=_a[0],_b=_a[1],set=_b.set,remove=_b.remove,reset=_b.reset;return React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return set(String(Date.now()),(new Date).toJSON())}},"Add"),React.createElement("button",{onClick:function onClick(){return reset()}},"Reset"),React.createElement("button",{onClick:function onClick(){return remove("hello")},disabled:!map.hello},"Remove 'hello'"),React.createElement("pre",null,JSON.stringify(map,null,2)))};react_1.storiesOf("State/useMap",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1004)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemap"><code>useMap</code></h1>\n<p>React state hook that tracks a value of an object.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMap} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [map, {set, setAll, remove, reset}] = useMap({\n    hello: &#39;there&#39;,\n  });\n\n  return (\n    &lt;div&gt;\n      &lt;button onClick={() =&gt; set(String(Date.now()), new Date().toJSON())}&gt;\n        Add\n      &lt;/button&gt;\n      &lt;button onClick={() =&gt; reset()}&gt;\n        Reset\n      &lt;/button&gt;\n      &lt;button onClick={() =&gt; setAll({ hello: &#39;new&#39;, data: &#39;data&#39; })}&gt;\n        Set new data\n      &lt;/button&gt;\n      &lt;button onClick={() =&gt; remove(&#39;hello&#39;)} disabled={!map.hello}&gt;\n        Remove &#39;hello&#39;\n      &lt;/button&gt;\n      &lt;pre&gt;{JSON.stringify(map, null, 2)}&lt;/pre&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useMeasure(),ref=_a[0],state=_a[1];return react_2.default.createElement(react_2.default.Fragment,null,react_2.default.createElement("pre",null,JSON.stringify(state,null,2)),react_2.default.createElement("div",{ref:ref,style:{background:"red"}},"resize me"))};react_1.storiesOf("Sensors/useMeasure",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(1006)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemeasure"><code>useMeasure</code></h1>\n<p>React sensor hook that tracks dimensions of an HTML element using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">Resize Observer API</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useMeasure } from &quot;react-use&quot;;\n\nconst Demo = () =&gt; {\n  const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();\n\n  return (\n    &lt;div ref={ref}&gt;\n      &lt;div&gt;x: {x}&lt;/div&gt;    \n      &lt;div&gt;y: {y}&lt;/div&gt;\n      &lt;div&gt;width: {width}&lt;/div&gt;\n      &lt;div&gt;height: {height}&lt;/div&gt;\n      &lt;div&gt;top: {top}&lt;/div&gt;\n      &lt;div&gt;right: {right}&lt;/div&gt;\n      &lt;div&gt;bottom: {bottom}&lt;/div&gt;\n      &lt;div&gt;left: {left}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p>This hook uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"><code>ResizeObserver</code> API</a>, if you want to support \nlegacy browsers, consider installing <a href="https://www.npmjs.com/package/resize-observer-polyfill"><code>resize-observer-polyfill</code></a> \nbefore running your app. </p>\n<pre><code class="language-js">if (!window.ResizeObserver) {\n  window.ResizeObserver = (await import(&#39;resize-observer-polyfill&#39;)).default;\n}</code></pre>\n<h2 id="related-hooks">Related hooks</h2>\n<ul>\n<li><a href="./useSize.md">useSize</a></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var isWide=src_1.useMedia("(min-width: 480px)");return React.createElement("div",null,"Screen is wide: ",isWide?"Yes":"No")};react_1.storiesOf("Sensors/useMedia",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1008)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemedia"><code>useMedia</code></h1>\n<p>React sensor hook that tracks state of a CSS media query.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMedia} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const isWide = useMedia(&#39;(min-width: 480px)&#39;);\n\n  return (\n    &lt;div&gt;\n      Screen is wide: {isWide ? &#39;Yes&#39; : &#39;No&#39;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMedia(query: string, defaultState: boolean = false): boolean;</code></pre>\n<p>The <code>defaultState</code> parameter is only used as a fallback for server side rendering.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useMediaDevices();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors/useMediaDevices",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1010)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemediadevices"><code>useMediaDevices</code></h1>\n<p>React sensor hook that tracks connected hardware devices.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMediaDevices} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useMediaDevices();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(136),__webpack_require__(40),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useMediatedState_1=__webpack_require__(397),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),inputMediator=function inputMediator(s){return s.replace(/[\s]+/g," ")},Demo=function Demo(){var _a=useMediatedState_1.useMediatedState(inputMediator,""),state=_a[0],setState=_a[1];return React.createElement("div",null,React.createElement("div",null,"You will not be able to enter more than one space"),React.createElement("input",{type:"text",min:"0",max:"10",value:state,onChange:function onChange(ev){setState(ev.target.value)}}))};react_1.storiesOf("State/useMediatedState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1012)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemediatedstate"><code>useMediatedState</code></h1>\n<p>A lot like the standard <code>useState</code>, but with mediation process.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-ts">import * as React from &#39;react&#39;;\nimport { useMediatedState } from &#39;../useMediatedState&#39;;\n\nconst inputMediator = s =&gt; s.replace(/[\\s]+/g, &#39; &#39;);\nconst Demo = () =&gt; {\n  const [state, setState] = useMediatedState(inputMediator, &#39;&#39;);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;You will not be able to enter more than one space&lt;/div&gt;\n      &lt;input type=&quot;text&quot; min=&quot;0&quot; max=&quot;10&quot; \n             value={state}\n             onChange={(ev: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n               setState(ev.target.value);\n             }}\n      /&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [state, setState] = useMediatedState&lt;S=any&gt;(\n  mediator: StateMediator&lt;S&gt;,\n  initialState?: S\n);</code></pre>\n<blockquote>\n<p>Initial state will be set as-is.</p>\n</blockquote>\n<p>In case mediator expects 2 arguments it will receive the <code>setState</code> function as second argument, it is useful for async mediators.  </p>\n<blockquote>\n<p>This hook will not cancel previous mediation when new one been invoked, you have to handle it yourself._</p>\n</blockquote>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),initialState={count:0};function createMethods(state){return{reset:function reset(){return initialState},increment:function increment(){return tslib_1.__assign(tslib_1.__assign({},state),{count:state.count+1})},decrement:function decrement(){return tslib_1.__assign(tslib_1.__assign({},state),{count:state.count-1})}}}var Demo=function Demo(){var _a=src_1.useMethods(createMethods,initialState),state=_a[0],methods=_a[1];return React.createElement(React.Fragment,null,React.createElement("p",null,"Count: ",state.count),React.createElement("button",{onClick:methods.decrement},"-"),React.createElement("button",{onClick:methods.increment},"+"))};react_1.storiesOf("State/useMethods",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1014)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemethods"><code>useMethods</code></h1>\n<p>React hook that simplifies the <code>useReducer</code> implementation.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useMethods } from &#39;react-use&#39;;\n\nconst initialState = {\n  count: 0,\n};\n\nfunction createMethods(state) {\n  return {\n    reset() {\n      return initialState;\n    },\n    increment() {\n      return { ...state, count: state.count + 1 };\n    },\n    decrement() {\n      return { ...state, count: state.count - 1 };\n    },\n  };\n}\n\nconst Demo = () =&gt; {\n  const [state, methods] = useMethods(createMethods, initialState);\n\n  return (\n    &lt;&gt;\n      &lt;p&gt;Count: {state.count}&lt;/p&gt;\n      &lt;button onClick={methods.decrement}&gt;-&lt;/button&gt;\n      &lt;button onClick={methods.increment}&gt;+&lt;/button&gt;\n    &lt;/&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [state, methods] = useMethods(createMethods, initialState);</code></pre>\n<ul>\n<li><code>createMethods</code> &mdash; function that takes current state and return an object containing methods that return updated state.</li>\n<li><code>initialState</code> &mdash; initial value of the state.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useMotion();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors/useMotion",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1016)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemotion"><code>useMotion</code></h1>\n<p>React sensor hook that uses device&#39;s acceleration sensor to track its motions.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMotion} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useMotion();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useMount((function(){return alert("MOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useMount()")," hook can be used to perform a side-effect when component is mounted.")};react_1.storiesOf("Lifecycle/useMount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1018)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemount"><code>useMount</code></h1>\n<p>React lifecycle hook that calls a function after the component is mounted. Use <code>useLifecycles</code> if you need both a mount and unmount function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMount} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useMount(() =&gt; alert(&#39;MOUNTED&#39;));\n  return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMount(fn: () =&gt; void);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var isMounted=src_1.useMountedState(),updateState=React.useState()[1];return requestAnimationFrame(updateState),React.createElement("div",null,"This component is ",isMounted()?"MOUNTED":"NOT MOUNTED")};react_1.storiesOf("Lifecycle/useMountedState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1020)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemountedstate"><code>useMountedState</code></h1>\n<blockquote>\n<p><strong>NOTE!:</strong> despite having <code>State</code> in its name <strong><em>this hook does not cause component re-render</em></strong>.  \nThis component designed to be used to avoid state updates on unmounted components.</p>\n</blockquote>\n<p>Lifecycle hook providing ability to check component&#39;s mount state.<br>Returns a function that will return <code>true</code> if component mounted and <code>false</code> otherwise.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport {useMountedState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const isMounted = useMountedState();\n\n  React.useEffect(() =&gt; {\n    setTimeout(() =&gt; {\n      if (isMounted()) {\n        // ...\n      } else {\n        // ...\n      }\n    }, 1000);\n  });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var ref=React.useRef(null),state=src_1.useMouse(ref);return React.createElement(React.Fragment,null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{ref:ref,style:{position:"relative",width:"400px",height:"400px",backgroundColor:"whitesmoke"}},React.createElement("span",{style:{position:"absolute",left:state.elX+"px",top:state.elY+"px",pointerEvents:"none",transform:"scale(4)"}},"🐭")))};react_1.storiesOf("Sensors/useMouse",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(416)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(103),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(_a){var whenHovered=_a.whenHovered,bound=_a.bound,ref=React.useRef(null),state=src_1.useMouseHovered(ref,{whenHovered:whenHovered,bound:bound});return React.createElement(React.Fragment,null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{ref:ref,style:{position:"relative",width:"400px",height:"400px",backgroundColor:"whitesmoke"}},React.createElement("span",{style:{position:"absolute",left:state.elX+"px",top:state.elY+"px",pointerEvents:"none",transform:"scale(4)"}},"🐭")))};react_1.storiesOf("Sensors/useMouseHovered",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(416)})})).add("Demo",(function(){var bound=addon_knobs_1.boolean("bound",!1),whenHovered=addon_knobs_1.boolean("whenHovered",!1);return React.createElement(Demo,{whenHovered:whenHovered,bound:bound})}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var mouseWheel=src_1.useMouseWheel();return React.createElement(React.Fragment,null,React.createElement("h3",null,"delta Y Scrolled: ",mouseWheel))};react_1.storiesOf("Sensors/useMouseWheel",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1024)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemousewheel"><code>useMouseWheel</code></h1>\n<p>React Hook to get deltaY of mouse scrolled in window. </p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useMouseWheel } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const mouseWheel = useMouseWheel()\n  return (\n    &lt;&gt;\n      &lt;h3&gt;delta Y Scrolled: {mouseWheel}&lt;/h3&gt;\n    &lt;/&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(85),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),DemoStateValidator=function DemoStateValidator(s){return[s.every((function(num){return!(num%2)}))]},Demo=function Demo(){var _a=React.useState(1),state1=_a[0],setState1=_a[1],_b=React.useState(1),state2=_b[0],setState2=_b[1],_c=React.useState(1),state3=_c[0],setState3=_c[1],isValid=src_1.useMultiStateValidator([state1,state2,state3],DemoStateValidator)[0][0];return React.createElement("div",null,React.createElement("div",null,"Below fields will be valid if all of them is even"),React.createElement("br",null),React.createElement("input",{type:"number",min:"1",max:"10",value:state1,onChange:function onChange(ev){setState1(ev.target.value)}}),React.createElement("input",{type:"number",min:"1",max:"10",value:state2,onChange:function onChange(ev){setState2(ev.target.value)}}),React.createElement("input",{type:"number",min:"1",max:"10",value:state3,onChange:function onChange(ev){setState3(ev.target.value)}}),void 0!==isValid&&React.createElement("span",{style:{marginLeft:24}},isValid?"Valid!":"Invalid"))};react_1.storiesOf("State/useMultiStateValidator",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1026)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemultistatevalidator"><code>useMultiStateValidator</code></h1>\n<p>Each time any of given states changes - validator function is invoked.  </p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-ts">import * as React from &#39;react&#39;;\nimport { useMultiStateValidator } from &#39;react-use&#39;;\n\nconst DemoStateValidator = (s: number[]) =&gt; [s.every((num: number) =&gt; !(num % 2))] as [boolean];\nconst Demo = () =&gt; {\n  const [state1, setState1] = React.useState&lt;number&gt;(1);\n  const [state2, setState2] = React.useState&lt;number&gt;(1);\n  const [state3, setState3] = React.useState&lt;number&gt;(1);\n  const [[isValid]] = useMultiStateValidator([state1, state2, state3], DemoStateValidator);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;Below fields will be valid if all of them is even&lt;/div&gt;\n      &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value={state1}\n        onChange={(ev: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n          setState1((ev.target.value as unknown) as number);\n        }}\n      /&gt;\n      &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value={state2}\n        onChange={(ev: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n          setState2((ev.target.value as unknown) as number);\n        }}\n      /&gt;\n      &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value={state3}\n        onChange={(ev: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n          setState3((ev.target.value as unknown) as number);\n        }}\n      /&gt;\n      {isValid !== null &amp;&amp; &lt;span&gt;{isValid ? &#39;Valid!&#39; : &#39;Invalid&#39;}&lt;/span&gt;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [validity, revalidate] = useStateValidator(\n  state: any[] | { [p: string]: any } | { [p: number]: any },\n  validator: (state, setValidity?)=&gt;[boolean|null, ...any[]],\n  initialValidity: any = [undefined]\n);</code></pre>\n<ul>\n<li><strong><code>state</code></strong><em><code>: any[] | { [p: string]: any } | { [p: number]: any }</code></em> can be both an array or object. It&#39;s <em>values</em> will be used as a deps for inner <code>useEffect</code>.</li>\n<li><strong><code>validity</code></strong><em><code>: [boolean|null, ...any[]]</code></em> result of validity check. First element is strictly nullable boolean, but others can contain arbitrary data;</li>\n<li><strong><code>revalidate</code></strong><em><code>: ()=&gt;void</code></em> runs validator once again</li>\n<li><strong><code>validator</code></strong><em><code>: (state, setValidity?)=&gt;[boolean|null, ...any[]]</code></em> should return an array suitable for validity state described above;<ul>\n<li><code>states</code> - current states values as they&#39;ve been passed to the hook;</li>\n<li><code>setValidity</code> - if defined hook will not trigger validity change automatically. Useful for async validators;</li>\n</ul>\n</li>\n<li><code>initialValidity</code> - validity value which set when validity is nt calculated yet;</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useNetworkState();return react_2.useEffect((function(){console.log(state)}),[state]),React.createElement("div",null,React.createElement("div",null,"Since JSON do not output `undefined` fields look the console to see whole the state"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Sensors/useNetworkState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1028)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usenetworkstate"><code>useNetworkState</code></h1>\n<p>Tracks the state of browser&#39;s network connection.</p>\n<p>As of the standard it is not guaranteed that browser connected to the <em>Internet</em>, it only guarantees the network\nconnection.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useNetworkState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useNetworkState();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n<h4 id="state-interface">State interface:</h4>\n<pre><code class="language-typescript">interface IUseNetworkState {\n  /**\n   * @desc Whether browser connected to the network or not.\n   */\n  online: boolean | undefined;\n  /**\n   * @desc Previous value of `online` property. Helps to identify if browser\n   * just connected or lost connection.\n   */\n  previous: boolean | undefined;\n  /**\n   * @desc The {Date} object pointing to the moment when state change occurred.\n   */\n  since: Date | undefined;\n  /**\n   * @desc Effective bandwidth estimate in megabits per second, rounded to the\n   * nearest multiple of 25 kilobits per seconds.\n   */\n  downlink: number | undefined;\n  /**\n   * @desc Maximum downlink speed, in megabits per second (Mbps), for the\n   * underlying connection technology\n   */\n  downlinkMax: number | undefined;\n  /**\n   * @desc Effective type of the connection meaning one of &#39;slow-2g&#39;, &#39;2g&#39;, &#39;3g&#39;, or &#39;4g&#39;.\n   * This value is determined using a combination of recently observed round-trip time\n   * and downlink values.\n   */\n  effectiveType: &#39;slow-2g&#39; | &#39;2g&#39; | &#39;3g&#39; | &#39;4g&#39; | undefined;\n  /**\n   * @desc Estimated effective round-trip time of the current connection, rounded\n   * to the nearest multiple of 25 milliseconds\n   */\n  rtt: number | undefined;\n  /**\n   * @desc Wheter user has set a reduced data usage option on the user agent.\n   */\n  saveData: boolen | undefined;\n  /**\n   * @desc The type of connection a device is using to communicate with the network.\n   */\n  type: &#39;bluetooth&#39; | &#39;cellular&#39; | &#39;ethernet&#39; | &#39;none&#39; | &#39;wifi&#39; | &#39;wimax&#39; | &#39;other&#39; | &#39;unknown&#39; | undefined;\n}</code></pre>\n<h4 id="call-signature">Call signature</h4>\n<pre><code class="language-typescript">function useNetworkState(initialState?: IUseNetworkState | (() =&gt; IUseNetworkState)): IUseNetworkState;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),rxjs_1=__webpack_require__(1114),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),counter$=new rxjs_1.BehaviorSubject(0),Demo=function Demo(){var value=src_1.useObservable(counter$,0);return React.createElement("button",{onClick:function onClick(){return counter$.next(value+1)}},"Clicked ",value," times")};react_1.storiesOf("State/useObservable",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1030)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useobservable"><code>useObservable</code></h1>\n<p>React state hook that tracks the latest value of an <code>Observable</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useObservable} from &#39;react-use&#39;;\n\nconst counter$ = new BehaviorSubject(0);\nconst Demo = () =&gt; {\n  const value = useObservable(counter$, 0);\n\n  return (\n    &lt;button onClick={() =&gt; counter$.next(value + 1)}&gt;\n      Clicked {value} times\n    &lt;/button&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.useOrientation();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors/useOrientation",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1032)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useorientation"><code>useOrientation</code></h1>\n<p>React sensor hook that tracks screen orientation of user&#39;s device.</p>\n<p>Returns state in the following shape</p>\n<pre><code class="language-js">{\n  angle: 0,\n  type: &#39;landscape-primary&#39;\n}</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useOrientation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = useOrientation();\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),addon_actions_1=__webpack_require__(258),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.usePageLeave(addon_actions_1.action("onPageLeave")),React.createElement("div",null,"Try leaving the page and see logs in ",React.createElement("code",null,"Actions")," tab.")};react_1.storiesOf("Sensors/usePageLeave",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1034)})})).add("Default",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepageleave"><code>usePageLeave</code></h1>\n<p>React sensor hook that fires a callback when mouse leaves the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePageLeave} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  usePageLeave(() =&gt; console.log(&#39;Page left...&#39;));\n\n  return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var state=src_1.usePermission({name:"microphone"});return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Side effects/usePermission",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1036)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepermission"><code>usePermission</code></h1>\n<p>React side-effect hook to query permission status of browser APIs.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePermission} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const state = usePermission({ name: &#39;microphone&#39; });\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1],prevCount=src_1.usePrevious(count);return React.createElement("div",null,React.createElement("p",null,"Now: ",count,", before: ",String(prevCount)),React.createElement("button",{onClick:function onClick(){return setCount((function(value){return value+1}))}},"+"),React.createElement("button",{onClick:function onClick(){return setCount((function(value){return value-1}))}},"-"))};react_1.storiesOf("State/usePrevious",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1038)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useprevious"><code>usePrevious</code></h1>\n<p>React state hook that returns the previous state as described in the <a href="https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state">React hooks FAQ</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePrevious} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, setCount] = React.useState(0);\n  const prevCount = usePrevious(count);\n\n  return (\n    &lt;p&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;+&lt;/button&gt;\n      &lt;button onClick={() =&gt; setCount(count - 1)}&gt;-&lt;/button&gt;\n      &lt;p&gt;\n        Now: {count}, before: {prevCount}\n      &lt;/p&gt;\n    &lt;/p&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const prevState = usePrevious = &lt;T&gt;(state: T): T;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useCounter(0),count=_a[0],relatedInc=_a[1].inc,_b=src_1.useCounter(0),unrelatedCount=_b[0],inc=_b[1].inc,prevCount=src_1.usePreviousDistinct(count);return React.createElement("p",null,"Now: ",count,", before: ",prevCount,React.createElement("button",{onClick:function onClick(){return relatedInc()}},"Increment"),"Unrelated: ",unrelatedCount,React.createElement("button",{onClick:function onClick(){return inc()}},"Increment Unrelated"))};react_1.storiesOf("State/usePreviousDistinct",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1040)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepreviousdistinct"><code>usePreviousDistinct</code></h1>\n<p>Just like <code>usePrevious</code> but it will only update once the value actually changes. This is important when other\nhooks are involved and you aren&#39;t just interested in the previous props version, but want to know the previous\ndistinct value</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePreviousDistinct, useCounter} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, { inc: relatedInc }] = useCounter(0);\n  const [unrelatedCount, { inc }] = useCounter(0);\n  const prevCount = usePreviousDistinct(count);\n\n  return (\n    &lt;p&gt;\n      Now: {count}, before: {prevCount}\n      &lt;button onClick={() =&gt; relatedInc()}&gt;Increment&lt;/button&gt;\n      Unrelated: {unrelatedCount}\n      &lt;button onClick={() =&gt; inc()}&gt;Increment Unrelated&lt;/button&gt;\n    &lt;/p&gt;\n  );\n};</code></pre>\n<p>You can also provide a way of identifying the value as unique. By default, a strict equals is used.</p>\n<pre><code class="language-jsx">import {usePreviousDistinct} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [str, setStr] = React.useState(&quot;something_lowercase&quot;);\n  const [unrelatedCount] = React.useState(0);\n  const prevStr = usePreviousDistinct(str, (prev, next) =&gt; (prev &amp;&amp; prev.toUpperCase()) === next.toUpperCase());\n\n  return (\n    &lt;p&gt;\n      Now: {count}, before: {prevCount}\n      Unrelated: {unrelatedCount}\n    &lt;/p&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const prevState = usePreviousDistinct = &lt;T&gt;(state: T, compare?: (prev: T | undefined, next: T) =&gt; boolean): T;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(58),__webpack_require__(13),__webpack_require__(29),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),useState=React.useState,useEffect=React.useEffect,DemoInner=function DemoInner(_a){var promise=_a.promise,safePromise=src_1.usePromise(),_b=useState(-1),value=_b[0],setValue=_b[1];return useEffect((function(){safePromise(promise).then(setValue)}),[promise]),React.createElement("div",null,-1===value?"Resolving value...":"Value: "+value)},Demo=function Demo(){var _a=src_1.useBoolean(!0),mounted=_a[0],toggleMounted=_a[1],_b=src_1.useNumber(),num=_b[0],inc=_b[1].inc,promise=new Promise((function(r){return setTimeout((function(){return r(num)}),1e3)}));return React.createElement("div",null,React.createElement("p",null,"This demo provides a number in a promise that resolves in 1sec to a child component."),React.createElement("button",{onClick:function onClick(){return toggleMounted()}},mounted?"Unmount":"Mount"),React.createElement("button",{onClick:function onClick(){return inc()}},"Increment (",num,")"),React.createElement("br",null),mounted&&React.createElement(DemoInner,{promise:promise}))};react_1.storiesOf("Lifecycle/usePromise",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1042)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepromise"><code>usePromise</code></h1>\n<p>React Lifecycle hook that returns a helper function for wrapping promises.\nPromises wrapped with this function will resolve only when component is mounted.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePromise} from &#39;react-use&#39;;\n\nconst Demo = ({promise}) =&gt; {\n  const mounted = usePromise();\n  const [value, setValue] = useState();\n\n  useEffect(() =&gt; {\n    (async () =&gt; {\n      const value = await mounted(promise);\n      // This line will not execute if &lt;Demo&gt; component gets unmounted.\n      setValue(value);\n    })();\n  });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useQueue(),add=_a.add,remove=_a.remove,first=_a.first,last=_a.last,size=_a.size;return React.createElement("div",null,React.createElement("ul",null,React.createElement("li",null,"first: ",first),React.createElement("li",null,"last: ",last),React.createElement("li",null,"size: ",size)),React.createElement("button",{onClick:function onClick(){return add((last||0)+1)}},"Add"),React.createElement("button",{onClick:function onClick(){return remove()}},"Remove"))};react_1.storiesOf("State/useQueue",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1044)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usequeue"><code>useQueue</code></h1>\n<p>React state hook implements simple FIFO queue.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useQueue } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const { add, remove, first, last, size } = useQueue();\n\n  return (\n    &lt;div&gt;\n      &lt;ul&gt;\n        &lt;li&gt;first: {first}&lt;/li&gt;\n        &lt;li&gt;last: {last}&lt;/li&gt;\n        &lt;li&gt;size: {size}&lt;/li&gt;\n      &lt;/ul&gt;\n      &lt;button onClick={() =&gt; add((last || 0) + 1)}&gt;Add&lt;/button&gt;\n      &lt;button onClick={() =&gt; remove()}&gt;Remove&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var frames=src_1.useRaf(5e3,1e3);return React.createElement("div",null,"Elapsed: ",frames)};react_1.storiesOf("Animation/useRaf",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1046)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useraf"><code>useRaf</code></h1>\n<p>React animation hook that forces component to re-render on each <code>requestAnimationFrame</code>,\nreturns percentage of time elapsed.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useRaf} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const elapsed = useRaf(5000, 1000);\n\n  return (\n    &lt;div&gt;\n      Elapsed: {elapsed}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useRaf(ms?: number, delay?: number): number;</code></pre>\n<ul>\n<li><code>ms</code> &mdash; milliseconds for how long to keep re-rendering component, defaults to <code>1e12</code>.</li>\n<li><code>delay</code> &mdash; delay in milliseconds after which to start re-rendering component, defaults to <code>0</code>.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),ticks=_a[0],setTicks=_a[1],_b=React.useState(0),lastCall=_b[0],setLastCall=_b[1],update=src_1.useUpdate(),_c=src_1.useRafLoop((function(time){setTicks((function(ticks){return ticks+1})),setLastCall(time)})),loopStop=_c[0],loopStart=_c[1],isActive=_c[2];return React.createElement("div",null,React.createElement("div",null,"RAF triggered: ",ticks," (times)"),React.createElement("div",null,"Last high res timestamp: ",lastCall),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){isActive()?loopStop():loopStart(),update()}},isActive()?"STOP":"START"))};react_1.storiesOf("Side effects/useRafLoop",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1048)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="userafloop"><code>useRafLoop</code></h1>\n<p>This hook call given function within the RAF loop without re-rendering parent component.\nLoop stops automatically on component unmount.</p>\n<p>Additionally hook provides methods to start/stop loop and check current state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport { useRafLoop, useUpdate } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [ticks, setTicks] = React.useState(0);\n  const [lastCall, setLastCall] = React.useState(0);\n  const update = useUpdate();\n\n  const [loopStop, loopStart, isActive] = useRafLoop((time) =&gt; {\n    setTicks(ticks =&gt; ticks + 1);\n    setLastCall(time);\n  });\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;RAF triggered: {ticks} (times)&lt;/div&gt;\n      &lt;div&gt;Last high res timestamp: {lastCall}&lt;/div&gt;\n      &lt;br /&gt;\n      &lt;button onClick={() =&gt; {\n        isActive() ? loopStop() : loopStart();\n        update();\n      }}&gt;{isActive() ? &#39;STOP&#39; : &#39;START&#39;}&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [stopLoop, startLoop, isActive] = useRafLoop(callback: FrameRequestCallback, initiallyActive = true);</code></pre>\n<ul>\n<li><strong><code>callback</code></strong><em>: <code>(time: number)=&gt;void</code></em> &mdash; function to call each RAF tick.<ul>\n<li><strong><code>time</code></strong><em>: <code>number</code></em> &mdash; DOMHighResTimeStamp, which indicates the current time (based on the number of milliseconds since time origin).</li>\n</ul>\n</li>\n<li><strong><code>initiallyActive</code></strong><em>: <code>boolean</code></em> &mdash; whether loop should be started at initial render.</li>\n<li>Return<ul>\n<li><strong><code>stopLoop</code></strong><em>: <code>()=&gt;void</code></em> &mdash; stop loop if it is active.</li>\n<li><strong><code>startLoop</code></strong><em>: <code>()=&gt;void</code></em> &mdash; start loop if it was inactive.</li>\n<li><strong><code>isActive</code></strong><em>: <code>()=&gt;boolean</code></em> &mdash; <em>true</em> if loop is active.</li>\n</ul>\n</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useRafState({x:0,y:0}),state=_a[0],setState=_a[1];return src_1.useMount((function(){var onMouseMove=function onMouseMove(event){setState({x:event.clientX,y:event.clientY})},onTouchMove=function onTouchMove(event){setState({x:event.changedTouches[0].clientX,y:event.changedTouches[0].clientY})};return document.addEventListener("mousemove",onMouseMove),document.addEventListener("touchmove",onTouchMove),function(){document.removeEventListener("mousemove",onMouseMove),document.removeEventListener("touchmove",onTouchMove)}})),React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("State/useRafState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1050)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="userafstate"><code>useRafState</code></h1>\n<p>React state hook that only updates state in the callback of <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame"><code>requestAnimationFrame</code></a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useRafState, useMount} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [state, setState] = useRafState({\n    width: 0,\n    height: 0,\n  });\n\n  useMount(() =&gt; {\n    const onResize = () =&gt; {\n      setState({\n        width: window.clientWidth,\n        height: window.height,\n      });\n    };\n\n    window.addEventListener(&#39;resize&#39;, onResize);\n\n    return () =&gt; {\n      window.removeEventListener(&#39;resize&#39;, onResize);\n    };\n  });\n\n  return &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useRendersCount_1=__webpack_require__(402),useUpdate_1=tslib_1.__importDefault(__webpack_require__(88)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var update=useUpdate_1.default(),rendersCount=useRendersCount_1.useRendersCount();return React.createElement("div",null,React.createElement("span",null,"Renders count: ",rendersCount),React.createElement("br",null),React.createElement("button",{onClick:update},"re-render"))};react_1.storiesOf("State/useRendersCount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1052)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="userenderscount"><code>useRendersCount</code></h1>\n<p>Tracks component&#39;s renders count including the first render.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-typescript">import * as React from &#39;react&#39;;\nimport { useRendersCount } from &quot;react-use&quot;;  \n\nconst Demo = () =&gt; {\n  const update = useUpdate();\n  const rendersCount = useRendersCount();\n\n  return (\n    &lt;div&gt;\n      &lt;span&gt;Renders count: {rendersCount}&lt;/span&gt;\n      &lt;br /&gt;\n      &lt;button onClick={update}&gt;re-render&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-typescript">const rendersCount: number = useRendersCount();</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a,_b,_c=src_1.useScratch(),ref=_c[0],state=_c[1],_d=state.x,x=void 0===_d?0:_d,_e=state.y,y=void 0===_e?0:_e,_f=state.dx,dx=void 0===_f?0:_f,_g=state.dy,dy=void 0===_g?0:_g;dx<0&&(x=(_a=[x+dx,-dx])[0],dx=_a[1]),dy<0&&(y=(_b=[y+dy,-dy])[0],dy=_b[1]);var rectangleStyle={position:"absolute",left:x,top:y,width:dx,height:dy,border:"1px solid tomato",pointerEvents:"none",userSelect:"none"};return React.createElement("div",{ref:ref,style:{position:"relative",width:400,height:400,border:"1px solid tomato"}},React.createElement("pre",{style:{pointerEvents:"none",userSelect:"none"}},JSON.stringify(state,null,4)),state.isScratching&&React.createElement("div",{style:rectangleStyle}))};react_1.storiesOf("Sensors/useScratch",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1054)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usescratch"><code>useScratch</code></h1>\n<p>React sensor hook that tracks state of mouse &quot;scrubs&quot; (or &quot;scratches&quot;).</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import useScratch from &#39;react-use/lib/useScratch&#39;;\n\nconst Demo = () =&gt; {\n  const [ref, state] = useScratch();\n\n  const blockStyle: React.CSSProperties = {\n    position: &#39;relative&#39;,\n    width: 400,\n    height: 400,\n    border: &#39;1px solid tomato&#39;,\n  };\n\n  const preStyle: React.CSSProperties = {\n    pointerEvents: &#39;none&#39;,\n    userSelect: &#39;none&#39;,\n  };\n\n  let { x = 0, y = 0, dx = 0, dy = 0 } = state;\n  if (dx &lt; 0) [x, dx] = [x + dx, -dx];\n  if (dy &lt; 0) [y, dy] = [y + dy, -dy];\n\n  const rectangleStyle: React.CSSProperties = {\n    position: &#39;absolute&#39;,\n    left: x,\n    top: y,\n    width: dx,\n    height: dy,\n    border: &#39;1px solid tomato&#39;,\n    pointerEvents: &#39;none&#39;,\n    userSelect: &#39;none&#39;,\n  };\n\n  return (\n    &lt;div ref={ref} style={blockStyle}&gt;\n      &lt;pre style={preStyle}&gt;{JSON.stringify(state, null, 4)}&lt;/pre&gt;\n      {state.isScratching &amp;&amp; &lt;div style={rectangleStyle} /&gt;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [ref, state] = useScratch();</code></pre>\n<p><code>state</code> is:</p>\n<pre><code class="language-ts">export interface ScratchSensorState {\n  isScratching: boolean;\n  start?: number;\n  end?: number;\n  x?: number;\n  y?: number;\n  dx?: number;\n  dy?: number;\n  docX?: number;\n  docY?: number;\n  posX?: number;\n  posY?: number;\n  elH?: number;\n  elW?: number;\n  elX?: number;\n  elY?: number;\n}</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var scrollRef=React.useRef(null),_a=src_1.useScroll(scrollRef),x=_a.x,y=_a.y;return React.createElement(React.Fragment,null,React.createElement("div",null,"x: ",x),React.createElement("div",null,"y: ",y),React.createElement("div",{ref:scrollRef,style:{width:"400px",height:"400px",backgroundColor:"whitesmoke",overflow:"scroll"}},React.createElement("div",{style:{width:"2000px",height:"2000px"}},"Scroll me")))};react_1.storiesOf("Sensors/useScroll",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(417)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var sbw=src_1.useScrollbarWidth();return React.createElement("div",null,void 0===sbw?"DOM is not ready yet, SBW detection delayed":"Browser's scrollbar width is "+sbw+"px")};react_1.storiesOf("Sensors/useScrollbarWidth",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(417)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var scrollRef=React.useRef(null),scrolling=src_1.useScrolling(scrollRef);return React.createElement(React.Fragment,null,React.createElement("div",null,scrolling?"Scrolling":"Not scrolling"),React.createElement("br",null),React.createElement("div",{ref:scrollRef,style:{width:"400px",height:"400px",backgroundColor:"whitesmoke",overflow:"scroll"}},React.createElement("div",{style:{width:"2000px",height:"2000px"}},"Scroll me")))};react_1.storiesOf("Sensors/useScrolling",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1058)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usescrolling"><code>useScrolling</code></h1>\n<p>React sensor hook that keeps track of whether the user is scrolling or not.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useScrolling } from &quot;react-use&quot;;\n\nconst Demo = () =&gt; {\n  const scrollRef = React.useRef(null);\n  const scrolling = useScrolling(scrollRef);\n\n  return (\n    &lt;div ref={scrollRef}&gt;\n      {&lt;div&gt;{scrolling ? &quot;Scrolling&quot; : &quot;Not scrolling&quot;}&lt;/div&gt;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useScrolling(ref: RefObject&lt;HTMLElement&gt;);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var edit=src_1.useSearchParam("edit");return React.createElement("div",null,React.createElement("div",null,"edit: ",edit||"🤷‍♂️"),React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return window.history.pushState({},"",window.location.pathname+"?edit=123")}},"Edit post 123 (?edit=123)")),React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return window.history.pushState({},"",window.location.pathname+"?edit=999")}},"Edit post 999 (?edit=999)")),React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return window.history.pushState({},"",window.location.pathname)}},"Close modal")))};react_1.storiesOf("Sensors/useSearchParam",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1060)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesearchparam"><code>useSearchParam</code></h1>\n<p>React sensor hook that tracks browser&#39;s location search param.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSearchParam} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const edit = useSearchParam(&#39;edit&#39;);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;edit: {edit || &#39;🤷‍♂️&#39;}&lt;/div&gt;\n      &lt;div&gt;\n        &lt;button onClick={() =&gt; history.pushState({}, &#39;&#39;, location.pathname + &#39;?edit=123&#39;)}&gt;Edit post 123 (?edit=123)&lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div&gt;\n      &lt;button onClick={() =&gt; history.pushState({}, &#39;&#39;, location.pathname + &#39;?edit=999&#39;)}&gt;Edit post 999 (?edit=999)&lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div&gt;\n        &lt;button onClick={() =&gt; history.pushState({}, &#39;&#39;, location.pathname)}&gt;Close modal&lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="caveatsgotchas">Caveats/Gotchas</h2>\n<p>When using a hash router, like <code>react-router</code>&#39;s <a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md"><code>&lt;HashRouter&gt;</code></a>, this hook won&#39;t be able to read the search parameters as they are considered part of the hash of the URL by browsers.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useSessionStorage("hello-key","foo"),value=_a[0],setValue=_a[1];return React.createElement("div",null,React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function onClick(){return setValue("bar")}},"bar"),React.createElement("button",{onClick:function onClick(){return setValue("baz")}},"baz"))};react_1.storiesOf("Side effects/useSessionStorage",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1062)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesessionstorage"><code>useSessionStorage</code></h1>\n<p>React side-effect hook that manages a single <code>sessionStorage</code> key.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSessionStorage} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [value, setValue] = useSessionStorage(&#39;my-key&#39;, &#39;foo&#39;);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;Value: {value}&lt;/div&gt;\n      &lt;button onClick={() =&gt; setValue(&#39;bar&#39;)}&gt;bar&lt;/button&gt;\n      &lt;button onClick={() =&gt; setValue(&#39;baz&#39;)}&gt;baz&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useSessionStorage(key);\nuseSessionStorage(key, initialValue);\nuseSessionStorage(key, initialValue, raw);</code></pre>\n<ul>\n<li><code>key</code> &mdash; <code>sessionStorage</code> key to manage.</li>\n<li><code>initialValue</code> &mdash; initial value to set, if value in <code>sessionStorage</code> is empty.</li>\n<li><code>raw</code> &mdash; boolean, if set to <code>true</code>, hook will not attempt to JSON serialize stored values.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(98),__webpack_require__(13),__webpack_require__(19),__webpack_require__(18),__webpack_require__(22),__webpack_require__(90),__webpack_require__(54),__webpack_require__(117),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useSet(new Set(["hello"])),set=_a[0],_b=_a[1],add=_b.add,has=_b.has,remove=_b.remove,reset=_b.reset,toggle=_b.toggle;return React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return add(String(Date.now()))}},"Add"),React.createElement("button",{onClick:function onClick(){return reset()}},"Reset"),React.createElement("button",{onClick:function onClick(){return remove("hello")},disabled:!has("hello")},"Remove 'hello'"),React.createElement("button",{onClick:function onClick(){return toggle("hello")}},"Toggle 'hello'"),React.createElement("pre",null,JSON.stringify(Array.from(set),null,2)))};react_1.storiesOf("State/useSet",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1064)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useset"><code>useSet</code></h1>\n<p>React state hook that tracks a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSet} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [set, { add, has, remove, toggle, reset }] = useSet(new Set([&#39;hello&#39;]));\n\n  return (\n    &lt;div&gt;\n      &lt;button onClick={() =&gt; add(String(Date.now()))}&gt;Add&lt;/button&gt;\n      &lt;button onClick={() =&gt; reset()}&gt;Reset&lt;/button&gt;\n      &lt;button onClick={() =&gt; remove(&#39;hello&#39;)} disabled={!has(&#39;hello&#39;)}&gt;\n        Remove &#39;hello&#39;\n      &lt;/button&gt;\n      &lt;button onClick={() =&gt; toggle(&#39;hello&#39;)}&gt;Toggle hello&lt;/button&gt;\n      &lt;pre&gt;{JSON.stringify(Array.from(set), null, 2)}&lt;/pre&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useSetState({}),state=_a[0],setState=_a[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:function onClick(){return setState({hello:"world"})}},"hello"),React.createElement("button",{onClick:function onClick(){return setState({foo:"bar"})}},"foo"),React.createElement("button",{onClick:function onClick(){setState((function(prevState){return{count:void 0===prevState.count?0:prevState.count+1}}))}},"increment"))};react_1.storiesOf("State/useSetState",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1066)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesetstate"><code>useSetState</code></h1>\n<p>React state hook that creates <code>setState</code> method which works similar to how\n<code>this.setState</code> works in class components&mdash;it merges object changes into\ncurrent state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSetState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [state, setState] = useSetState({});\n\n  return (\n    &lt;div&gt;\n      &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n      &lt;button onClick={() =&gt; setState({hello: &#39;world&#39;})}&gt;hello&lt;/button&gt;\n      &lt;button onClick={() =&gt; setState({foo: &#39;bar&#39;})}&gt;foo&lt;/button&gt;\n      &lt;button \n        onClick={() =&gt; {\n          setState((prevState) =&gt; ({\n            count: (prevState.count || 0) + 1,\n          }))\n        }}\n      &gt;\n        count\n      &lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [state, setState] = useSetState({cnt: 0});\n\nsetState({cnt: state.cnt + 1});\nsetState((prevState) =&gt; ({\n  cnt: prevState + 1,\n}));</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=src_1.useCounter(0),countShallow=_b[0],incShallow=_b[1].inc,_c=src_1.useCounter(0),countDeep=_c[0],incDeep=_c[1].inc,options={nested:{max:500}};return React.useEffect((function(){countNormal<options.nested.max&&incNormal()}),[options.nested]),src_1.useShallowCompareEffect((function(){countNormal<options.nested.max&&incShallow()}),[options.nested]),src_1.useShallowCompareEffect((function(){countNormal<options.nested.max&&incDeep()}),[options]),React.createElement("div",null,React.createElement("p",null,"useEffect: ",countNormal),React.createElement("p",null,"useShallowCompareEffect 1st level change: ",countShallow),React.createElement("p",null,"useShallowCompareEffect 2nd level change: ",countDeep))};react_1.storiesOf("Lifecycle/useShallowCompareEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1068)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useshallowcompareeffect"><code>useShallowCompareEffect</code></h1>\n<p>A modified useEffect hook that is using shallow comparison on each of its dependencies instead of reference equality.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useShallowCompareEffect} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, {inc: inc}] = useCounter(0);\n  const options = { step: 2 };\n\n  useShallowCompareEffect(() =&gt; {\n    inc(options.step)\n  }, [options]);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;useShallowCompareEffect: {count}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useShallowCompareEffect(effect: () =&gt; void | (() =&gt; void | undefined), deps: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useSize((function(_a){var currentWidth=_a.width;return React.createElement("div",{style:{background:"red"}},"Size me up! (",currentWidth,"px)")})),sized=_a[0],state=_a[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),sized)};react_1.storiesOf("Sensors/useSize",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1070)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesize"><code>useSize</code></h1>\n<p>React sensor hook that tracks size of an HTML element.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSize} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [sized, {width, height}] = useSize(\n    ({width}) =&gt; &lt;div style={{background: &#39;red&#39;}}&gt;Size me up! ({width}px)&lt;/div&gt;,\n    { width: 100, height: 100 }\n  );\n\n  return (\n    &lt;div&gt;\n      {sized}\n      &lt;div&gt;width: {width}&lt;/div&gt;\n      &lt;div&gt;height: {height}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useSize(element, initialSize);</code></pre>\n<ul>\n<li><code>element</code> &mdash; sized element.</li>\n<li><code>initialSize</code> &mdash; initial size containing a <code>width</code> and <code>height</code> key.</li>\n</ul>\n<h2 id="related-hooks">Related hooks</h2>\n<ul>\n<li><a href="./useMeasure.md">useMeasure</a></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var ref=React.useRef(null),state=src_1.useSlider(ref,{onScrubStop:function onScrubStop(value){console.log("onScrubStop",value)}});return React.createElement("div",null,React.createElement("div",{ref:ref,style:{position:"relative",background:"yellow",padding:4}},React.createElement("p",{style:{margin:0,textAlign:"center"}},"Slide me"),React.createElement("div",{style:{position:"absolute",top:0,left:100*state.value+"%",transform:"scale(2)"}},state.isSliding?"🏂":"🎿")),React.createElement("pre",null,JSON.stringify(state,null,2)))},DemoVertical=function DemoVertical(){var ref=React.useRef(null),state=src_1.useSlider(ref,{vertical:!0});return React.createElement("div",null,React.createElement("div",{ref:ref,style:{position:"relative",background:"yellow",padding:4,width:30,height:400}},React.createElement("p",{style:{margin:0,textAlign:"center"}},"Slide me"),React.createElement("div",{style:{position:"absolute",left:0,top:100*state.value+"%",transform:"scale(2)"}},state.isSliding?"🏂":"🎿")),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("UI/useSlider",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1072)})})).add("Horizontal",(function(){return React.createElement(Demo,null)})).add("Vertical",(function(){return React.createElement(DemoVertical,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useslider"><code>useSlider</code></h1>\n<p>React UI hook that provides slide behavior over any HTML element. Supports both mouse and touch events.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSlider} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const ref = React.useRef(null);\n  const {isSliding, value, pos, length} = useSlider(ref);\n\n  return (\n    &lt;div&gt;\n      &lt;div ref={ref} style={{ position: &#39;relative&#39; }}&gt;\n        &lt;p style={{ textAlign: &#39;center&#39;, color: isSliding ? &#39;red&#39; : &#39;green&#39; }}&gt;\n          {Math.round(state.value * 100)}%\n        &lt;/p&gt;\n        &lt;div style={{ position: &#39;absolute&#39;, left: pos }}&gt;🎚&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),voices=window.speechSynthesis.getVoices(),Demo=function Demo(){var state=src_1.useSpeech("Hello world!",{rate:.8,pitch:.5,voice:voices[0]});return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("UI/useSpeech",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1074)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usespeech"><code>useSpeech</code></h1>\n<p>React UI hook that synthesizes human voice that speaks a given string.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSpeech} from &#39;react-use&#39;;\n\nconst voices = window.speechSynthesis.getVoices();\n\nconst Demo = () =&gt; {\n  const state = useSpeech(&#39;Hello world!&#39;, { rate: 0.8, pitch: 0.5, voice: voices[0] });\n\n  return (\n    &lt;pre&gt;\n      {JSON.stringify(state, null, 2)}\n    &lt;/pre&gt;  \n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useSpring_1=tslib_1.__importDefault(__webpack_require__(1076)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(50),target=_a[0],setTarget=_a[1],value=useSpring_1.default(target);return React.createElement("div",null,value,React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return setTarget(0)}},"Set 0"),React.createElement("button",{onClick:function onClick(){return setTarget(100)}},"Set 100"))};react_1.storiesOf("Animation/useSpring",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1078)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),rebound_1=__webpack_require__(1077);exports.default=function useSpring(targetValue,tension,friction){void 0===targetValue&&(targetValue=0),void 0===tension&&(tension=50),void 0===friction&&(friction=3);var _a=react_1.useState(null),spring=_a[0],setSpring=_a[1],_b=react_1.useState(targetValue),value=_b[0],setValue=_b[1],listener=react_1.useMemo((function(){return{onSpringUpdate:function onSpringUpdate(currentSpring){var newValue=currentSpring.getCurrentValue();setValue(newValue)}}}),[]);return react_1.useEffect((function(){if(!spring){var newSpring=(new rebound_1.SpringSystem).createSpring(tension,friction);newSpring.setCurrentValue(targetValue),setSpring(newSpring),newSpring.addListener(listener)}return function(){spring&&(spring.removeListener(listener),setSpring(null))}}),[tension,friction,spring]),react_1.useEffect((function(){spring&&spring.setEndValue(targetValue)}),[targetValue]),value}},,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usespring"><code>useSpring</code></h1>\n<p>React animation hook that updates a single numeric value over time according\nto spring dynamics.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import useSpring from &#39;react-use/lib/useSpring&#39;;\n\nconst Demo = () =&gt; {\n  const [target, setTarget] = useState(50);\n  const value = useSpring(target);\n\n  return (\n    &lt;div&gt;\n      {value}\n      &lt;br /&gt;\n      &lt;button onClick={() =&gt; setTarget(0)}&gt;Set 0&lt;/button&gt;\n      &lt;button onClick={() =&gt; setTarget(100)}&gt;Set 100&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<p>Note: Because of dependency on <code>rebound</code> you have to import this hook directly like shown above.</p>\n<h2 id="requirements">Requirements</h2>\n<p>Install <a href="https://github.com/facebook/rebound-js"><code>rebound</code></a> peer dependency:</p>\n<pre><code class="language-bash">npm add rebound\n# or\nyarn add rebound</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const currentValue = useSpring(targetValue);\nconst currentValue = useSpring(targetValue, tension, friction);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var input=React.useRef(null);return src_1.useStartTyping((function(){input.current&&input.current.focus()})),React.createElement("div",null,React.createElement("p",null,"Start typing, and below field will get focused."),React.createElement("input",{ref:input}),React.createElement("br",null),React.createElement("hr",null),React.createElement("p",null,"Try focusing below elements and see what happens."),React.createElement("button",null,"When button is focused, it will lose it."),React.createElement("br",null),React.createElement("br",null),React.createElement("input",null),React.createElement("br",null),React.createElement("br",null),React.createElement("textarea",null,"Editable textarea"),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{contentEditable:!0},"Editable DIV"))};react_1.storiesOf("Sensors/useStartTyping",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1080)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestarttyping"><code>useStartTyping</code></h1>\n<p>React sensor hook that fires a callback when user starts typing. Can be used\nto focus default input field on the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useStartTyping} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useStartTyping(() =&gt; alert(&#39;Started typing...&#39;));\n\n  return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),stateSet=["first","second","third","fourth","fifth"],Demo=function Demo(){var _a=src_1.useStateList(stateSet),state=_a.state,prev=_a.prev,next=_a.next,setStateAt=_a.setStateAt,setState=_a.setState,currentIndex=_a.currentIndex,indexInput=react_2.useRef(null),stateInput=react_2.useRef(null);return React.createElement("div",null,React.createElement("pre",null,state," [index: ",currentIndex,"]"),React.createElement("button",{onClick:function onClick(){return prev()}},"prev"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return next()}},"next"),React.createElement("br",null),React.createElement("input",{type:"text",ref:indexInput,style:{width:120}}),React.createElement("button",{onClick:function onClick(){return setStateAt(indexInput.current.value)}},"set state by index"),React.createElement("br",null),React.createElement("input",{type:"text",ref:stateInput,style:{width:120}}),React.createElement("button",{onClick:function onClick(){return setState(stateInput.current.value)}}," set state by value"))};react_1.storiesOf("State/useStateList",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1082)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestatelist"><code>useStateList</code></h1>\n<p>Provides handles for circular iteration over states list.<br>Supports forward and backward iterations and arbitrary position set.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useStateList } from &#39;react-use&#39;;\nimport { useRef } from &#39;react&#39;;\n\nconst stateSet = [&#39;first&#39;, &#39;second&#39;, &#39;third&#39;, &#39;fourth&#39;, &#39;fifth&#39;];\n\nconst Demo = () =&gt; {\n  const { state, prev, next, setStateAt, setState, currentIndex } = useStateList(stateSet);\n  const indexInput = useRef&lt;HTMLInputElement&gt;(null);\n  const stateInput = useRef&lt;HTMLInputElement&gt;(null);\n\n  return (\n    &lt;div&gt;\n      &lt;pre&gt;\n        {state} [index: {currentIndex}]\n      &lt;/pre&gt;\n      &lt;button onClick={() =&gt; prev()}&gt;prev&lt;/button&gt;\n      &lt;br /&gt;\n      &lt;button onClick={() =&gt; next()}&gt;next&lt;/button&gt;\n      &lt;br /&gt;\n      &lt;input type=&quot;text&quot; ref={indexInput} style={{ width: 120 }} /&gt;\n      &lt;button onClick={() =&gt; setStateAt((indexInput.current!.value as unknown) as number)}&gt;set state by index&lt;/button&gt;\n      &lt;br /&gt;\n      &lt;input type=&quot;text&quot; ref={stateInput} style={{ width: 120 }} /&gt;\n      &lt;button onClick={() =&gt; setState(stateInput.current!.value)}&gt; set state by value&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const { state, currentIndex, prev, next, setStateAt, setState } = useStateList&lt;T&gt;(stateSet: T[] = []);</code></pre>\n<p>If <code>stateSet</code> changed, became shorter than before and <code>currentIndex</code> left in shrunk gap - the last element of list will be taken as current.</p>\n<ul>\n<li><strong><code>state</code></strong><em><code>: T</code></em> &mdash; current state value;</li>\n<li><strong><code>currentIndex</code></strong><em><code>: number</code></em> &mdash; current state index;</li>\n<li><strong><code>prev()</code></strong><em><code>: void</code></em> &mdash; switches state to the previous one. If first element selected it will switch to the last one;</li>\n<li><strong><code>next()</code></strong><em><code>: void</code></em> &mdash; switches state to the next one. If last element selected it will switch to the first one;</li>\n<li><strong><code>setStateAt(newIndex: number)</code></strong><em><code>: void</code></em> &mdash; set the arbitrary state by index. Indexes are looped, and can be negative.<br><em>4ex:</em> if list contains 5 elements, attempt to set index 9 will bring use to the 5th element, in case of negative index it will start counting from the right, so -17 will bring us to the 4th element.</li>\n<li><strong><code>setState(state: T)</code></strong><em><code>: void</code></em> &mdash; set the arbitrary state value that exists in <code>stateSet</code>. <em>In case new state does not exists in <code>stateSet</code> an Error will be thrown.</em></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),useStateValidator_1=tslib_1.__importDefault(__webpack_require__(401)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),DemoStateValidator=function DemoStateValidator(s){return[""===s?void 0:1*s%2==0]},Demo=function Demo(){var _a=React.useState(0),state=_a[0],setState=_a[1],isValid=useStateValidator_1.default(state,DemoStateValidator)[0][0];return React.createElement("div",null,React.createElement("div",null,"Below field is valid only if number is even"),React.createElement("input",{type:"number",min:"0",max:"10",value:state,onChange:function onChange(ev){setState(ev.target.value)}}),void 0!==isValid&&React.createElement("span",null,isValid?"Valid!":"Invalid"))};react_1.storiesOf("State/useStateValidator",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1084)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestatevalidator"><code>useStateValidator</code></h1>\n<p>Each time given state changes - validator function is invoked.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-ts">import * as React from &#39;react&#39;;\nimport { useCallback } from &#39;react&#39;;\nimport { useStateValidator } from &#39;react-use&#39;;\n\nconst DemoStateValidator = s =&gt; [s === &#39;&#39; ? null : (s * 1) % 2 === 0];\nconst Demo = () =&gt; {\n  const [state, setState] = React.useState&lt;string | number&gt;(0);\n  const [[isValid]] = useStateValidator(state, DemoStateValidator);\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;Below field is valid only if number is even&lt;/div&gt;\n      &lt;input\n        type=&quot;number&quot;\n        min=&quot;0&quot;\n        max=&quot;10&quot;\n        value={state}\n        onChange={(ev: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n          setState(ev.target.value);\n        }}\n      /&gt;\n      {isValid !== null &amp;&amp; &lt;span&gt;{isValid ? &#39;Valid!&#39; : &#39;Invalid&#39;}&lt;/span&gt;}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [validity, revalidate] = useStateValidator(\n  state: any,\n  validator: (state, setValidity?)=&gt;[boolean|null, ...any[]],\n  initialValidity: any\n);</code></pre>\n<ul>\n<li><strong><code>validity</code></strong><em><code>: [boolean|null, ...any[]]</code></em> result of validity check. First element is strictly nullable boolean, but others can contain arbitrary data;</li>\n<li><strong><code>revalidate</code></strong><em><code>: ()=&gt;void</code></em> runs validator once again</li>\n<li><strong><code>validator</code></strong><em><code>: (state, setValidity?)=&gt;[boolean|null, ...any[]]</code></em> should return an array suitable for validity state described above;<ul>\n<li><code>state</code> - current state;</li>\n<li><code>setValidity</code> - if defined hook will not trigger validity change automatically. Useful for async validators;</li>\n</ul>\n</li>\n<li><code>initialValidity</code> - validity value which set when validity is nt calculated yet;</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(136),__webpack_require__(40),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useStateWithHistory("",10,["hello","world"]),state=_a[0],setState=_a[1],history=_a[2],inputRef=react_2.useRef(null),_b=src_1.useCounter(1,3,1),stepSize=_b[0],setStepSize=_b[1].set,handleFormSubmit=react_2.useCallback((function(e){e.preventDefault(),state!==inputRef.current.value&&setState(inputRef.current.value)}),[state]),handleBackClick=react_2.useCallback((function(e){e.currentTarget.disabled||window.history.back(stepSize)}),[history,stepSize]),handleForwardClick=react_2.useCallback((function(e){e.currentTarget.disabled||window.history.forward(stepSize)}),[history,stepSize]),handleStepSizeChange=react_2.useCallback((function(e){setStepSize(1*e.currentTarget.value)}),[stepSize]);return React.createElement("div",null,React.createElement("div",null,React.createElement("form",{onSubmit:handleFormSubmit,style:{display:"inline-block"}},React.createElement("input",{type:"text",ref:inputRef}),React.createElement("button",null,"Submit new state"))),React.createElement("div",{style:{marginTop:8}},"Current state: ",React.createElement("span",null,state)),React.createElement("div",{style:{marginTop:8}},React.createElement("button",{onClick:handleBackClick,disabled:!window.history.position},"< Back"),React.createElement("button",{onClick:handleForwardClick,disabled:window.history.position>=window.history.window.history.length-1},"Forward >"),"  Step size: ",React.createElement("input",{type:"number",value:stepSize,min:1,max:3,onChange:handleStepSizeChange})),React.createElement("div",{style:{marginTop:8}},React.createElement("div",null,"Current history"),React.createElement("div",{dangerouslySetInnerHTML:{__html:JSON.stringify(window.history.history,null,2).replace(/\n/g,"<br/>").replace(/ /g,"&nbsp;")}})))};react_1.storiesOf("State/useStateWithHistory",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1086)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestatehistory"><code>useStateHistory</code></h1>\n<p>Stores defined amount of previous state values and provides handles to travel through them.</p>\n<h2 id="usage">Usage</h2>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-typescript">const [state, setState, stateHistory] = useStateWithHistory&lt;S = undefined&gt;(\n  initialState?: S | (()=&gt;S),\n  capacity?: number = 10,\n  initialHistory?: S\n);</code></pre>\n<ul>\n<li><strong><code>state</code></strong>, <strong><code>setState</code></strong> and <strong><code>initialState</code></strong> are exactly the same with native React&#39;s <code>useState</code> hook;</li>\n<li><strong><code>capacity</code></strong> - amount of history entries held by storage;</li>\n<li><strong><code>initialHistory</code></strong> - if defined it will be used as initial history value, otherwise history will equal <code>[ initialState ]</code>.  \nInitial state will not be pushed to initial history.<br>If entries amount is greater than <code>capacity</code> parameter it won&#39;t be modified on init but will be trimmed on the next call to <code>setState</code>;</li>\n<li><strong><code>stateHistory</code></strong> - an object containing history state:<ul>\n<li><strong><code>history</code></strong><em><code>: S[]</code></em> - an array holding history entries. <em>It will have the same ref all the time so be careful with that one!</em>;</li>\n<li><strong><code>position</code></strong><em><code>: number</code></em> - current position <em>index</em> in history;</li>\n<li><strong><code>capacity</code></strong><em><code>: number = 10</code></em> - maximum amount of history entries;</li>\n<li><strong><code>back</code></strong><em><code>: (amount?: number) =&gt; void</code></em> - go back in state history, it will cause <code>setState</code> to be invoked and component re-render.\nIf first element of history reached, the call will have no effect;</li>\n<li><strong><code>forward</code></strong><em><code>: (amount?: number) =&gt; void</code></em> - go forward in state history, it will cause <code>setState</code> to be invoked and component re-render.<br>If last element of history is reached, the call will have no effect;</li>\n<li><strong><code>go</code></strong><em><code>: (position: number) =&gt; void</code></em> - go to arbitrary position in history.<br>In case <code>position</code> is non-negative ot will count elements from beginning.\nNegative <code>position</code> will cause elements counting from the end, so <code>go(-2)</code> equals <code>go(history.length - 1)</code>;</li>\n</ul>\n</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=src_1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function onChange(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects/useThrottle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(418)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=src_1.useThrottleFn((function(defaultValue){return defaultValue}),2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function onChange(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects/useThrottleFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(418)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6));function TestComponent(props){void 0===props&&(props={});var ms=props.ms||5e3,_a=src_1.useTimeout(ms),isReady=_a[0],cancel=_a[1];return React.createElement("div",null,isReady()?"I'm reloaded after timeout":"I will be reloaded after "+ms/1e3+"s",!1===isReady()?React.createElement("button",{onClick:cancel},"Cancel"):"")}var Demo=function Demo(){return React.createElement("div",null,React.createElement(TestComponent,null),React.createElement(TestComponent,{ms:1e4}))};react_1.storiesOf("Animation/useTimeout",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1090)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetimeout"><code>useTimeout</code></h1>\n<p>Re-renders the component after a specified number of milliseconds.<br>Provides handles to cancel and/or reset the timeout.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useTimeout } from &#39;react-use&#39;;\n\nfunction TestComponent(props: { ms?: number } = {}) {\n  const ms = props.ms || 5000;\n  const [isReady, cancel] = useTimeout(ms);\n\n  return (\n    &lt;div&gt;\n      { isReady() ? &#39;I\\&#39;m reloaded after timeout&#39; : `I will be reloaded after ${ ms / 1000 }s` }\n      { isReady() === false ? &lt;button onClick={ cancel }&gt;Cancel&lt;/button&gt; : &#39;&#39; }\n    &lt;/div&gt;\n  );\n}\n\nconst Demo = () =&gt; {\n  return (\n    &lt;div&gt;\n      &lt;TestComponent /&gt;\n      &lt;TestComponent ms={ 10000 } /&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [\n    isReady: () =&gt; boolean | null,\n    cancel: () =&gt; void,\n    reset: () =&gt; void,\n] = useTimeout(ms: number = 0);</code></pre>\n<ul>\n<li><strong><code>isReady</code></strong><em><code>:()=&gt;boolean|null</code></em> - function returning current timeout state:<ul>\n<li><code>false</code> - pending re-render</li>\n<li><code>true</code> - re-render performed</li>\n<li><code>null</code> - re-render cancelled</li>\n</ul>\n</li>\n<li><strong><code>cancel</code></strong><em><code>:()=&gt;void</code></em> - cancel the timeout (component will not be re-rendered)</li>\n<li><strong><code>reset</code></strong><em><code>:()=&gt;void</code></em> - reset the timeout</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState("Not called yet"),state=_a[0],setState=_a[1];var _b=src_1.useTimeoutFn((function fn(){setState("called at "+Date.now())}),5e3),isReady=_b[0],cancel=_b[1],reset=_b[2],cancelButtonClick=react_2.useCallback((function(){!1===isReady()?(cancel(),setState("cancelled")):(reset(),setState("Not called yet"))}),[]),readyState=isReady();return React.createElement("div",null,React.createElement("div",null,null!==readyState?"Function will be called in 5 seconds":"Timer cancelled"),React.createElement("button",{onClick:cancelButtonClick}," ",!1===readyState?"cancel":"restart"," timeout"),React.createElement("br",null),React.createElement("div",null,"Function state: ",!1===readyState?"Pending":readyState?"Called":"Cancelled"),React.createElement("div",null,state))};react_1.storiesOf("Animation/useTimeoutFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1092)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetimeoutfn"><code>useTimeoutFn</code></h1>\n<p>Calls given function after specified amount of milliseconds.</p>\n<p>Several thing about it&#39;s work:</p>\n<ul>\n<li>does not re-render component;</li>\n<li>automatically cancel timeout on cancel;</li>\n<li>automatically reset timeout on delay change;</li>\n<li>reset function call will cancel previous timeout;</li>\n<li>timeout will NOT be reset on function change. It will be called within the timeout, you have to reset it on your own when needed. </li>\n</ul>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport { useTimeoutFn } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [state, setState] = React.useState(&#39;Not called yet&#39;);\n\n  function fn() {\n    setState(`called at ${Date.now()}`);\n  }\n\n  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n  const cancelButtonClick = useCallback(() =&gt; {\n    if (isReady() === false) {\n      cancel();\n      setState(`cancelled`);\n    } else {\n      reset();\n      setState(&#39;Not called yet&#39;);\n    }\n  }, []);\n\n  const readyState = isReady();\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;{readyState !== null ? &#39;Function will be called in 5 seconds&#39; : &#39;Timer cancelled&#39;}&lt;/div&gt;\n      &lt;button onClick={cancelButtonClick}&gt; {readyState === false ? &#39;cancel&#39; : &#39;restart&#39;} timeout&lt;/button&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Function state: {readyState === false ? &#39;Pending&#39; : readyState ? &#39;Called&#39; : &#39;Cancelled&#39;}&lt;/div&gt;\n      &lt;div&gt;{state}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [\n    isReady: () =&gt; boolean | null,\n    cancel: () =&gt; void,\n    reset: () =&gt; void,\n] = useTimeoutFn(fn: Function, ms: number = 0);</code></pre>\n<ul>\n<li><strong><code>fn</code></strong><em><code>: Function</code></em> - function that will be called;</li>\n<li><strong><code>ms</code></strong><em><code>: number</code></em> - delay in milliseconds;</li>\n<li><strong><code>isReady</code></strong><em><code>: ()=&gt;boolean|null</code></em> - function returning current timeout state:<ul>\n<li><code>false</code> - pending</li>\n<li><code>true</code> - called</li>\n<li><code>null</code> - cancelled</li>\n</ul>\n</li>\n<li><strong><code>cancel</code></strong><em><code>: ()=&gt;void</code></em> - cancel the timeout</li>\n<li><strong><code>reset</code></strong><em><code>: ()=&gt;void</code></em> - reset the timeout</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(412)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useTitle("Hello world!"),React.createElement(NewTabStory_1.default,null,'Title should be "Hello world!"')};react_1.storiesOf("Side effects/useTitle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1094)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetitle"><code>useTitle</code></h1>\n<p>React side-effect hook that sets title of the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useTitle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useTitle(&#39;Hello world!&#39;);\n\n  return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useToggle(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:toggle},"Toggle"),React.createElement("button",{onClick:function onClick(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function onClick(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State/useToggle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(403)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var t=src_1.useTween();return React.createElement("div",null,"Tween: ",t)};react_1.storiesOf("Animation/useTween",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1097)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetween"><code>useTween</code></h1>\n<p>React animation hook that tweens a number between 0 and 1.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useTween} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const t = useTween();\n\n  return (\n    &lt;div&gt;\n      Tween: {t}\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useTween(easing?: string, ms?: number, delay?: number): number</code></pre>\n<p>Returns a number that begins with 0 and ends with 1 when animation ends.</p>\n<ul>\n<li><code>easing</code> &mdash; one of the valid <a href="https://github.com/streamich/ts-easing/blob/master/src/index.ts">easing names</a>, defaults to <code>inCirc</code>.</li>\n<li><code>ms</code> &mdash; milliseconds for how long to keep re-rendering component, defaults to <code>200</code>.</li>\n<li><code>delay</code> &mdash; delay in milliseconds after which to start re-rendering component, defaults to <code>0</code>.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){return src_1.useUnmount((function(){return alert("UNMOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useUnmount()")," hook can be used to perform side-effects when component unmounts. This component will alert you when it is un-mounted.")};react_1.storiesOf("Lifecycle/useUnmount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1099)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useunmount"><code>useUnmount</code></h1>\n<p>React lifecycle hook that calls a function when the component will unmount. Use <code>useLifecycles</code> if you need both a mount and unmount function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUnmount} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  useUnmount(() =&gt; alert(&#39;UNMOUNTED&#39;));\n  return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useUnmount(fn: () =&gt; void | undefined);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(90),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var update=src_1.useUpdate();return React.createElement(React.Fragment,null,React.createElement("div",null,"Time: ",Date.now()),React.createElement("button",{onClick:update},"Update"))};react_1.storiesOf("Animation/useUpdate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1101)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupdate"><code>useUpdate</code></h1>\n<p>React utility hook that returns a function that forces component\nto re-render when called.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUpdate} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const update = useUpdate();\n  return (\n    &lt;&gt;\n      &lt;div&gt;Time: {Date.now()}&lt;/div&gt;\n      &lt;button onClick={update}&gt;Update&lt;/button&gt;\n    &lt;/&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(!1),didUpdate=_b[0],setDidUpdate=_b[1];return src_1.useUpdateEffect((function(){setDidUpdate(!0)}),[count]),React.createElement("div",null,React.createElement("button",{onClick:function onClick(){return setCount((function(currentCount){return currentCount+1}))}},"Count: ",count),React.createElement("p",null,"Updated: ",didUpdate))};react_1.storiesOf("Lifecycle/useUpdateEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1103)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupdateeffect"><code>useUpdateEffect</code></h1>\n<p>React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the <code>useEffect</code> hook.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React from &#39;react&#39;\nimport {useUpdateEffect} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; {\n      setCount(count =&gt; count + 1)\n    }, 1000)\n\n    return () =&gt; {\n      clearInterval(interval)\n    }\n  }, [])\n\n  useUpdateEffect(() =&gt; {\n    console.log(&#39;count&#39;, count) // will only show 1 and beyond\n\n    return () =&gt; { // *OPTIONAL*\n      // do something on unmount\n    }\n  }) // you can include deps array if necessary\n\n  return &lt;div&gt;Count: {count}&lt;/div&gt;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),__webpack_require__(51),__webpack_require__(13),__webpack_require__(97),__webpack_require__(54),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function Demo(){var _a=src_1.useUpsert((function comparisonFunction(a,b){return a.id===b.id}),initialItems),list=_a[0],_b=_a[1],set=_b.set,upsert=_b.upsert,remove=_b.remove;return React.createElement("div",{style:{display:"inline-flex",flexDirection:"column"}},list.map((function(item,index){return React.createElement("div",{key:item.id},React.createElement("input",{value:item.text,onChange:function onChange(e){return upsert(tslib_1.__assign(tslib_1.__assign({},item),{text:e.target.value}))}}),React.createElement("button",{onClick:function onClick(){return remove(index)}},"Remove"))})),React.createElement("button",{onClick:function onClick(){return upsert({id:(list.length+1).toString(),text:""})}},"Add item"),React.createElement("button",{onClick:function onClick(){return set([])}},"Reset"))};react_1.storiesOf("State/useUpsert",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1105)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupsert"><code>useUpsert</code></h1>\n<blockquote>\n<p>DEPRECATED!  \nUse <code>useList</code> hook&#39;s upsert action instead</p>\n</blockquote>\n<p>Superset of <a href="./useList.md"><code>useList</code></a>. Provides an additional method to upsert (update or insert) an element into the list.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUpsert} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const comparisonFunction = (a: DemoType, b: DemoType) =&gt; {\n    return a.id === b.id;\n  };\n  const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n  return (\n    &lt;div style={{ display: &#39;inline-flex&#39;, flexDirection: &#39;column&#39; }}&gt;\n      {list.map((item: DemoType, index: number) =&gt; (\n        &lt;div key={item.id}&gt;\n          &lt;input value={item.text} onChange={e =&gt; upsert({ ...item, text: e.target.value })} /&gt;\n          &lt;button onClick={() =&gt; remove(index)}&gt;Remove&lt;/button&gt;\n        &lt;/div&gt;\n      ))}\n      &lt;button onClick={() =&gt; upsert({ id: (list.length + 1).toString(), text: &#39;&#39; })}&gt;Add item&lt;/button&gt;\n      &lt;button onClick={() =&gt; set([])}&gt;Reset&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="related-hooks">Related hooks</h2>\n<ul>\n<li><a href="./useList.md">useList</a></li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useToggle(!1),vibrating=_a[0],toggleVibrating=_a[1];return src_1.useVibrate(vibrating,[300,100,200,100,1e3,300]),React.createElement("div",null,React.createElement("button",{onClick:toggleVibrating},vibrating?"Stop":"Vibrate"))};react_1.storiesOf("UI/useVibrate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1107)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usevibrate"><code>useVibrate</code></h1>\n<p>React UI hook to provide physical feedback with device vibration hardware using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API">Vibration API</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useVibrate} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [vibrating, toggleVibrating] = useToggle(false);\n\n  useVibrate(vibrating, [300, 100, 200, 100, 1000, 300], false);\n\n  return (\n    &lt;div&gt;\n      &lt;button onClick={toggleVibrating}&gt;{vibrating ? &#39;Stop&#39; : &#39;Vibrate&#39;}&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useVibrate(\n  enabled: boolean = true,\n  pattern: number | number[] = [1000, 1000],\n  loop: boolean = true\n): void;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useVideo(React.createElement("video",{src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",autoPlay:!0})),video=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,video,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function onClick(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function onClick(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function onClick(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function onClick(){return controls.seek(state.time+5)}},"+5 sec"))};react_1.storiesOf("UI/useVideo",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1109)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usevideo"><code>useVideo</code></h1>\n<p>Creates <code>&lt;video&gt;</code> element, tracks its state and exposes playback controls.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useVideo} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const [video, state, controls, ref] = useVideo(\n    &lt;video src=&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot; autoPlay /&gt;\n  );\n\n  return (\n    &lt;div&gt;\n      {video}\n      &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n      &lt;button onClick={controls.pause}&gt;Pause&lt;/button&gt;\n      &lt;button onClick={controls.play}&gt;Play&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={controls.mute}&gt;Mute&lt;/button&gt;\n      &lt;button onClick={controls.unmute}&gt;Un-mute&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={() =&gt; controls.volume(.1)}&gt;Volume: 10%&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.volume(.5)}&gt;Volume: 50%&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.volume(1)}&gt;Volume: 100%&lt;/button&gt;\n      &lt;br/&gt;\n      &lt;button onClick={() =&gt; controls.seek(state.time - 5)}&gt;-5 sec&lt;/button&gt;\n      &lt;button onClick={() =&gt; controls.seek(state.time + 5)}&gt;+5 sec&lt;/button&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(&lt;video {...props}/&gt;);</code></pre>\n<p><code>video</code> is React&#39;s <code>&lt;video&gt;</code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx">&lt;div&gt;{video}&lt;/div&gt;</code></pre>\n<p><code>state</code> tracks the state of the video and has the following shape:</p>\n<pre><code class="language-json">{\n  &quot;buffered&quot;: [\n    {\n      &quot;start&quot;: 0,\n      &quot;end&quot;: 425.952625\n    }\n  ],\n  &quot;time&quot;: 5.244996,\n  &quot;duration&quot;: 425.952625,\n  &quot;paused&quot;: false,\n  &quot;muted&quot;: false,\n  &quot;volume&quot;: 1\n}</code></pre>\n<p><code>controls</code> is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:</p>\n<pre><code class="language-ts">interface AudioControls {\n  play: () =&gt; Promise&lt;void&gt; | void;\n  pause: () =&gt; void;\n  mute: () =&gt; void;\n  unmute: () =&gt; void;\n  volume: (volume: number) =&gt; void;\n  seek: (time: number) =&gt; void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code>&lt;video&gt;</code> element, you can access the element by\n<code>ref.current</code>, note that it may be <code>null</code>.</p>\n<p>And finally, <code>props</code> &mdash; all props that <code>&lt;video&gt;</code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useWindowScroll(),x=_a.x,y=_a.y;return React.createElement("div",{style:{width:"200vw",height:"200vh"}},React.createElement("div",{style:{position:"fixed",left:0,right:0}},React.createElement("div",null,"x: ",x),React.createElement("div",null,"y: ",y)))};react_1.storiesOf("Sensors/useWindowScroll",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1111)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usewindowscroll"><code>useWindowScroll</code></h1>\n<p>React sensor hook that re-renders on window scroll.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useWindowScroll} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const {x, y} = useWindowScroll();\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;x: {x}&lt;/div&gt;\n      &lt;div&gt;y: {y}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(1),Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(2),react_1=__webpack_require__(4),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(7),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(6)),Demo=function Demo(){var _a=src_1.useWindowSize(),width=_a.width,height=_a.height;return React.createElement("div",null,React.createElement("div",null,"width: ",width),React.createElement("div",null,"height: ",height))};react_1.storiesOf("Sensors/useWindowSize",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1113)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(3)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usewindowsize"><code>useWindowSize</code></h1>\n<p>React sensor hook that tracks dimensions of the browser window.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useWindowSize} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n  const {width, height} = useWindowSize();\n\n  return (\n    &lt;div&gt;\n      &lt;div&gt;width: {width}&lt;/div&gt;\n      &lt;div&gt;height: {height}&lt;/div&gt;\n    &lt;/div&gt;\n  );\n};</code></pre>\n'}],[[429,1,2]]]);