diff --git a/iframe.html b/iframe.html index a9b67dfd..3e44e3a9 100644 --- a/iframe.html +++ b/iframe.html @@ -130,4 +130,4 @@ - window['FRAMEWORK_OPTIONS'] = {}; \ No newline at end of file + window['FRAMEWORK_OPTIONS'] = {}; \ No newline at end of file diff --git a/main.2323b466.iframe.bundle.js b/main.2323b466.iframe.bundle.js new file mode 100644 index 00000000..d3e89424 --- /dev/null +++ b/main.2323b466.iframe.bundle.js @@ -0,0 +1 @@ +(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;_iarr.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='

useToggle

\n

React state hook that tracks value of a boolean.

\n

useBoolean is an alias for useToggle.

\n

Usage

\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useDrop and useDropArea

\n

Triggers on file, link drop and copy-paste.

\n

useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.

\n

Usage

\n

useDrop:

\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n

useDropArea:

\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\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='

useHover and useHoverDirty

\n

React UI sensor hooks that track if some element is being hovered\nby a mouse.

\n\n

Usage

\n
import {useHover} from 'react-use';\n\nconst Demo = () => {\n  const element = (hovered) =>\n    <div>\n      Hover me! {hovered && 'Thanks!'}\n    </div>;\n  const [hoverable, hovered] = useHover(element);\n\n  return (\n    <div>\n      {hoverable}\n      <div>{hovered ? 'HOVERED' : ''}</div>\n    </div>\n  );\n};
\n

Reference

\n
const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) => reactElement);\nconst isHovering = useHoverDirty(ref);
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useMouse and useMouseHovered

\n

React sensor hooks that re-render on mouse position changes. useMouse simply tracks\nmouse position; useMouseHovered allows you to specify extra options:

\n\n

Usage

\n
import {useMouse} from 'react-use';\n\nconst Demo = () => {\n  const ref = React.useRef(null);\n  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n  return (\n    <div ref={ref}>\n      <div>Mouse position in document - x:{docX} y:{docY}</div>\n      <div>Mouse position in element - x:{elX} y:{elY}</div>\n      <div>Element position- x:{posX} y:{posY}</div>\n      <div>Element dimensions - {elW}x{elH}</div>\n    </div>\n  );\n};
\n

Reference

\n
useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useScroll

\n

React sensor hook that re-renders when the scroll position in a DOM element changes.

\n

Usage

\n
import {useScroll} from 'react-use';\n\nconst Demo = () => {\n  const scrollRef = React.useRef(null);\n  const {x, y} = useScroll(scrollRef);\n\n  return (\n    <div ref={scrollRef}>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n

Reference

\n
useScroll(ref: RefObject<HTMLElement>);
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useThrottle and useThrottleFn

\n

React hooks that throttle.

\n

Usage

\n
import React, { useState } from 'react';\nimport { useThrottle, useThrottleFn } from 'react-use';\n\nconst Demo = ({value}) => {\n  const throttledValue = useThrottle(value);\n  // const throttledValue = useThrottleFn(value => value, 200, [value]);\n\n  return (\n    <>\n      <div>Value: {value}</div>\n      <div>Throttled value: {throttledValue}</div>\n    </>\n  );\n};
\n

Reference

\n
useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);
\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",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=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,_a=react_1.useState((function(){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}})),state=_a[0],setState=_a[1],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;_i1?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.currentcapacity&&(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='

createBreakpoint

\n

Usage

\n

use default breakpoint

\n

laptopL: 1440, laptop: 1024, tablet: 768

\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n

use custom breakpoint

\n

XL: 1280, L: 768, S: 350

\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\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='

useGlobalState

\n

A React hook that creates a globally shared state.

\n

Usage

\n
const useGlobalValue = createGlobalState<number>(0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\n

It also allows initializing the state with a function and using a function in the setState:

\n
const useGlobalValue = createGlobalState<number>(() => 0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value => value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value => value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\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='

createMemo

\n

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.

\n

Usage

\n
import {createMemo} from 'react-use';\n\nconst fibonacci = n => {\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 = () => {\n  const result = useMemoFibonacci(10);\n\n  return (\n    <div>\n      fib(10) = {result}\n    </div>\n  );\n};
\n

Reference

\n
const useMemoFn = createMemo(fn);
\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='

createReducer

\n

Factory for reducer hooks with custom middleware with an identical API as React's useReducer. Compatible with Redux middleware.

\n

Usage

\n

An example with redux-thunk and redux-logger.

\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n

Reference

\n
const useMiddlewareReducer = createReducer(...middlewares);
\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='

createReducerContext

\n

Factory for react context hooks that will behave just like React's useReducer except the state will be shared among all components in the provider.

\n

This allows you to have a shared state that any component can update easily.

\n

Usage

\n

An example with two counters that shared the same value.

\n
import { createReducerContext } from 'react-use';\n\ntype Action = 'increment' | 'decrement';\n\nconst reducer = (state: number, action: Action) => {\n  switch (action) {\n    case 'increment':\n      return state + 1;\n    case 'decrement':\n      return state - 1;\n    default:\n      throw new Error();\n  }\n};\n\nconst [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);\n\nconst ComponentA = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component A &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component B &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedCounterProvider>\n      <p>Those two counters share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedCounterProvider>\n  );\n};
\n

Reference

\n
const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial state for each Provider\n  <SharedStateProvider initialState={overrideInitialState}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, dispatch] = useSharedState();\n\n  // ...\n}
\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='

createStateContext

\n

Factory for react context hooks that will behave just like React's useState except the state will be shared among all components in the provider.

\n

This allows you to have a shared state that any component can update easily.

\n

Usage

\n

An example with a shared text between two input fields.

\n
import { createStateContext } from 'react-use';\n\nconst [useSharedText, SharedTextProvider] = createStateContext('');\n\nconst ComponentA = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component A:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component B:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedTextProvider>\n      <p>Those two fields share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedTextProvider>\n  );\n};
\n

Reference

\n
const [useSharedState, SharedStateProvider] = createStateContext(initialValue);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial value for each Provider\n  <SharedStateProvider initialValue={overrideInitialValue}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, setSharedState] = useSharedState();\n\n  // ...\n}
\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='

useAsync

\n

React hook that resolves an async function or a function that returns\na promise;

\n

Usage

\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n

Reference

\n
useAsync(fn, args?: any[]);
\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='

useAsyncFn

\n

React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.

\n

Usage

\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n

Reference

\n
useAsyncFn<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
\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='

useAsyncRetry

\n

Uses useAsync with an additional retry method to easily retry/refresh the async function;

\n

Usage

\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n

Reference

\n
useAsyncRetry(fn, args?: any[]);
\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='

useAudio

\n

Creates <audio> element, tracks its state and exposes playback controls.

\n

Usage

\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n

Reference

\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n

audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:

\n
<div>{audio}</div>
\n

state tracks the state of the audio and has the following shape:

\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n

controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:

\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n

ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.

\n

And finally, props — all props that <audio> accepts.

\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='

useBattery

\n

React sensor hook that tracks battery status.

\n
\n

Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.

\n
\n

Usage

\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n

Reference

\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\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='

useBeforeUnload

\n

React side-effect hook that shows browser alert when user try to reload or close the page.

\n

Usage

\n

Boolean check

\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n

Function check

\n

Note: Since every dirtyFn change registers a new callback, you should use\nrefs\nif your test value changes often.

\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  const dirtyFn = useCallback(() => {\n    return dirty;\n  }, [dirty]);\n  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\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='

useClickAway

\n

React UI hook that triggers a callback when user\nclicks outside the target element.

\n

Usage

\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n

Reference

\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\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='

useCookie

\n

React hook that returns the current value of a cookie, a callback to update the cookie\nand a callback to delete the cookie.

\n

Usage

\n
import { useCookie } from "react-use";\n\nconst Demo = () => {\n  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");\n  const [counter, setCounter] = useState(1);\n\n  useEffect(() => {\n    deleteCookie();\n  }, []);\n\n  const updateCookieHandler = () => {\n    updateCookie(`my-awesome-cookie-${counter}`);\n    setCounter(c => c + 1);\n  };\n\n  return (\n    <div>\n      <p>Value: {value}</p>\n      <button onClick={updateCookieHandler}>Update Cookie</button>\n      <br />\n      <button onClick={deleteCookie}>Delete Cookie</button>\n    </div>\n  );\n};
\n

Reference

\n
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
\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='

useCopyToClipboard

\n

Copy text to a user's clipboard.

\n

Usage

\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n

Reference

\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — caught error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\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='

useCounter

\n

React state hook that tracks a numeric value.

\n

useNumber is an alias for useCounter.

\n

Usage

\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\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    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n

Reference

\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, min: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\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='

useCss

\n

React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.

\n

Usage

\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n

Examples

\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\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=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,"
").replace(/ /g," ")}})))};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='

useStateHistory

\n

Stores defined amount of previous state values and provides handles to travel through them.

\n

Usage

\n

Reference

\n
const [state, setState, stateHistory] = useStateWithHistory<S = undefined>(\n  initialState?: S | (()=>S),\n  capacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • capacity - amount of history entries held by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equal [ initialState ]. \nInitial state will not be pushed to initial history.
    If entries amount is greater than capacity parameter it won't be modified on init but will be trimmed on the next call to setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. It will have the same ref all the time so be careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState to be invoked and component re-render.\nIf first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState to be invoked and component re-render.
      If last element of history is reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\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='

useTimeout

\n

Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.

\n

Usage

\n
import { useTimeout } from 'react-use';\n\nfunction TestComponent(props: { ms?: number } = {}) {\n  const ms = props.ms || 5000;\n  const [isReady, cancel] = useTimeout(ms);\n\n  return (\n    <div>\n      { isReady() ? 'I\\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }\n      { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }\n    </div>\n  );\n}\n\nconst Demo = () => {\n  return (\n    <div>\n      <TestComponent />\n      <TestComponent ms={ 10000 } />\n    </div>\n  );\n};
\n

Reference

\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeout(ms: number = 0);
\n
    \n
  • isReady:()=>boolean|null - function returning current timeout state:
      \n
    • false - pending re-render
      • \n
    • true - re-render performed
      • \n
    • null - re-render cancelled
      • \n
    \n
    • \n
  • cancel:()=>void - cancel the timeout (component will not be re-rendered)
    • \n
  • reset:()=>void - reset the timeout
    • \n
\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='

useTimeoutFn

\n

Calls given function after specified amount of milliseconds.

\n

Several thing about it's work:

\n
    \n
  • does not re-render component;
    • \n
  • automatically cancel timeout on cancel;
    • \n
  • automatically reset timeout on delay change;
    • \n
  • reset function call will cancel previous timeout;
    • \n
  • 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.
    • \n
\n

Usage

\n
import * as React from 'react';\nimport { useTimeoutFn } from 'react-use';\n\nconst Demo = () => {\n  const [state, setState] = React.useState('Not called yet');\n\n  function fn() {\n    setState(`called at ${Date.now()}`);\n  }\n\n  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n  const cancelButtonClick = useCallback(() => {\n    if (isReady() === false) {\n      cancel();\n      setState(`cancelled`);\n    } else {\n      reset();\n      setState('Not called yet');\n    }\n  }, []);\n\n  const readyState = isReady();\n\n  return (\n    <div>\n      <div>{readyState !== null ? 'Function will be called in 5 seconds' : 'Timer cancelled'}</div>\n      <button onClick={cancelButtonClick}> {readyState === false ? 'cancel' : 'restart'} timeout</button>\n      <br />\n      <div>Function state: {readyState === false ? 'Pending' : readyState ? 'Called' : 'Cancelled'}</div>\n      <div>{state}</div>\n    </div>\n  );\n};
\n

Reference

\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeoutFn(fn: Function, ms: number = 0);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • isReady: ()=>boolean|null - function returning current timeout state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the timeout
    • \n
  • reset: ()=>void - reset the timeout
    • \n
\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='

useTitle

\n

React side-effect hook that sets title of the page.

\n

Usage

\n
import {useTitle} from 'react-use';\n\nconst Demo = () => {\n  useTitle('Hello world!');\n\n  return null;\n};
\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='

useTween

\n

React animation hook that tweens a number between 0 and 1.

\n

Usage

\n
import {useTween} from 'react-use';\n\nconst Demo = () => {\n  const t = useTween();\n\n  return (\n    <div>\n      Tween: {t}\n    </div>\n  );\n};
\n

Reference

\n
useTween(easing?: string, ms?: number, delay?: number): number
\n

Returns a number that begins with 0 and ends with 1 when animation ends.

\n
    \n
  • easing — one of the valid easing names, defaults to inCirc.
    • \n
  • ms — milliseconds for how long to keep re-rendering component, defaults to 200.
    • \n
  • delay — delay in milliseconds after which to start re-rendering component, defaults to 0.
    • \n
\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='

useUnmount

\n

React lifecycle hook that calls a function when the component will unmount. Use useLifecycles if you need both a mount and unmount function.

\n

Usage

\n
import {useUnmount} from 'react-use';\n\nconst Demo = () => {\n  useUnmount(() => alert('UNMOUNTED'));\n  return null;\n};
\n

Reference

\n
useUnmount(fn: () => void | undefined);
\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='

useUpdate

\n

React utility hook that returns a function that forces component\nto re-render when called.

\n

Usage

\n
import {useUpdate} from 'react-use';\n\nconst Demo = () => {\n  const update = useUpdate();\n  return (\n    <>\n      <div>Time: {Date.now()}</div>\n      <button onClick={update}>Update</button>\n    </>\n  );\n};
\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='

useUpdateEffect

\n

React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the useEffect hook.

\n

Usage

\n
import React from 'react'\nimport {useUpdateEffect} from 'react-use';\n\nconst Demo = () => {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setCount(count => count + 1)\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    console.log('count', count) // will only show 1 and beyond\n\n    return () => { // *OPTIONAL*\n      // do something on unmount\n    }\n  }) // you can include deps array if necessary\n\n  return <div>Count: {count}</div>\n};
\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='

useUpsert

\n
\n

DEPRECATED! \nUse useList hook's upsert action instead

\n
\n

Superset of useList. Provides an additional method to upsert (update or insert) an element into the list.

\n

Usage

\n
import {useUpsert} from 'react-use';\n\nconst Demo = () => {\n  const comparisonFunction = (a: DemoType, b: DemoType) => {\n    return a.id === b.id;\n  };\n  const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n  return (\n    <div style={{ display: 'inline-flex', flexDirection: 'column' }}>\n      {list.map((item: DemoType, index: number) => (\n        <div key={item.id}>\n          <input value={item.text} onChange={e => upsert({ ...item, text: e.target.value })} />\n          <button onClick={() => remove(index)}>Remove</button>\n        </div>\n      ))}\n      <button onClick={() => upsert({ id: (list.length + 1).toString(), text: '' })}>Add item</button>\n      <button onClick={() => set([])}>Reset</button>\n    </div>\n  );\n};
\n\n\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='

useVibrate

\n

React UI hook to provide physical feedback with device vibration hardware using the Vibration API.

\n

Usage

\n
import {useVibrate} from 'react-use';\n\nconst Demo = () => {\n  const [vibrating, toggleVibrating] = useToggle(false);\n\n  useVibrate(vibrating, [300, 100, 200, 100, 1000, 300], false);\n\n  return (\n    <div>\n      <button onClick={toggleVibrating}>{vibrating ? 'Stop' : 'Vibrate'}</button>\n    </div>\n  );\n};
\n

Reference

\n
useVibrate(\n  enabled: boolean = true,\n  pattern: number | number[] = [1000, 1000],\n  loop: boolean = true\n): void;
\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='

useVideo

\n

Creates <video> element, tracks its state and exposes playback controls.

\n

Usage

\n
import {useVideo} from 'react-use';\n\nconst Demo = () => {\n  const [video, state, controls, ref] = useVideo(\n    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n  );\n\n  return (\n    <div>\n      {video}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n

Reference

\n
const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(<video {...props}/>);
\n

video is React's <video> element that you have to insert somewhere in your\nrender tree, for example:

\n
<div>{video}</div>
\n

state tracks the state of the video and has the following shape:

\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n

controls is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:

\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n

ref is a React reference to HTML <video> element, you can access the element by\nref.current, note that it may be null.

\n

And finally, props — all props that <video> accepts.

\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='

useWindowScroll

\n

React sensor hook that re-renders on window scroll.

\n

Usage

\n
import {useWindowScroll} from 'react-use';\n\nconst Demo = () => {\n  const {x, y} = useWindowScroll();\n\n  return (\n    <div>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\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='

useWindowSize

\n

React sensor hook that tracks dimensions of the browser window.

\n

Usage

\n
import {useWindowSize} from 'react-use';\n\nconst Demo = () => {\n  const {width, height} = useWindowSize();\n\n  return (\n    <div>\n      <div>width: {width}</div>\n      <div>height: {height}</div>\n    </div>\n  );\n};
\n'}],[[429,1,2]]]); \ No newline at end of file diff --git a/main.2a3d6956.iframe.bundle.js b/main.2a3d6956.iframe.bundle.js deleted file mode 100644 index 8dc9fec0..00000000 --- a/main.2a3d6956.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(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;_iarr.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='

useToggle

\n

React state hook that tracks value of a boolean.

\n

useBoolean is an alias for useToggle.

\n

Usage

\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useDrop and useDropArea

\n

Triggers on file, link drop and copy-paste.

\n

useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.

\n

Usage

\n

useDrop:

\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n

useDropArea:

\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\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='

useHover and useHoverDirty

\n

React UI sensor hooks that track if some element is being hovered\nby a mouse.

\n
    \n
  • useHover accepts a React element or a function that returns one,\nuseHoverDirty accepts React ref.
    • \n
  • useHover sets react onMouseEnter and onMouseLeave events,\nuseHoverDirty sets DOM onmouseover and onmouseout events.
    • \n
\n

Usage

\n
import {useHover} from 'react-use';\n\nconst Demo = () => {\n  const element = (hovered) =>\n    <div>\n      Hover me! {hovered && 'Thanks!'}\n    </div>;\n  const [hoverable, hovered] = useHover(element);\n\n  return (\n    <div>\n      {hoverable}\n      <div>{hovered ? 'HOVERED' : ''}</div>\n    </div>\n  );\n};
\n

Reference

\n
const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) => reactElement);\nconst isHovering = useHoverDirty(ref);
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useMouse and useMouseHovered

\n

React sensor hooks that re-render on mouse position changes. useMouse simply tracks\nmouse position; useMouseHovered allows you to specify extra options:

\n
    \n
  • bound — to bind mouse coordinates within the element
    • \n
  • whenHovered — whether to attach mousemove event handler only when user hovers over the element
    • \n
\n

Usage

\n
import {useMouse} from 'react-use';\n\nconst Demo = () => {\n  const ref = React.useRef(null);\n  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n  return (\n    <div ref={ref}>\n      <div>Mouse position in document - x:{docX} y:{docY}</div>\n      <div>Mouse position in element - x:{elX} y:{elY}</div>\n      <div>Element position- x:{posX} y:{posY}</div>\n      <div>Element dimensions - {elW}x{elH}</div>\n    </div>\n  );\n};
\n

Reference

\n
useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useScroll

\n

React sensor hook that re-renders when the scroll position in a DOM element changes.

\n

Usage

\n
import {useScroll} from 'react-use';\n\nconst Demo = () => {\n  const scrollRef = React.useRef(null);\n  const {x, y} = useScroll(scrollRef);\n\n  return (\n    <div ref={scrollRef}>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n

Reference

\n
useScroll(ref: RefObject<HTMLElement>);
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='

useThrottle and useThrottleFn

\n

React hooks that throttle.

\n

Usage

\n
import React, { useState } from 'react';\nimport { useThrottle, useThrottleFn } from 'react-use';\n\nconst Demo = ({value}) => {\n  const throttledValue = useThrottle(value);\n  // const throttledValue = useThrottleFn(value => value, 200, [value]);\n\n  return (\n    <>\n      <div>Value: {value}</div>\n      <div>Throttled value: {throttledValue}</div>\n    </>\n  );\n};
\n

Reference

\n
useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);
\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",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=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,_a=react_1.useState((function(){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}})),state=_a[0],setState=_a[1],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;_i1?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&&(historyPosition.currentcapacity&&(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='

createBreakpoint

\n

Usage

\n

use default breakpoint

\n

laptopL: 1440, laptop: 1024, tablet: 768

\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n

use custom breakpoint

\n

XL: 1280, L: 768, S: 350

\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\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='

useGlobalState

\n

A React hook that creates a globally shared state.

\n

Usage

\n
const useGlobalValue = createGlobalState<number>(0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\n

It also allows initializing the state with a function and using a function in the setState:

\n
const useGlobalValue = createGlobalState<number>(() => 0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value => value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value => value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\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='

createMemo

\n

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.

\n

Usage

\n
import {createMemo} from 'react-use';\n\nconst fibonacci = n => {\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 = () => {\n  const result = useMemoFibonacci(10);\n\n  return (\n    <div>\n      fib(10) = {result}\n    </div>\n  );\n};
\n

Reference

\n
const useMemoFn = createMemo(fn);
\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='

createReducer

\n

Factory for reducer hooks with custom middleware with an identical API as React's useReducer. Compatible with Redux middleware.

\n

Usage

\n

An example with redux-thunk and redux-logger.

\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n

Reference

\n
const useMiddlewareReducer = createReducer(...middlewares);
\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='

createReducerContext

\n

Factory for react context hooks that will behave just like React's useReducer except the state will be shared among all components in the provider.

\n

This allows you to have a shared state that any component can update easily.

\n

Usage

\n

An example with two counters that shared the same value.

\n
import { createReducerContext } from 'react-use';\n\ntype Action = 'increment' | 'decrement';\n\nconst reducer = (state: number, action: Action) => {\n  switch (action) {\n    case 'increment':\n      return state + 1;\n    case 'decrement':\n      return state - 1;\n    default:\n      throw new Error();\n  }\n};\n\nconst [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);\n\nconst ComponentA = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component A &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component B &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedCounterProvider>\n      <p>Those two counters share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedCounterProvider>\n  );\n};
\n

Reference

\n
const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial state for each Provider\n  <SharedStateProvider initialState={overrideInitialState}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, dispatch] = useSharedState();\n\n  // ...\n}
\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='

createStateContext

\n

Factory for react context hooks that will behave just like React's useState except the state will be shared among all components in the provider.

\n

This allows you to have a shared state that any component can update easily.

\n

Usage

\n

An example with a shared text between two input fields.

\n
import { createStateContext } from 'react-use';\n\nconst [useSharedText, SharedTextProvider] = createStateContext('');\n\nconst ComponentA = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component A:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component B:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedTextProvider>\n      <p>Those two fields share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedTextProvider>\n  );\n};
\n

Reference

\n
const [useSharedState, SharedStateProvider] = createStateContext(initialValue);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial value for each Provider\n  <SharedStateProvider initialValue={overrideInitialValue}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, setSharedState] = useSharedState();\n\n  // ...\n}
\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='

useAsync

\n

React hook that resolves an async function or a function that returns\na promise;

\n

Usage

\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n

Reference

\n
useAsync(fn, args?: any[]);
\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='

useAsyncFn

\n

React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.

\n

Usage

\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n

Reference

\n
useAsyncFn<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
\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='

useAsyncRetry

\n

Uses useAsync with an additional retry method to easily retry/refresh the async function;

\n

Usage

\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n

Reference

\n
useAsyncRetry(fn, args?: any[]);
\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='

useAudio

\n

Creates <audio> element, tracks its state and exposes playback controls.

\n

Usage

\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n

Reference

\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n

audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:

\n
<div>{audio}</div>
\n

state tracks the state of the audio and has the following shape:

\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n

controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:

\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n

ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.

\n

And finally, props — all props that <audio> accepts.

\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='

useBattery

\n

React sensor hook that tracks battery status.

\n
\n

Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.

\n
\n

Usage

\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n

Reference

\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\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='

useBeforeUnload

\n

React side-effect hook that shows browser alert when user try to reload or close the page.

\n

Usage

\n

Boolean check

\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n

Function check

\n

Note: Since every dirtyFn change registers a new callback, you should use\nrefs\nif your test value changes often.

\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  const dirtyFn = useCallback(() => {\n    return dirty;\n  }, [dirty]);\n  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\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='

useClickAway

\n

React UI hook that triggers a callback when user\nclicks outside the target element.

\n

Usage

\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n

Reference

\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\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='

useCookie

\n

React hook that returns the current value of a cookie, a callback to update the cookie\nand a callback to delete the cookie.

\n

Usage

\n
import { useCookie } from "react-use";\n\nconst Demo = () => {\n  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");\n  const [counter, setCounter] = useState(1);\n\n  useEffect(() => {\n    deleteCookie();\n  }, []);\n\n  const updateCookieHandler = () => {\n    updateCookie(`my-awesome-cookie-${counter}`);\n    setCounter(c => c + 1);\n  };\n\n  return (\n    <div>\n      <p>Value: {value}</p>\n      <button onClick={updateCookieHandler}>Update Cookie</button>\n      <br />\n      <button onClick={deleteCookie}>Delete Cookie</button>\n    </div>\n  );\n};
\n

Reference

\n
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
\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='

useCopyToClipboard

\n

Copy text to a user's clipboard.

\n

Usage

\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n

Reference

\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — caught error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\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='

useCounter

\n

React state hook that tracks a numeric value.

\n

useNumber is an alias for useCounter.

\n

Usage

\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\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    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n

Reference

\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, min: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\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='

useCss

\n

React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.

\n

Usage

\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n

Examples

\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\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=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,"
").replace(/ /g," ")}})))};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='

useStateHistory

\n

Stores defined amount of previous state values and provides handles to travel through them.

\n

Usage

\n

Reference

\n
const [state, setState, stateHistory] = useStateWithHistory<S = undefined>(\n  initialState?: S | (()=>S),\n  capacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • capacity - amount of history entries held by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equal [ initialState ]. \nInitial state will not be pushed to initial history.
    If entries amount is greater than capacity parameter it won't be modified on init but will be trimmed on the next call to setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. It will have the same ref all the time so be careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState to be invoked and component re-render.\nIf first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState to be invoked and component re-render.
      If last element of history is reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\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='

useTimeout

\n

Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.

\n

Usage

\n
import { useTimeout } from 'react-use';\n\nfunction TestComponent(props: { ms?: number } = {}) {\n  const ms = props.ms || 5000;\n  const [isReady, cancel] = useTimeout(ms);\n\n  return (\n    <div>\n      { isReady() ? 'I\\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }\n      { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }\n    </div>\n  );\n}\n\nconst Demo = () => {\n  return (\n    <div>\n      <TestComponent />\n      <TestComponent ms={ 10000 } />\n    </div>\n  );\n};
\n

Reference

\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeout(ms: number = 0);
\n
    \n
  • isReady:()=>boolean|null - function returning current timeout state:
      \n
    • false - pending re-render
      • \n
    • true - re-render performed
      • \n
    • null - re-render cancelled
      • \n
    \n
    • \n
  • cancel:()=>void - cancel the timeout (component will not be re-rendered)
    • \n
  • reset:()=>void - reset the timeout
    • \n
\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='

useTimeoutFn

\n

Calls given function after specified amount of milliseconds.

\n

Several thing about it's work:

\n
    \n
  • does not re-render component;
    • \n
  • automatically cancel timeout on cancel;
    • \n
  • automatically reset timeout on delay change;
    • \n
  • reset function call will cancel previous timeout;
    • \n
  • 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.
    • \n
\n

Usage

\n
import * as React from 'react';\nimport { useTimeoutFn } from 'react-use';\n\nconst Demo = () => {\n  const [state, setState] = React.useState('Not called yet');\n\n  function fn() {\n    setState(`called at ${Date.now()}`);\n  }\n\n  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n  const cancelButtonClick = useCallback(() => {\n    if (isReady() === false) {\n      cancel();\n      setState(`cancelled`);\n    } else {\n      reset();\n      setState('Not called yet');\n    }\n  }, []);\n\n  const readyState = isReady();\n\n  return (\n    <div>\n      <div>{readyState !== null ? 'Function will be called in 5 seconds' : 'Timer cancelled'}</div>\n      <button onClick={cancelButtonClick}> {readyState === false ? 'cancel' : 'restart'} timeout</button>\n      <br />\n      <div>Function state: {readyState === false ? 'Pending' : readyState ? 'Called' : 'Cancelled'}</div>\n      <div>{state}</div>\n    </div>\n  );\n};
\n

Reference

\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeoutFn(fn: Function, ms: number = 0);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • isReady: ()=>boolean|null - function returning current timeout state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the timeout
    • \n
  • reset: ()=>void - reset the timeout
    • \n
\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='

useTitle

\n

React side-effect hook that sets title of the page.

\n

Usage

\n
import {useTitle} from 'react-use';\n\nconst Demo = () => {\n  useTitle('Hello world!');\n\n  return null;\n};
\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='

useTween

\n

React animation hook that tweens a number between 0 and 1.

\n

Usage

\n
import {useTween} from 'react-use';\n\nconst Demo = () => {\n  const t = useTween();\n\n  return (\n    <div>\n      Tween: {t}\n    </div>\n  );\n};
\n

Reference

\n
useTween(easing?: string, ms?: number, delay?: number): number
\n

Returns a number that begins with 0 and ends with 1 when animation ends.

\n
    \n
  • easing — one of the valid easing names, defaults to inCirc.
    • \n
  • ms — milliseconds for how long to keep re-rendering component, defaults to 200.
    • \n
  • delay — delay in milliseconds after which to start re-rendering component, defaults to 0.
    • \n
\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='

useUnmount

\n

React lifecycle hook that calls a function when the component will unmount. Use useLifecycles if you need both a mount and unmount function.

\n

Usage

\n
import {useUnmount} from 'react-use';\n\nconst Demo = () => {\n  useUnmount(() => alert('UNMOUNTED'));\n  return null;\n};
\n

Reference

\n
useUnmount(fn: () => void | undefined);
\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='

useUpdate

\n

React utility hook that returns a function that forces component\nto re-render when called.

\n

Usage

\n
import {useUpdate} from 'react-use';\n\nconst Demo = () => {\n  const update = useUpdate();\n  return (\n    <>\n      <div>Time: {Date.now()}</div>\n      <button onClick={update}>Update</button>\n    </>\n  );\n};
\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='

useUpdateEffect

\n

React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the useEffect hook.

\n

Usage

\n
import React from 'react'\nimport {useUpdateEffect} from 'react-use';\n\nconst Demo = () => {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setCount(count => count + 1)\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    console.log('count', count) // will only show 1 and beyond\n\n    return () => { // *OPTIONAL*\n      // do something on unmount\n    }\n  }) // you can include deps array if necessary\n\n  return <div>Count: {count}</div>\n};
\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='

useUpsert

\n
\n

DEPRECATED! \nUse useList hook's upsert action instead

\n
\n

Superset of useList. Provides an additional method to upsert (update or insert) an element into the list.

\n

Usage

\n
import {useUpsert} from 'react-use';\n\nconst Demo = () => {\n  const comparisonFunction = (a: DemoType, b: DemoType) => {\n    return a.id === b.id;\n  };\n  const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n  return (\n    <div style={{ display: 'inline-flex', flexDirection: 'column' }}>\n      {list.map((item: DemoType, index: number) => (\n        <div key={item.id}>\n          <input value={item.text} onChange={e => upsert({ ...item, text: e.target.value })} />\n          <button onClick={() => remove(index)}>Remove</button>\n        </div>\n      ))}\n      <button onClick={() => upsert({ id: (list.length + 1).toString(), text: '' })}>Add item</button>\n      <button onClick={() => set([])}>Reset</button>\n    </div>\n  );\n};
\n\n\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='

useVibrate

\n

React UI hook to provide physical feedback with device vibration hardware using the Vibration API.

\n

Usage

\n
import {useVibrate} from 'react-use';\n\nconst Demo = () => {\n  const [vibrating, toggleVibrating] = useToggle(false);\n\n  useVibrate(vibrating, [300, 100, 200, 100, 1000, 300], false);\n\n  return (\n    <div>\n      <button onClick={toggleVibrating}>{vibrating ? 'Stop' : 'Vibrate'}</button>\n    </div>\n  );\n};
\n

Reference

\n
useVibrate(\n  enabled: boolean = true,\n  pattern: number | number[] = [1000, 1000],\n  loop: boolean = true\n): void;
\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='

useVideo

\n

Creates <video> element, tracks its state and exposes playback controls.

\n

Usage

\n
import {useVideo} from 'react-use';\n\nconst Demo = () => {\n  const [video, state, controls, ref] = useVideo(\n    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n  );\n\n  return (\n    <div>\n      {video}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n

Reference

\n
const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(<video {...props}/>);
\n

video is React's <video> element that you have to insert somewhere in your\nrender tree, for example:

\n
<div>{video}</div>
\n

state tracks the state of the video and has the following shape:

\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n

controls is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:

\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n

ref is a React reference to HTML <video> element, you can access the element by\nref.current, note that it may be null.

\n

And finally, props — all props that <video> accepts.

\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='

useWindowScroll

\n

React sensor hook that re-renders on window scroll.

\n

Usage

\n
import {useWindowScroll} from 'react-use';\n\nconst Demo = () => {\n  const {x, y} = useWindowScroll();\n\n  return (\n    <div>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\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='

useWindowSize

\n

React sensor hook that tracks dimensions of the browser window.

\n

Usage

\n
import {useWindowSize} from 'react-use';\n\nconst Demo = () => {\n  const {width, height} = useWindowSize();\n\n  return (\n    <div>\n      <div>width: {width}</div>\n      <div>height: {height}</div>\n    </div>\n  );\n};
\n'}],[[429,1,2]]]); \ No newline at end of file