archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-25 14:17:16 +00:00
Code Issues Projects Releases Wiki Activity
react-use/main.46ce426413b0c24abc36.bundle.js
streamich 17d03e9fd8 Updates
2019-08-25 19:22:23 +00:00

2 lines
289 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var h=__importStar(__webpack_require__(0)).createElement;exports.default=function(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 "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(537);exports.createMemo=createMemo_1.default;var createReducer_1=__webpack_require__(538);exports.createReducer=createReducer_1.default;var useAsync_1=__webpack_require__(245);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(158);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(539);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(540);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(542);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(543);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(544);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(545);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(546);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(249);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(549);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(555);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(556);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(557);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(558);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(559);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(112);exports.useEffectOnce=useEffectOnce_1.default;var useEvent_1=__webpack_require__(251);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(560);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(561);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(563);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(250);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(564);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(565);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(567);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(252);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(568);exports.useIdle=useIdle_1.default;var useInterval_1=__webpack_require__(570);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(253);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(159);exports.useKey=useKey_1.default;var useKeyPress_1=__webpack_require__(254);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(571);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(572);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(255);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(573);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(574);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(575);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(576);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(577);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(578);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(579);exports.useMediaDevices=useMediaDevices_1.default;var useMotion_1=__webpack_require__(580);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(160);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(63);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(256);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(581);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(582);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(583);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(584);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(585);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(586);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(587);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(588);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(589);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(590);exports.usePromise=usePromise_1.default;var useRaf_1=__webpack_require__(257);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(591);exports.useRafLoop=useRafLoop_1.default;var useRefMounted_1=__webpack_require__(592);exports.useRefMounted=useRefMounted_1.default;var useScroll_1=__webpack_require__(593);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(594);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(595);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(110);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(596);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(597);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(598);exports.useStartTyping=useStartTyping_1.default;var useStateList_1=__webpack_require__(599);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(600);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(601);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(602);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(258);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(603);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(248);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(604);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(161);exports.useUnmount=useUnmount_1.default;var useUpdate_1=__webpack_require__(111);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(62);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(606);exports.useUpsert=useUpsert_1.default;var useVideo_1=__webpack_require__(607);exports.useVideo=useVideo_1.default;var useWait_1=__webpack_require__(608);exports.useWait=useWait_1.useWait,exports.Waiter=useWait_1.Waiter;var useWindowScroll_1=__webpack_require__(610);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(611);exports.useWindowSize=useWindowSize_1.default},,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isClient="object"==typeof window,exports.on=function(obj){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];return obj.addEventListener.apply(obj,args)},exports.off=function(obj){for(var args=[],_i=1;_i<arguments.length;_i++)args[_i-1]=arguments[_i];return obj.removeEventListener.apply(obj,args)}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(effect,deps){var isInitialMount=react_1.useRef(!0);react_1.useEffect(function(){if(!isInitialMount.current)return effect();isInitialMount.current=!1},deps)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useMountedState(){var mountedRef=react_1.useRef(!1),get=react_1.useCallback(function(){return mountedRef.current},[]);return react_1.useEffect(function(){return mountedRef.current=!0,function(){mountedRef.current=!1}}),get}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(initialState){void 0===initialState&&(initialState={});var _a=react_1.useState(initialState),state=_a[0],set=_a[1];return[state,react_1.useCallback(function(patch){set(function(prevState){return Object.assign({},prevState,patch instanceof Function?patch(prevState):patch)})},[set])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(){var setState=react_1.useState(0)[1];return function(){return setState(function(cnt){return cnt+1})}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(effect){react_1.useEffect(effect,[])}},,function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0));exports.CenterStory=function(_a){var children=_a.children;return React.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"400px",margin:"40px auto"}},React.createElement("div",{style:{width:"100%"}},children))}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMountedState_1=__importDefault(__webpack_require__(63));exports.default=function useAsyncFn(fn,deps,initialState){void 0===deps&&(deps=[]),void 0===initialState&&(initialState={loading:!1});var _a=react_1.useState(initialState),state=_a[0],set=_a[1],isMounted=useMountedState_1.default();return[state,react_1.useCallback(function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return set({loading:!0}),fn.apply(void 0,args).then(function(value){return isMounted()&&set({value:value,loading:!1}),value},function(error){return isMounted()&&set({error:error,loading:!1}),error})},deps)]}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useEvent_1=__importDefault(__webpack_require__(251)),noop=function(){};exports.default=function(key,fn,opts,deps){void 0===fn&&(fn=noop),void 0===opts&&(opts={}),void 0===deps&&(deps=[key]);var _a=opts.event,event=void 0===_a?"keydown":_a,target=opts.target,options=opts.options,useMemoHandler=react_1.useMemo(function(){var keyFilter,predicate="function"==typeof(keyFilter=key)?keyFilter:"string"==typeof keyFilter?function(event){return event.key===keyFilter}:keyFilter?function(){return!0}:function(){return!1};return function(handlerEvent){if(predicate(handlerEvent))return fn(handlerEvent)}},deps);useEvent_1.default(event,useMemoHandler,target,options)}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__importDefault(__webpack_require__(112));exports.default=function(fn){useEffectOnce_1.default(function(){fn()})}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__importDefault(__webpack_require__(112));exports.default=function(fn){useEffectOnce_1.default(function(){return fn})}},,,,,function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0));exports.default=function(_a){var _b=_a.message,message=void 0===_b?"Open the developer console to see logs":_b;return React.createElement("p",null,message)}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useAsyncFn_1=__importDefault(__webpack_require__(158)),useAsyncFn_2=__webpack_require__(158);exports.AsyncState=useAsyncFn_2.AsyncState,exports.AsyncFn=useAsyncFn_2.AsyncFn,exports.default=function useAsync(fn,deps){void 0===deps&&(deps=[]);var _a=useAsyncFn_1.default(fn,deps,{loading:!0}),state=_a[0],callback=_a[1];return react_1.useEffect(function(){callback()},[callback]),state}},function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0)),react_1=__webpack_require__(0),useSetState_1=__importDefault(__webpack_require__(110)),parseTimeRanges_1=__importDefault(__webpack_require__(541));exports.default=function(tag){return function(elOrProps){var element,props;props=React.isValidElement(elOrProps)?(element=elOrProps).props:elOrProps;var _a=useSetState_1.default({buffered:[],time:0,duration:0,isPlaying:!1,muted:!1,volume:1}),state=_a[0],setState=_a[1],ref=react_1.useRef(null),wrapEvent=function(userEvent,proxyEvent){return function(event){try{proxyEvent&&proxyEvent(event)}finally{userEvent&&userEvent(event)}}},onPlay=function(){return setState({isPlaying:!0})},onPause=function(){return setState({isPlaying:!1})},onVolumeChange=function(){var el=ref.current;el&&setState({muted:el.muted,volume:el.volume})},onDurationChange=function(){var el=ref.current;if(el){var duration=el.duration,buffered=el.buffered;setState({duration:duration,buffered:parseTimeRanges_1.default(buffered)})}},onTimeUpdate=function(){var el=ref.current;el&&setState({time:el.currentTime})},onProgress=function(){var el=ref.current;el&&setState({buffered:parseTimeRanges_1.default(el.buffered)})};element=element?React.cloneElement(element,__assign({controls:!1},props,{ref:ref,onPlay:wrapEvent(props.onPlay,onPlay),onPause:wrapEvent(props.onPause,onPause),onVolumeChange:wrapEvent(props.onVolumeChange,onVolumeChange),onDurationChange:wrapEvent(props.onDurationChange,onDurationChange),onTimeUpdate:wrapEvent(props.onTimeUpdate,onTimeUpdate),onProgress:wrapEvent(props.onProgress,onProgress)})):React.createElement(tag,__assign({controls:!1},props,{ref:ref,onPlay:wrapEvent(props.onPlay,onPlay),onPause:wrapEvent(props.onPause,onPause),onVolumeChange:wrapEvent(props.onVolumeChange,onVolumeChange),onDurationChange:wrapEvent(props.onDurationChange,onDurationChange),onTimeUpdate:wrapEvent(props.onTimeUpdate,onTimeUpdate),onProgress:wrapEvent(props.onProgress,onProgress)}));var lockPlay=!1,controls={play:function(){var el=ref.current;if(el&&!lockPlay){var promise=el.play();if("object"==typeof promise){lockPlay=!0;var resetLock=function(){lockPlay=!1};promise.then(resetLock,resetLock)}return promise}},pause:function(){var el=ref.current;if(el&&!lockPlay)return el.pause()},seek:function(time){var el=ref.current;el&&void 0!==state.duration&&(time=Math.min(state.duration,Math.max(0,time)),el.currentTime=time)},volume:function(volume){var el=ref.current;el&&(volume=Math.min(1,Math.max(0,volume)),el.volume=volume,setState({volume:volume}))},mute:function(){var el=ref.current;el&&(el.muted=!0)},unmute:function(){var el=ref.current;el&&(el.muted=!1)}};return react_1.useEffect(function(){var el=ref.current;el&&(setState({volume:el.volume,muted:el.muted,isPlaying:!el.paused}),props.autoPlay&&el.paused&&controls.play())},[props.src]),[element,state,controls,ref]}}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(initialValue){var _a=react_1.useState(initialValue),value=_a[0],setValue=_a[1];return[value,react_1.useCallback(function(nextValue){setValue("boolean"==typeof nextValue?nextValue:function(currentValue){return!currentValue})},[setValue])]}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useGetSet_1=__importDefault(__webpack_require__(250));exports.default=function useCounter(initialValue,max,min){void 0===initialValue&&(initialValue=0),void 0===max&&(max=null),void 0===min&&(min=null),"number"!=typeof initialValue&&console.error("initialValue has to be a number, got "+typeof initialValue),"number"==typeof min?initialValue=Math.max(initialValue,min):null!==min&&console.error("min has to be a number, got "+typeof min),"number"==typeof max?initialValue=Math.min(initialValue,max):null!==max&&console.error("max has to be a number, got "+typeof max);var _a=useGetSet_1.default(initialValue),get=_a[0],setInternal=_a[1];function set(value){var current=get();current!==value&&("number"==typeof min&&(value=Math.max(value,min)),"number"==typeof max&&(value=Math.min(value,max)),current!==value&&setInternal(value))}var inc=react_1.useCallback(function(delta){void 0===delta&&(delta=1),"number"!=typeof delta&&console.error("delta has to be a number, got "+typeof delta),set(get()+delta)},[max,min]),dec=react_1.useCallback(function(delta){void 0===delta&&(delta=1),"number"!=typeof delta&&console.error("delta has to be a number, got "+typeof delta),set(get()-delta)},[max,min]),reset=react_1.useCallback(function(value){void 0===value&&(value=initialValue),"number"!=typeof value&&console.error("value has to be a number, got "+typeof value),initialValue=value,set(value)},[max,min]),actions={inc:inc,dec:dec,get:get,set:set,reset:reset};return[get(),actions]}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdate_1=__importDefault(__webpack_require__(111));exports.default=function(initialValue){var state=react_1.useRef(initialValue),update=useUpdate_1.default();return[react_1.useCallback(function(){return state.current},[]),react_1.useCallback(function(value){state.current=value,update()},[])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),defaultTarget=__webpack_require__(18).isClient?window:null;exports.default=function(name,handler,target,options){void 0===target&&(target=defaultTarget),react_1.useEffect(function(){if(handler&&target)return(target.addEventListener||target.on).call(target,name,handler,options),function(){(target.removeEventListener||target.off).call(target,name,handler,options)}},[name,handler,target,JSON.stringify(options)])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(ref,enabled){void 0===enabled&&(enabled=!0);var _a=react_1.useState(!1),value=_a[0],setValue=_a[1];return react_1.useEffect(function(){var onMouseOver=function(){return setValue(!0)},onMouseOut=function(){return setValue(!1)};return enabled&&ref&&ref.current&&(ref.current.addEventListener("mouseover",onMouseOver),ref.current.addEventListener("mouseout",onMouseOut)),function(){enabled&&ref&&ref.current&&(ref.current.removeEventListener("mouseover",onMouseOver),ref.current.removeEventListener("mouseout",onMouseOut))}},[enabled,ref]),value}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useIsomorphicLayoutEffect="undefined"!=typeof window?react_1.useLayoutEffect:react_1.useEffect;exports.default=useIsomorphicLayoutEffect},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useKey_1=__importDefault(__webpack_require__(159));exports.default=function(keyFilter){var _a=react_1.useState([!1,null]),state=_a[0],set=_a[1];return useKey_1.default(keyFilter,function(event){return set([!0,event])},{event:"keydown"},[state]),useKey_1.default(keyFilter,function(event){return set([!1,event])},{event:"keyup"},[state]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(initialList){void 0===initialList&&(initialList=[]);var _a=react_1.useState(initialList),list=_a[0],set=_a[1];return[list,{set:set,clear:function(){return set([])},updateAt:function(index,entry){return set(function(currentList){return currentList.slice(0,index).concat([entry],currentList.slice(index+1))})},remove:function(index){return set(function(currentList){return currentList.slice(0,index).concat(currentList.slice(index+1))})},push:function(entry){return set(function(currentList){return currentList.concat([entry])})},filter:function(fn){return set(function(currentList){return currentList.filter(fn)})},sort:function(fn){return set(function(currentList){return currentList.slice().sort(fn)})}}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(ref){var frame=react_1.useRef(0),_a=react_1.useState({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(event){cancelAnimationFrame(frame.current),frame.current=requestAnimationFrame(function(){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 document.addEventListener("mousemove",moveHandler),function(){cancelAnimationFrame(frame.current),document.removeEventListener("mousemove",moveHandler)}},[ref.current]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(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 react_1.useLayoutEffect(function(){var raf,timerStop,start,onFrame=function(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout(function(){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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useTimeoutFn(fn,ms){void 0===ms&&(ms=0);var ready=react_1.useRef(!1),timeout=react_1.useRef(),isReady=react_1.useCallback(function(){return ready.current},[]),set=react_1.useCallback(function(){ready.current=!1,timeout.current=setTimeout(function(){ready.current=!0,fn()},ms)},[ms,fn]),clear=react_1.useCallback(function(){ready.current=null,timeout.current&&clearTimeout(timeout.current)},[]);return react_1.useEffect(function(){return set(),clear},[ms]),[isReady,clear,set]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetoggle"><code>useToggle</code></h1>\n<p>React state hook that tracks value of a boolean.</p>\n<p><code>useBoolean</code> is an alias for <code>useToggle</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useToggle, useBoolean} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [on, toggle] = useToggle(true);\n\n return (\n &lt;div&gt;\n &lt;div&gt;{on ? &#39;ON&#39; : &#39;OFF&#39;}&lt;/div&gt;\n &lt;button onClick={toggle}&gt;Toggle&lt;/button&gt;\n &lt;button onClick={() =&gt; toggle(true)}&gt;set ON&lt;/button&gt;\n &lt;button onClick={() =&gt; toggle(false)}&gt;set OFF&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedrop-and-usedroparea"><code>useDrop</code> and <code>useDropArea</code></h1>\n<p>Triggers on file, link drop and copy-paste.</p>\n<p><code>useDrop</code> tracks events for the whole page, <code>useDropArea</code> tracks drop events\nfor a specific element.</p>\n<h2 id="usage">Usage</h2>\n<p><code>useDrop</code>:</p>\n<pre><code class="language-jsx">import {useDrop} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useDrop({\n onFiles: files =&gt; console.log(&#39;files&#39;, files),\n onUri: uri =&gt; console.log(&#39;uri&#39;, uri),\n onText: text =&gt; console.log(&#39;text&#39;, text),\n });\n\n return (\n &lt;div&gt;\n Drop something on the page.\n &lt;/div&gt;\n );\n};</code></pre>\n<p><code>useDropArea</code>:</p>\n<pre><code class="language-jsx">import {useDropArea} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [bond, state] = useDropArea({\n onFiles: files =&gt; console.log(&#39;files&#39;, files),\n onUri: uri =&gt; console.log(&#39;uri&#39;, uri),\n onText: text =&gt; console.log(&#39;text&#39;, text),\n });\n\n return (\n &lt;div {...bond}&gt;\n Drop something here.\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0));exports.default=function(_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"),".")}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usehover-and-usehoverdirty"><code>useHover</code> and <code>useHoverDirty</code></h1>\n<p>React UI sensor hooks that track if some element is being hovered\nby a mouse.</p>\n<ul>\n<li><code>useHover</code> accepts a React element or a function that returns one,\n<code>useHoverDirty</code> accepts React ref.</li>\n<li><code>useHover</code> sets react <code>onMouseEnter</code> and <code>onMouseLeave</code> events,\n<code>useHoverDirty</code> sets DOM <code>onmouseover</code> and <code>onmouseout</code> events.</li>\n</ul>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useHover} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const element = (hovered) =&gt;\n &lt;div&gt;\n Hover me! {hovered &amp;&amp; &#39;Thanks!&#39;}\n &lt;/div&gt;;\n const [hoverable, hovered] = useHover(element);\n\n return (\n &lt;div&gt;\n {hoverable}\n &lt;div&gt;{hovered ? &#39;HOVERED&#39; : &#39;&#39;}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) =&gt; reactElement);\nconst isHovering = useHoverDirty(ref);</code></pre>\n'},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemouse-and-usemousehovered"><code>useMouse</code> and <code>useMouseHovered</code></h1>\n<p>React sensor hooks that re-render on mouse position changes. <code>useMouse</code> simply tracks\nmouse position; <code>useMouseHovered</code> allows you to specify extra options:</p>\n<ul>\n<li><code>bound</code> &mdash; to bind mouse coordinates within the element</li>\n<li><code>whenHovered</code> &mdash; whether to attach <code>mousemove</code> event handler only when user hovers over the element</li>\n</ul>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMouse} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const ref = React.useRef(null);\n const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n return (\n &lt;div ref={ref}&gt;\n &lt;div&gt;Mouse position in document - x:{docX} y:{docY}&lt;/div&gt;\n &lt;div&gt;Mouse position in element - x:{elX} y:{elY}&lt;/div&gt;\n &lt;div&gt;Element position- x:{posX} y:{posY}&lt;/div&gt;\n &lt;div&gt;Element dimensions - {elW}x{elH}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});</code></pre>\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usethrottle-and-usethrottlefn"><code>useThrottle</code> and <code>useThrottleFn</code></h1>\n<p>React hooks that throttle.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from &#39;react&#39;;\nimport { useThrottle, useThrottleFn } from &#39;react-use&#39;;\n\nconst Demo = ({value}) =&gt; {\n const throttledValue = useThrottle(value);\n // const throttledValue = useThrottleFn(value =&gt; value, 200, [value]);\n\n return (\n &lt;&gt;\n &lt;div&gt;Value: {value}&lt;/div&gt;\n &lt;div&gt;Throttled value: {throttledValue}&lt;/div&gt;\n &lt;/&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);</code></pre>\n'},,,function(module,exports,__webpack_require__){__webpack_require__(273),__webpack_require__(376),module.exports=__webpack_require__(377)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(16),__webpack_require__(27),__webpack_require__(24),__webpack_require__(17),__webpack_require__(31);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(271);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(535);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)(function(){req.keys().forEach(function(filename){return req(filename)})},module)}.call(this,__webpack_require__(378)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./__stories__/createMemo.story.tsx":536,"./__stories__/createReducer.story.tsx":613,"./__stories__/useAsync.story.tsx":617,"./__stories__/useAsyncFn.story.tsx":630,"./__stories__/useAsyncRetry.story.tsx":632,"./__stories__/useAudio.story.tsx":634,"./__stories__/useBattery.story.tsx":636,"./__stories__/useBeforeUnload.story.tsx":638,"./__stories__/useBoolean.story.tsx":640,"./__stories__/useClickAway.story.tsx":641,"./__stories__/useCopyToClipboard.story.tsx":655,"./__stories__/useCounter.story.tsx":657,"./__stories__/useCss.story.tsx":659,"./__stories__/useDebounce.story.tsx":661,"./__stories__/useDeepCompareEffect.story.tsx":663,"./__stories__/useDefault.story.tsx":665,"./__stories__/useDrop.story.tsx":667,"./__stories__/useDropArea.story.tsx":668,"./__stories__/useEffectOnce.story.tsx":669,"./__stories__/useEvent.story.tsx":671,"./__stories__/useFavicon.story.tsx":673,"./__stories__/useFullscreen.story.tsx":675,"./__stories__/useGeolocation.story.tsx":677,"./__stories__/useGetSet.story.tsx":679,"./__stories__/useGetSetState.story.tsx":681,"./__stories__/useHarmonicIntervalFn.story.tsx":683,"./__stories__/useHover.story.tsx":685,"./__stories__/useHoverDirty.story.tsx":686,"./__stories__/useIdle.story.tsx":687,"./__stories__/useInterval.story.tsx":689,"./__stories__/useIsomorphicLayoutEffect.story.tsx":691,"./__stories__/useKey.story.tsx":693,"./__stories__/useKeyPress.story.tsx":695,"./__stories__/useKeyPressEvent.story.tsx":697,"./__stories__/useKeyboardJs.story.tsx":699,"./__stories__/useLifecycles.story.tsx":705,"./__stories__/useList.story.tsx":707,"./__stories__/useLocalStorage.story.tsx":709,"./__stories__/useLocation.story.tsx":711,"./__stories__/useLockBodyScroll.story.tsx":713,"./__stories__/useLogger.story.tsx":720,"./__stories__/useMap.story.tsx":722,"./__stories__/useMedia.story.tsx":724,"./__stories__/useMediaDevices.story.tsx":726,"./__stories__/useMotion.story.tsx":728,"./__stories__/useMount.story.tsx":730,"./__stories__/useMountedState.story.tsx":732,"./__stories__/useMouse.story.tsx":734,"./__stories__/useMouseHovered.story.tsx":735,"./__stories__/useNetwork.story.tsx":736,"./__stories__/useObservable.story.tsx":738,"./__stories__/useOrientation.story.tsx":740,"./__stories__/usePageLeave.story.tsx":742,"./__stories__/usePermission.story.tsx":744,"./__stories__/usePrevious.story.tsx":746,"./__stories__/usePreviousDistinct.story.tsx":748,"./__stories__/usePromise.story.tsx":750,"./__stories__/useRaf.story.tsx":752,"./__stories__/useRafLoop.story.tsx":754,"./__stories__/useRefMounted.story.tsx":756,"./__stories__/useScroll.story.tsx":758,"./__stories__/useScrolling.story.tsx":760,"./__stories__/useSessionStorage.story.tsx":762,"./__stories__/useSetState.story.tsx":764,"./__stories__/useSize.story.tsx":766,"./__stories__/useSpeech.story.tsx":768,"./__stories__/useSpring.story.tsx":770,"./__stories__/useStartTyping.story.tsx":774,"./__stories__/useStateList.story.tsx":776,"./__stories__/useThrottle.story.tsx":778,"./__stories__/useThrottleFn.story.tsx":779,"./__stories__/useTimeout.story.tsx":780,"./__stories__/useTimeoutFn.story.tsx":782,"./__stories__/useTitle.story.tsx":784,"./__stories__/useToggle.story.tsx":786,"./__stories__/useTween.story.tsx":787,"./__stories__/useUnmount.story.tsx":789,"./__stories__/useUpdate.story.tsx":791,"./__stories__/useUpdateEffect.story.tsx":793,"./__stories__/useUpsert.story.tsx":795,"./__stories__/useVideo.story.tsx":797,"./__stories__/useWait.story.tsx":799,"./__stories__/useWindowScroll.story.tsx":801,"./__stories__/useWindowSize.story.tsx":803,"./comps/__stories__/UseKey.story.tsx":805};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=535},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),fibonacci=function(n){return 0===n?0:1===n?1:fibonacci(n-1)+fibonacci(n-2)},useMemoFibonacci=__1.createMemo(fibonacci),Demo=function(){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__(612)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(fn){return function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return react_1.useMemo(function(){return fn.apply(void 0,args)},args)}}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdateEffect_1=__importDefault(__webpack_require__(62));function composeMiddleware(chain){return function(context,dispatch){return chain.reduceRight(function(res,middleware){return middleware(context)(res)},dispatch)}}exports.default=function(){for(var middlewares=[],_i=0;_i<arguments.length;_i++)middlewares[_i]=arguments[_i];var composedMiddleware=composeMiddleware(middlewares);return function(reducer,initialState,initializer){void 0===initializer&&(initializer=function(value){return value});var ref=react_1.useRef(initializer(initialState)),setState=react_1.useState(ref.current)[1],dispatch=react_1.useCallback(function(action){return ref.current=reducer(ref.current,action),setState(ref.current),action},[reducer]),dispatchRef=react_1.useRef(composedMiddleware({getState:function(){return ref.current},dispatch:function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return dispatchRef.current.apply(dispatchRef,args)}},dispatch));return useUpdateEffect_1.default(function(){dispatchRef.current=composedMiddleware({getState:function(){return ref.current},dispatch:function(){for(var args=[],_i=0;_i<arguments.length;_i++)args[_i]=arguments[_i];return dispatchRef.current.apply(dispatchRef,args)}},dispatch)},[dispatch]),[ref.current,dispatchRef.current]}}},function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useAsync_1=__importDefault(__webpack_require__(245));exports.default=function(fn,deps){void 0===deps&&(deps=[]);var _a=react_1.useState(0),attempt=_a[0],setAttempt=_a[1],state=useAsync_1.default(fn,deps.concat([attempt])),stateLoading=state.loading,retry=react_1.useCallback(function(){stateLoading||setAttempt(function(currentAttempt){return currentAttempt+1})},deps.concat([stateLoading,attempt]));return __assign({},state,{retry:retry})}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useAudio=__importDefault(__webpack_require__(246)).default("audio");exports.default=useAudio},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default=function(ranges){for(var result=[],i=0;i<ranges.length;i++)result.push({start:ranges.start(i),end:ranges.end(i)});return result}},function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0)),react_fast_compare_1=__importDefault(__webpack_require__(247)),util_1=__webpack_require__(18),useState=React.useState,useEffect=React.useEffect,nav="object"==typeof navigator?navigator:void 0,isBatteryApiSupported=nav&&"function"==typeof nav.getBattery;exports.default=isBatteryApiSupported?function useBattery(){var _a=useState({isSupported:!0,fetched:!1}),state=_a[0],setState=_a[1];return useEffect(function(){var isMounted=!0,battery=null,handleChange=function(){if(isMounted&&battery){var newState={isSupported:!0,fetched:!0,level:battery.level,charging:battery.charging,dischargingTime:battery.dischargingTime,chargingTime:battery.chargingTime};!react_fast_compare_1.default(state,newState)&&setState(newState)}};return nav.getBattery().then(function(bat){isMounted&&(battery=bat,util_1.on(battery,"chargingchange",handleChange),util_1.on(battery,"chargingtimechange",handleChange),util_1.on(battery,"dischargingtimechange",handleChange),util_1.on(battery,"levelchange",handleChange),handleChange())}),function(){isMounted=!1,battery&&(util_1.off(battery,"chargingchange",handleChange),util_1.off(battery,"chargingtimechange",handleChange),util_1.off(battery,"dischargingtimechange",handleChange),util_1.off(battery,"levelchange",handleChange))}},[]),state}:function useBatteryMock(){return{isSupported:!1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(enabled,message){void 0===enabled&&(enabled=!0),react_1.useEffect(function(){if(enabled){var handler=function(event){return event.preventDefault(),message&&(event.returnValue=message),message};return window.addEventListener("beforeunload",handler),function(){return window.removeEventListener("beforeunload",handler)}}},[message,enabled])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useToggle_1=__importDefault(__webpack_require__(248));exports.default=useToggle_1.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),defaultEvents=["mousedown","touchstart"];exports.default=function(ref,onClickAway,events){void 0===events&&(events=defaultEvents);var savedCallback=react_1.useRef(onClickAway);react_1.useEffect(function(){savedCallback.current=onClickAway},[onClickAway]),react_1.useEffect(function(){for(var handler=function(event){var el=ref.current;el&&!el.contains(event.target)&&savedCallback.current(event)},_i=0,events_1=events;_i<events_1.length;_i++){var eventName=events_1[_i];util_1.on(document,eventName,handler)}return function(){for(var _i=0,events_2=events;_i<events_2.length;_i++){var eventName=events_2[_i];util_1.off(document,eventName,handler)}}},[events,ref])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var copy_to_clipboard_1=__importDefault(__webpack_require__(547)),react_1=__webpack_require__(0),useMountedState_1=__importDefault(__webpack_require__(63)),useSetState_1=__importDefault(__webpack_require__(110));exports.default=function(){var isMounted=useMountedState_1.default(),_a=useSetState_1.default({value:void 0,error:void 0,noUserInteraction:!0}),state=_a[0],setState=_a[1];return[state,react_1.useCallback(function(value){try{0;var noUserInteraction=copy_to_clipboard_1.default(value);if(!isMounted())return;setState({value:value,error:void 0,noUserInteraction:noUserInteraction})}catch(error){if(!isMounted())return;setState({value:void 0,error:error,noUserInteraction:!0})}},[])]}},,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var nano_css_1=__webpack_require__(550),cssom_1=__webpack_require__(551),vcssom_1=__webpack_require__(552),cssToTree_1=__webpack_require__(554),react_1=__webpack_require__(0),nano=nano_css_1.create();cssom_1.addon(nano),vcssom_1.addon(nano);var counter=0;exports.default=function(css){var className=react_1.useMemo(function(){return"react-use-css-"+(counter++).toString(36)},[]),sheet=react_1.useMemo(function(){return new nano.VSheet},[]);return react_1.useLayoutEffect(function(){var tree={};return cssToTree_1.cssToTree(tree,css,"."+className,""),sheet.diff(tree),function(){sheet.diff({})}}),className}},,,,,,function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useUpdateEffect_1=__importDefault(__webpack_require__(62));exports.default=function(fn,ms,args){void 0===ms&&(ms=0),void 0===args&&(args=[]),useUpdateEffect_1.default(function(){var handle=setTimeout(fn.bind(null,args),ms);return function(){clearTimeout(handle)}},args)}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),react_fast_compare_1=__importDefault(__webpack_require__(247));exports.default=function(effect,deps){var ref=react_1.useRef(void 0);react_fast_compare_1.default(deps,ref.current)||(ref.current=deps),react_1.useEffect(effect,ref.current)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(defaultValue,initialValue){var _a=react_1.useState(initialValue),value=_a[0],setValue=_a[1];return null==value?[defaultValue,setValue]:[value,setValue]}},function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0)),useMountedState_1=__importDefault(__webpack_require__(63)),useState=React.useState,useMemo=React.useMemo,useCallback=React.useCallback,useEffect=React.useEffect,noop=function(){};exports.default=function(options,args){void 0===options&&(options={}),void 0===args&&(args=[]);var onFiles=options.onFiles,onText=options.onText,onUri=options.onUri,isMounted=useMountedState_1.default(),_a=useState(!1),over=_a[0],setOverRaw=_a[1],setOver=useCallback(setOverRaw,[]),process=useMemo(function(){return function(options,mounted){return function(dataTransfer,event){var uri=dataTransfer.getData("text/uri-list");uri?(options.onUri||noop)(uri,event):dataTransfer.files&&dataTransfer.files.length?(options.onFiles||noop)(Array.from(dataTransfer.files),event):dataTransfer.items&&dataTransfer.items.length&&dataTransfer.items[0].getAsString(function(text){mounted&&(options.onText||noop)(text,event)})}}(options,isMounted())},[onFiles,onText,onUri]);return useEffect(function(){var onDragOver=function(event){event.preventDefault(),setOver(!0)},onDragEnter=function(event){event.preventDefault(),setOver(!0)},onDragLeave=function(){setOver(!1)},onDragExit=function(){setOver(!1)},onDrop=function(event){event.preventDefault(),setOver(!1),process(event.dataTransfer,event)},onPaste=function(event){process(event.clipboardData,event)};return document.addEventListener("dragover",onDragOver),document.addEventListener("dragenter",onDragEnter),document.addEventListener("dragleave",onDragLeave),document.addEventListener("dragexit",onDragExit),document.addEventListener("drop",onDrop),onText&&document.addEventListener("paste",onPaste),function(){document.removeEventListener("dragover",onDragOver),document.removeEventListener("dragenter",onDragEnter),document.removeEventListener("dragleave",onDragLeave),document.removeEventListener("dragexit",onDragExit),document.removeEventListener("drop",onDrop),document.removeEventListener("paste",onPaste)}},[process].concat(args)),{over:over}}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMountedState_1=__importDefault(__webpack_require__(63)),noop=function(){};exports.default=function(options){void 0===options&&(options={});var onFiles=options.onFiles,onText=options.onText,onUri=options.onUri,isMounted=useMountedState_1.default(),_a=react_1.useState(!1),over=_a[0],setOver=_a[1],process=react_1.useMemo(function(){return function(options,mounted){return function(dataTransfer,event){var uri=dataTransfer.getData("text/uri-list");uri?(options.onUri||noop)(uri,event):dataTransfer.files&&dataTransfer.files.length?(options.onFiles||noop)(Array.from(dataTransfer.files),event):dataTransfer.items&&dataTransfer.items.length&&dataTransfer.items[0].getAsString(function(text){mounted&&(options.onText||noop)(text,event)})}}(options,isMounted())},[onFiles,onText,onUri]);return[react_1.useMemo(function(){return function(process,setOver){return{onDragOver:function(event){event.preventDefault()},onDragEnter:function(event){event.preventDefault(),setOver(!0)},onDragLeave:function(){setOver(!1)},onDrop:function(event){event.preventDefault(),event.persist(),setOver(!1),process(event.dataTransfer,event)},onPaste:function(event){event.persist(),process(event.clipboardData,event)}}}(process,setOver)},[process,setOver]),{over:over}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(href){react_1.useEffect(function(){var link=document.querySelector("link[rel*='icon']")||document.createElement("link");link.type="image/x-icon",link.rel="shortcut icon",link.href=href,document.getElementsByTagName("head")[0].appendChild(link)},[href])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),screenfull_1=__importDefault(__webpack_require__(562)),noop=function(){};exports.default=function(ref,on,options){void 0===options&&(options={});var video=options.video,_a=options.onClose,onClose=void 0===_a?noop:_a,_b=react_1.useState(on),isFullscreen=_b[0],setIsFullscreen=_b[1];return react_1.useLayoutEffect(function(){if(on&&ref.current){var onWebkitEndFullscreen=function(){video.current.removeEventListener("webkitendfullscreen",onWebkitEndFullscreen),onClose()},onChange=function(){if(screenfull_1.default){var isScreenfullFullscreen=screenfull_1.default.isFullscreen;setIsFullscreen(isScreenfullFullscreen),isScreenfullFullscreen||onClose()}};if(screenfull_1.default&&screenfull_1.default.enabled){try{screenfull_1.default.request(ref.current),setIsFullscreen(!0)}catch(error){onClose(error),setIsFullscreen(!1)}screenfull_1.default.on("change",onChange)}else video&&video.current&&video.current.webkitEnterFullscreen?(video.current.webkitEnterFullscreen(),video.current.addEventListener("webkitendfullscreen",onWebkitEndFullscreen),setIsFullscreen(!0)):(onClose(),setIsFullscreen(!1));return function(){if(setIsFullscreen(!1),screenfull_1.default&&screenfull_1.default.enabled)try{screenfull_1.default.off("change",onChange),screenfull_1.default.exit()}catch(_a){}else video&&video.current&&video.current.webkitExitFullscreen&&(video.current.removeEventListener("webkitendfullscreen",onWebkitEndFullscreen),video.current.webkitExitFullscreen())}}},[ref.current,video,on]),isFullscreen}},,function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(options){var watchId,_a=react_1.useState({loading:!0,accuracy:null,altitude:null,altitudeAccuracy:null,heading:null,latitude:null,longitude:null,speed:null,timestamp:Date.now()}),state=_a[0],setState=_a[1],mounted=!0,onEvent=function(event){mounted&&setState({loading:!1,accuracy:event.coords.accuracy,altitude:event.coords.altitude,altitudeAccuracy:event.coords.altitudeAccuracy,heading:event.coords.heading,latitude:event.coords.latitude,longitude:event.coords.longitude,speed:event.coords.speed,timestamp:event.timestamp})},onEventError=function(error){return mounted&&setState(function(oldState){return __assign({},oldState,{loading:!1,error:error})})};return react_1.useEffect(function(){return navigator.geolocation.getCurrentPosition(onEvent,onEventError,options),watchId=navigator.geolocation.watchPosition(onEvent,onEventError,options),function(){mounted=!1,navigator.geolocation.clearWatch(watchId)}},[]),state}},function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdate_1=__importDefault(__webpack_require__(111));exports.default=function(initialState){void 0===initialState&&(initialState={});var update=useUpdate_1.default(),state=react_1.useRef(__assign({},initialState));return[react_1.useCallback(function(){return state.current},[]),react_1.useCallback(function(patch){patch&&(Object.assign(state.current,patch),update())},[])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),set_harmonic_interval_1=__webpack_require__(566);exports.default=function(fn,delay){void 0===delay&&(delay=0);var latestCallback=react_1.useRef(function(){});react_1.useEffect(function(){latestCallback.current=fn}),react_1.useEffect(function(){if(null!==delay){var interval_1=set_harmonic_interval_1.setHarmonicInterval(function(){return latestCallback.current()},delay);return function(){return set_harmonic_interval_1.clearHarmonicInterval(interval_1)}}},[delay])}},,function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0)),useState=React.useState,noop=function(){};exports.default=function(element){var originalOnMouseLeave,originalOnMouseEnter,_a=useState(!1),state=_a[0],setState=_a[1];return"function"==typeof element&&(element=element(state)),[React.cloneElement(element,{onMouseEnter:(originalOnMouseEnter=element.props.onMouseEnter,function(event){(originalOnMouseEnter||noop)(event),setState(!0)}),onMouseLeave:(originalOnMouseLeave=element.props.onMouseLeave,function(event){(originalOnMouseLeave||noop)(event),setState(!1)})}),state]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),throttle_debounce_1=__webpack_require__(569),util_1=__webpack_require__(18),defaultEvents=["mousemove","mousedown","resize","keydown","touchstart","wheel"];exports.default=function(ms,initialState,events){void 0===ms&&(ms=6e4),void 0===initialState&&(initialState=!1),void 0===events&&(events=defaultEvents);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect(function(){for(var timeout,mounted=!0,localState=state,set=function(newState){mounted&&(localState=newState,setState(newState))},onEvent=throttle_debounce_1.throttle(50,function(){localState&&set(!1),clearTimeout(timeout),timeout=setTimeout(function(){return set(!0)},ms)}),onVisibility=function(){document.hidden||onEvent()},i=0;i<events.length;i++)util_1.on(window,events[i],onEvent);return util_1.on(document,"visibilitychange",onVisibility),timeout=setTimeout(function(){return set(!0)},ms),function(){mounted=!1;for(var i=0;i<events.length;i++)util_1.off(window,events[i],onEvent);util_1.off(document,"visibilitychange",onVisibility)}},[ms,events]),state}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(callback,delay){var latestCallback=react_1.useRef(function(){});react_1.useEffect(function(){latestCallback.current=callback}),react_1.useEffect(function(){if(null!==delay){var interval_1=setInterval(function(){return latestCallback.current()},delay||0);return function(){return clearInterval(interval_1)}}},[delay])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useKeyPress_1=__importDefault(__webpack_require__(254)),useUpdateEffect_1=__importDefault(__webpack_require__(62));exports.default=function(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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(mount,unmount){react_1.useEffect(function(){return mount&&mount(),function(){unmount&&unmount()}},[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState(function(){try{var localStorageValue=localStorage.getItem(key);return"string"!=typeof localStorageValue?(localStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?localStorageValue:JSON.parse(localStorageValue||"null")}catch(_a){return initialValue}}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){try{var serializedState=raw?String(state):JSON.stringify(state);localStorage.setItem(key,serializedState)}catch(_a){}},[state]),[state,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),patchHistoryMethod=function(method){var 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.isClient&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function(trigger){return{trigger:trigger,state:history.state,length:history.length,hash:location.hash,host:location.host,hostname:location.hostname,href:location.href,origin:location.origin,pathname:location.pathname,port:location.port,protocol:location.protocol,search:location.search}};exports.default=util_1.isClient?function(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var onPopstate=function(){return setState(buildState("popstate"))},onPushstate=function(){return setState(buildState("pushstate"))},onReplacestate=function(){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(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);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}exports.getClosestBody=getClosestBody;var bodies=new Map,doc="object"==typeof document?document:void 0;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body),react_1.useEffect(function(){var body=getClosestBody(elementRef.current);if(body){var bodyInfo=bodies.get(body);locked?bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),body.style.overflow="hidden"):bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))}},[locked,elementRef.current])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__importDefault(__webpack_require__(112)),useUpdateEffect_1=__importDefault(__webpack_require__(62));exports.default=function(componentName){for(var rest=[],_i=1;_i<arguments.length;_i++)rest[_i-1]=arguments[_i];useEffectOnce_1.default(function(){return console.log.apply(console,[componentName+" mounted"].concat(rest)),function(){return console.log(componentName+" unmounted")}}),useUpdateEffect_1.default(function(){console.log.apply(console,[componentName+" updated"].concat(rest))})}},function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(initialMap){void 0===initialMap&&(initialMap={});var _a=react_1.useState(initialMap),map=_a[0],set=_a[1];return[map,{get:function(key){return map[key]},set:function(key,entry){set(function(prevMap){var _a;return __assign({},prevMap,((_a={})[key]=entry,_a))})},remove:function(key){set(function(prevMap){var _a=key;prevMap[_a];return __rest(prevMap,["symbol"==typeof _a?_a:_a+""])})},reset:function(){return set(initialMap)}}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18);exports.default=function(query,defaultState){void 0===defaultState&&(defaultState=!1);var _a=react_1.useState(util_1.isClient?function(){return window.matchMedia(query).matches}:defaultState),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var mounted=!0,mql=window.matchMedia(query),onChange=function(){mounted&&setState(!!mql.matches)};return mql.addListener(onChange),setState(mql.matches),function(){mounted=!1,mql.removeListener(onChange)}},[query]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),noop=function(){};exports.default=function(){var _a=react_1.useState({}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var mounted=!0,onChange=function(){navigator.mediaDevices.enumerateDevices().then(function(devices){mounted&&setState({devices:devices.map(function(_a){return{deviceId:_a.deviceId,groupId:_a.groupId,kind:_a.kind,label:_a.label}})})}).catch(noop)};return util_1.on(navigator.mediaDevices,"devicechange",onChange),onChange(),function(){mounted=!1,util_1.off(navigator.mediaDevices,"devicechange",onChange)}},[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),defaultState={acceleration:{x:null,y:null,z:null},accelerationIncludingGravity:{x:null,y:null,z:null},rotationRate:{alpha:null,beta:null,gamma:null},interval:16};exports.default=function(initialState){void 0===initialState&&(initialState=defaultState);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var handler=function(event){var acceleration=event.acceleration,accelerationIncludingGravity=event.accelerationIncludingGravity,rotationRate=event.rotationRate,interval=event.interval;setState({acceleration:{x:acceleration.x,y:acceleration.y,z:acceleration.z},accelerationIncludingGravity:{x:accelerationIncludingGravity.x,y:accelerationIncludingGravity.y,z:accelerationIncludingGravity.z},rotationRate:{alpha:rotationRate.alpha,beta:rotationRate.beta,gamma:rotationRate.gamma},interval:interval})};return util_1.on(window,"devicemotion",handler),function(){util_1.off(window,"devicemotion",handler)}},[]),state}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useHoverDirty_1=__importDefault(__webpack_require__(252)),useMouse_1=__importDefault(__webpack_require__(256)),nullRef={current:null};exports.default=function(ref,options){void 0===options&&(options={});var whenHovered=!!options.whenHovered,bound=!!options.bound,isHovered=useHoverDirty_1.default(ref,whenHovered),state=useMouse_1.default(whenHovered&&!isHovered?nullRef:ref);return bound&&(state.elX=Math.max(0,Math.min(state.elX,state.elW)),state.elY=Math.max(0,Math.min(state.elY,state.elH))),state}},function(module,exports,__webpack_require__){"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),getConnection=function(){if("object"!=typeof navigator)return null;var nav=navigator;return nav.connection||nav.mozConnection||nav.webkitConnection},getConnectionState=function(){var connection=getConnection();return connection?{downlink:connection.downlink,downlinkMax:connection.downlinkMax,effectiveType:connection.effectiveType,type:connection.type,rtt:connection.rtt}:{}};exports.default=function(initialState){void 0===initialState&&(initialState={});var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var localState=state,localSetState=function(patch){localState=__assign({},localState,patch),setState(localState)},connection=getConnection(),onOnline=function(){localSetState({online:!0,since:new Date})},onOffline=function(){localSetState({online:!1,since:new Date})},onConnectionChange=function(){localSetState(getConnectionState())};return util_1.on(window,"online",onOnline),util_1.on(window,"offline",onOffline),connection&&(util_1.on(connection,"change",onConnectionChange),localSetState(__assign({},state,{online:navigator.onLine,since:void 0},getConnectionState()))),function(){util_1.off(window,"online",onOnline),util_1.off(window,"offline",onOffline),connection&&util_1.off(connection,"change",onConnectionChange)}},[]),state}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useCounter_1=__importDefault(__webpack_require__(249));exports.default=useCounter_1.default},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=__importDefault(__webpack_require__(253));exports.default=function useObservable(observable$,initialValue){var _a=react_1.useState(initialValue),value=_a[0],update=_a[1];return useIsomorphicLayoutEffect_1.default(function(){var s=observable$.subscribe(update);return function(){return s.unsubscribe()}},[observable$]),value}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),defaultState={angle:0,type:"landscape-primary"};exports.default=function(initialState){void 0===initialState&&(initialState=defaultState);var _a=react_1.useState(initialState),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var mounted=!0,onChange=function(){if(mounted){var orientation=screen.orientation;if(orientation){var angle=orientation.angle,type=orientation.type;setState({angle:angle,type:type})}else window.orientation?setState({angle:"number"==typeof window.orientation?window.orientation:0,type:""}):setState(initialState)}};return util_1.on(window,"orientationchange",onChange),onChange(),function(){mounted=!1,util_1.off(window,"orientationchange",onChange)}},[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(onPageLeave,args){void 0===args&&(args=[]),react_1.useEffect(function(){if(onPageLeave){var handler=function(event){var from=(event=event||window.event).relatedTarget||event.toElement;from&&"HTML"!==from.nodeName||onPageLeave()};return document.addEventListener("mouseout",handler),function(){document.removeEventListener("mouseout",handler)}}},args)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18),noop=function(){};exports.default=function(permissionDesc){var mounted=!0,permissionStatus=null,_a=react_1.useState(""),state=_a[0],setState=_a[1],onChange=function(){mounted&&permissionStatus&&setState(permissionStatus.state)};return react_1.useEffect(function(){return navigator.permissions.query(permissionDesc).then(function(status){permissionStatus=status,onChange(),util_1.on(permissionStatus,"change",onChange)}).catch(noop),function(){mounted=!1,permissionStatus&&util_1.off(permissionStatus,"change",onChange)}},[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(state){var ref=react_1.useRef();return react_1.useEffect(function(){ref.current=state}),ref.current}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);function strictEquals(prev,next){return prev===next}exports.default=function usePreviousDistinct(value,compare){void 0===compare&&(compare=strictEquals);var prevRef=react_1.useRef(),curRef=react_1.useRef();return compare(curRef.current,value)||(prevRef.current=curRef.current,curRef.current=value),prevRef.current}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMountedState_1=__importDefault(__webpack_require__(63));exports.default=function(){var isMounted=useMountedState_1.default();return react_1.useCallback(function(promise){return new Promise(function(resolve,reject){promise.then(function(value){isMounted()&&resolve(value)},function(error){isMounted()&&reject(error)})})},[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useRafLoop(callback){var raf=react_1.useRef(null),_a=react_1.useState(!0),isActive=_a[0],setIsActive=_a[1];function loopStep(){callback(),raf.current=requestAnimationFrame(loopStep)}function clearCurrentLoop(){raf.current&&cancelAnimationFrame(raf.current)}return react_1.useEffect(function(){return clearCurrentLoop},[]),react_1.useEffect(function(){return clearCurrentLoop(),isActive&&(raf.current=requestAnimationFrame(loopStep)),clearCurrentLoop},[isActive,callback]),[function loopStop(){setIsActive(!1)},isActive,function loopStart(){setIsActive(!0)}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(){var refMounted=react_1.useRef(!1);return react_1.useEffect(function(){return refMounted.current=!0,function(){refMounted.current=!1}},[]),refMounted}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(ref){var frame=react_1.useRef(0),_a=react_1.useState({x:0,y:0}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var handler=function(){cancelAnimationFrame(frame.current),frame.current=requestAnimationFrame(function(){ref.current&&setState({x:ref.current.scrollLeft,y:ref.current.scrollTop})})};return ref.current&&ref.current.addEventListener("scroll",handler,{capture:!1,passive:!0}),function(){frame.current&&cancelAnimationFrame(frame.current),ref.current&&ref.current.removeEventListener("scroll",handler)}},[ref.current]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(ref){var _a=react_1.useState(!1),scrolling=_a[0],setScrolling=_a[1];return react_1.useEffect(function(){if(ref.current){var scrollingTimeout_1,handleScroll_1=function(){setScrolling(!0),clearTimeout(scrollingTimeout_1),scrollingTimeout_1=setTimeout(function(){setScrolling(!1)},150)};return ref.current.addEventListener("scroll",handleScroll_1,!1),function(){ref.current&&ref.current.removeEventListener("scroll",handleScroll_1,!1)}}return function(){}},[ref.current]),scrolling}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState(function(){try{var sessionStorageValue=sessionStorage.getItem(key);return"string"!=typeof sessionStorageValue?(sessionStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?sessionStorageValue:JSON.parse(sessionStorageValue||"null")}catch(_a){return initialValue}}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){try{var serializedState=raw?String(state):JSON.stringify(state);sessionStorage.setItem(key,serializedState)}catch(_a){}}),[state,setState]}},function(module,exports,__webpack_require__){"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var React=__importStar(__webpack_require__(0)),util_1=__webpack_require__(18),useState=React.useState,useEffect=React.useEffect,useRef=React.useRef;exports.default=function(element,_a){var _b=void 0===_a?{}:_a,_c=_b.width,width=void 0===_c?1/0:_c,_d=_b.height,height=void 0===_d?1/0:_d;if(!util_1.isClient)return["function"==typeof element?element({width:width,height:height}):element,{width:width,height:height}];var _e=useState({width:width,height:height}),state=_e[0],setState=_e[1];"function"==typeof element&&(element=element(state));var style=element.props.style||{},ref=useRef(null),window=null,setSize=function(){var iframe=ref.current,size=iframe?{width:iframe.offsetWidth,height:iframe.offsetHeight}:{width:width,height:height};setState(size)},onWindow=function(windowToListenOn){windowToListenOn.addEventListener("resize",setSize),setTimeout(setSize,35)};return useEffect(function(){var iframe=ref.current;if(iframe){if(iframe.contentWindow)window=iframe.contentWindow,onWindow(window);else{var onLoad_1=function(){iframe.removeEventListener("load",onLoad_1),window=iframe.contentWindow,onWindow(window)};iframe.addEventListener("load",onLoad_1)}return function(){window&&window.removeEventListener("resize",setSize)}}},[]),style.position="relative",[React.cloneElement.apply(React,[element,{style:style}].concat([React.createElement("iframe",{ref:ref,style:{background:"transparent",border:"none",height:"100%",left:0,position:"absolute",top:0,width:"100%",zIndex:-1}})].concat(React.Children.toArray(element.props.children)))),state]}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMount_1=__importDefault(__webpack_require__(160)),useSetState_1=__importDefault(__webpack_require__(110)),voices="object"==typeof window&&"object"==typeof window.speechSynthesis?window.speechSynthesis.getVoices():[];exports.default=function(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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(onStartTyping){react_1.useLayoutEffect(function(){var keydown=function(event){var _a,keyCode,metaKey,ctrlKey,altKey;!function(){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")}()&&(keyCode=(_a=event).keyCode,metaKey=_a.metaKey,ctrlKey=_a.ctrlKey,altKey=_a.altKey,!(metaKey||ctrlKey||altKey)&&(keyCode>=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}},[])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdateEffect_1=__importDefault(__webpack_require__(62));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var _a=react_1.useState(0),currentIndex=_a[0],setCurrentIndex=_a[1];useUpdateEffect_1.default(function(){stateSet[currentIndex]||setCurrentIndex(stateSet.length-1)},[stateSet]);var next=react_1.useCallback(function(){var nextStateIndex=stateSet.length===currentIndex+1?0:currentIndex+1;setCurrentIndex(nextStateIndex)},[stateSet,currentIndex]),prev=react_1.useCallback(function(){var prevStateIndex=0===currentIndex?stateSet.length-1:currentIndex-1;setCurrentIndex(prevStateIndex)},[stateSet,currentIndex]);return{state:stateSet[currentIndex],next:next,prev:prev}}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUnmount_1=__importDefault(__webpack_require__(161));exports.default=function(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(null),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);var timeoutCallback_1=function(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=null};timeout.current=setTimeout(timeoutCallback_1,ms)}},[value]),useUnmount_1.default(function(){clearTimeout(timeout.current)}),state}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUnmount_1=__importDefault(__webpack_require__(161));exports.default=function(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(null),nextArgs=react_1.useRef(null),hasNextArgs=react_1.useRef(!1);return react_1.useEffect(function(){if(timeout.current)nextArgs.current=args,hasNextArgs.current=!0;else{setState(fn.apply(void 0,args));var timeoutCallback_1=function(){hasNextArgs.current?(hasNextArgs.current=!1,setState(fn.apply(void 0,nextArgs.current)),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=null};timeout.current=setTimeout(timeoutCallback_1,ms)}},args),useUnmount_1.default(function(){clearTimeout(timeout.current)}),state}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useTimeoutFn_1=__importDefault(__webpack_require__(258)),useUpdate_1=__importDefault(__webpack_require__(111));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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(title){react_1.useEffect(function(){document.title=title},[title])}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var ts_easing_1=__webpack_require__(605),useRaf_1=__importDefault(__webpack_require__(257));exports.default=function(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";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useList_1=__importDefault(__webpack_require__(255));exports.default=function(comparisonFunction,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),items=_a[0],actions=_a[1];return[items,__assign({},actions,{upsert:function(upsertedItem){for(var itemWasFound=!1,i=0;i<items.length;i++){var existingItem=items[i];if(comparisonFunction(existingItem,upsertedItem)){actions.updateAt(i,upsertedItem),itemWasFound=!0;break}}itemWasFound||actions.push(upsertedItem)}})]}},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__importDefault(__webpack_require__(246)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_wait_1=__webpack_require__(609);exports.useWait=react_wait_1.useWait,exports.Waiter=react_wait_1.Waiter},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18);exports.default=function(){var frame=react_1.useRef(0),_a=react_1.useState({x:util_1.isClient?window.pageXOffset:0,y:util_1.isClient?window.pageYOffset:0}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){var handler=function(){cancelAnimationFrame(frame.current),frame.current=requestAnimationFrame(function(){setState({x:window.pageXOffset,y:window.pageYOffset})})};return window.addEventListener("scroll",handler,{capture:!1,passive:!0}),function(){cancelAnimationFrame(frame.current),window.removeEventListener("scroll",handler)}},[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(18);exports.default=function(initialWidth,initialHeight){void 0===initialWidth&&(initialWidth=1/0),void 0===initialHeight&&(initialHeight=1/0);var _a=react_1.useState({width:util_1.isClient?window.innerWidth:initialWidth,height:util_1.isClient?window.innerHeight:initialHeight}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){if(util_1.isClient){var handler_1=function(){setState({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",handler_1),function(){return window.removeEventListener("resize",handler_1)}}},[]),state}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="creatememo"><code>createMemo</code></h1>\n<p>Hook factory, receives a function to be memoized, returns a memoized React hook,\nwhich receives the same arguments and returns the same result as the original function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {createMemo} from &#39;react-use&#39;;\n\nconst fibonacci = n =&gt; {\n if (n === 0) return 0;\n if (n === 1) return 1;\n return fibonacci(n - 1) + fibonacci(n - 2);\n};\n\nconst useMemoFibonacci = createMemo(fibonacci);\n\nconst Demo = () =&gt; {\n const result = useMemoFibonacci(10);\n\n return (\n &lt;div&gt;\n fib(10) = {result}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const useMemoFn = createMemo(fn);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),redux_logger_1=__importDefault(__webpack_require__(614)),redux_thunk_1=__importDefault(__webpack_require__(615)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),useThunkReducer=__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(_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(){return dispatch(addAndReset())}},"Add and reset"),React.createElement("button",{onClick:function(){return dispatch({type:"reset",payload:initialCount})}},"Reset"),React.createElement("button",{onClick:function(){return dispatch({type:"increment"})}},"+"),React.createElement("button",{onClick:function(){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__(616)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="createreducer"><code>createReducer</code></h1>\n<p>Factory for reducer hooks with custom middleware with an identical API as <a href="https://reactjs.org/docs/hooks-reference.html#usereducer">React&#39;s <code>useReducer</code></a>. Compatible with <a href="https://redux.js.org/advanced/middleware">Redux middlware</a>.</p>\n<h2 id="usage">Usage</h2>\n<p>An example with <a href="https://github.com/reduxjs/redux-thunk"><code>redux-thunk</code></a> and <a href="https://github.com/LogRocket/redux-logger"><code>redux-logger</code></a>.</p>\n<pre><code class="language-jsx">import { createReducer } from &#39;react-use&#39;;\nimport logger from &#39;redux-logger&#39;;\nimport thunk from &#39;redux-thunk&#39;;\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n switch (action.type) {\n case &#39;increment&#39;:\n return { count: state.count + 1 };\n case &#39;decrement&#39;:\n return { count: state.count - 1 };\n case &#39;reset&#39;:\n return { count: action.payload };\n default:\n throw new Error();\n }\n}\n\nconst Demo = ({ initialCount = 1 }) =&gt; {\n // Action creator to increment count, wait a second and then reset\n const addAndReset = React.useCallback(() =&gt; {\n return dispatch =&gt; {\n dispatch({ type: &#39;increment&#39; });\n\n setTimeout(() =&gt; {\n dispatch({ type: &#39;reset&#39;, payload: initialCount });\n }, 1000);\n };\n }, [initialCount]);\n\n const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n return (\n &lt;div&gt;\n &lt;p&gt;count: {state.count}&lt;/p&gt;\n &lt;button onClick={() =&gt; dispatch(addAndReset())}&gt;Add and reset&lt;/button&gt;\n &lt;button\n onClick={() =&gt; dispatch({ type: &#39;reset&#39;, payload: initialCount })}\n &gt;\n Reset\n &lt;/button&gt;\n &lt;button onClick={() =&gt; dispatch({ type: &#39;increment&#39; })}&gt;+&lt;/button&gt;\n &lt;button onClick={() =&gt; dispatch({ type: &#39;decrement&#39; })}&gt;-&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const useMiddlewareReducer = createReducer(...middlewares);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(81),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(_a){var delay=_a.delay,state=__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__(629)})}).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__(1)(module))},,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasync"><code>useAsync</code></h1>\n<p>React hook that resolves an <code>async</code> function or a function that returns\na promise;</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsync} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n const state = useAsync(async () =&gt; {\n const response = await fetch(url);\n const result = await response.text();\n return result\n }, [url]);\n\n return (\n &lt;div&gt;\n {state.loading\n ? &lt;div&gt;Loading...&lt;/div&gt;\n : state.error\n ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n }\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsync(fn, args?: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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(){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__(631)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasyncfn"><code>useAsyncFn</code></h1>\n<p>React hook that returns state and a callback for an <code>async</code> function or a\nfunction that returns a promise. The state is of the same shape as <code>useAsync</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsyncFn} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n const [state, fetch] = useAsyncFn(async () =&gt; {\n const response = await fetch(url);\n const result = await response.text();\n return result\n }, [url]);\n\n return (\n &lt;div&gt;\n {state.loading\n ? &lt;div&gt;Loading...&lt;/div&gt;\n : state.error\n ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n }\n &lt;button onClick={() =&gt; fetch()}&gt;Start loading&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsyncFn(fn, deps?: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(81),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(_a){var delay=_a.delay,state=__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(){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__(633)})}).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__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useasyncretry"><code>useAsyncRetry</code></h1>\n<p>Uses <code>useAsync</code> with an additional <code>retry</code> method to easily retry/refresh the async function;</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAsyncRetry} from &#39;react-use&#39;;\n\nconst Demo = ({url}) =&gt; {\n const state = useAsyncRetry(async () =&gt; {\n const response = await fetch(url);\n const result = await response.text();\n return result;\n }, [url]);\n\n return (\n &lt;div&gt;\n {state.loading\n ? &lt;div&gt;Loading...&lt;/div&gt;\n : state.error\n ? &lt;div&gt;Error: {state.error.message}&lt;/div&gt;\n : &lt;div&gt;Value: {state.value}&lt;/div&gt;\n }\n {!loading &amp;&amp; &lt;button onClick={() =&gt; state.retry()}&gt;Start loading&lt;/button&gt;}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useAsyncRetry(fn, args?: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function(){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__(635)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useaudio"><code>useAudio</code></h1>\n<p>Creates <code>&lt;audio&gt;</code> element, tracks its state and exposes playback controls.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useAudio} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [audio, state, controls, ref] = useAudio({\n src: &#39;https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3&#39;,\n autoPlay: true,\n });\n\n return (\n &lt;div&gt;\n {audio}\n &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n &lt;button onClick={controls.pause}&gt;Pause&lt;/button&gt;\n &lt;button onClick={controls.play}&gt;Play&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={controls.mute}&gt;Mute&lt;/button&gt;\n &lt;button onClick={controls.unmute}&gt;Un-mute&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={() =&gt; controls.volume(.1)}&gt;Volume: 10%&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.volume(.5)}&gt;Volume: 50%&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.volume(1)}&gt;Volume: 100%&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={() =&gt; controls.seek(state.time - 5)}&gt;-5 sec&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.seek(state.time + 5)}&gt;+5 sec&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(&lt;audio {...props}/&gt;);</code></pre>\n<p><code>audio</code> is React&#39;s <code>&lt;audio&gt;</code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx">&lt;div&gt;{audio}&lt;/div&gt;</code></pre>\n<p><code>state</code> tracks the state of the audio and has the following shape:</p>\n<pre><code class="language-json">{\n &quot;buffered&quot;: [\n {\n &quot;start&quot;: 0,\n &quot;end&quot;: 425.952625\n }\n ],\n &quot;time&quot;: 5.244996,\n &quot;duration&quot;: 425.952625,\n &quot;isPlaying&quot;: false,\n &quot;muted&quot;: false,\n &quot;volume&quot;: 1\n}</code></pre>\n<p><code>controls</code> is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:</p>\n<pre><code class="language-ts">interface AudioControls {\n play: () =&gt; Promise&lt;void&gt; | void;\n pause: () =&gt; void;\n mute: () =&gt; void;\n unmute: () =&gt; void;\n volume: (volume: number) =&gt; void;\n seek: (time: number) =&gt; void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code>&lt;audio&gt;</code> element, you can access the element by\n<code>ref.current</code>, note that it may be <code>null</code>.</p>\n<p>And finally, <code>props</code> &mdash; all props that <code>&lt;audio&gt;</code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var batteryState=__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__(637)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usebattery"><code>useBattery</code></h1>\n<p>React sensor hook that tracks battery status.</p>\n<blockquote>\n<p><strong>Note:</strong> current <code>BatteryManager</code> API state is obsolete.<br>Although it may still work in some browsers, its use is discouraged since it could be removed at any time.</p>\n</blockquote>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useBattery} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const batteryState = useBattery();\n\n if (!batteryState.isSupported) {\n return (\n &lt;div&gt;\n &lt;strong&gt;Battery sensor&lt;/strong&gt;: &lt;span&gt;not supported&lt;/span&gt;\n &lt;/div&gt;\n );\n }\n\n if (!batteryState.fetched) {\n return (\n &lt;div&gt;\n &lt;strong&gt;Battery sensor&lt;/strong&gt;: &lt;span&gt;supported&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Battery state&lt;/strong&gt;: &lt;span&gt;fetching&lt;/span&gt;\n &lt;/div&gt;\n );\n }\n\n return (\n &lt;div&gt;\n &lt;strong&gt;Battery sensor&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;supported&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Battery state&lt;/strong&gt;: &lt;span&gt;fetched&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Charge level&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ (batteryState.level * 100).toFixed(0) }%&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Charging&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ batteryState.charging ? &#39;yes&#39; : &#39;no&#39; }&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Charging time&lt;/strong&gt;:&amp;nbsp;&amp;nbsp;\n &lt;span&gt;{ batteryState.chargingTime ? batteryState.chargingTime : &#39;finished&#39; }&lt;/span&gt; &lt;br /&gt;\n &lt;strong&gt;Discharging time&lt;/strong&gt;:&amp;nbsp;&amp;nbsp; &lt;span&gt;{ batteryState.dischargingTime }&lt;/span&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();</code></pre>\n<ul>\n<li><strong><code>isSupported</code></strong><em><code>: boolean</code></em> - whether browser/devise supports BatteryManager;</li>\n<li><strong><code>fetched</code></strong><em><code>: boolean</code></em> - whether battery state is fetched;</li>\n<li><strong><code>level</code></strong><em><code>: number</code></em> - representing the system&#39;s battery charge level scaled to a value between 0.0 and 1.0.</li>\n<li><strong><code>charging</code></strong><em><code>: boolean</code></em> - indicating whether or not the battery is currently being charged.</li>\n<li><strong><code>dischargingTime</code></strong><em><code>: number</code></em> - remaining time in seconds until the battery is completely discharged and the system will suspend.</li>\n<li><strong><code>chargingTime</code></strong><em><code>: number</code></em> - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return __1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),React.createElement("div",null,dirty&&React.createElement("p",null,"Try to reload or close tab"),React.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(639)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usebeforeunload"><code>useBeforeUnload</code></h1>\n<p>React side-effect hook that shows browser alert when user try to reload or close the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useBeforeUnload} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [dirty, toggleDirty] = useToggle(false);\n useBeforeUnload(dirty, &#39;You have unsaved changes, are you sure?&#39;);\n\n return (\n &lt;div&gt;\n {dirty &amp;&amp; &lt;p&gt;Try to reload or close tab&lt;/p&gt;}\n &lt;button onClick={() =&gt; toggleDirty()}&gt;{dirty ? &#39;Disable&#39; : &#39;Enable&#39;}&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useBoolean",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(259)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var ref=react_2.useRef(null);return __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__(654)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useclickaway"><code>useClickAway</code></h1>\n<p>React UI hook that triggers a callback when user\nclicks outside the target element.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useClickAway} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const ref = useRef(null);\n useClickAway(ref, () =&gt; {\n console.log(&#39;OUTSIDE CLICKED&#39;);\n });\n\n return (\n &lt;div ref={ref} style={{\n width: 200,\n height: 200,\n background: &#39;red&#39;,\n }} /&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, [&#39;click&#39;])\nuseClickAway(ref, onMouseEvent, [&#39;mousedown&#39;, &#39;touchstart&#39;])</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=__1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function(){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__(656)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecopytoclipboard"><code>useCopyToClipboard</code></h1>\n<p>Copy text to a user&#39;s clipboard.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">const Demo = () =&gt; {\n const [text, setText] = React.useState(&#39;&#39;);\n const [state, copyToClipboard] = useCopyToClipboard();\n\n return (\n &lt;div&gt;\n &lt;input value={text} onChange={e =&gt; setText(e.target.value)} /&gt;\n &lt;button type=&quot;button&quot; onClick={() =&gt; copyToClipboard(text)}&gt;copy text&lt;/button&gt;\n {state.error\n ? &lt;p&gt;Unable to copy value: {state.error.message}&lt;/p&gt;\n : state.value &amp;&amp; &lt;p&gt;Copied {state.value}&lt;/p&gt;}\n &lt;/div&gt;\n )\n\n const [text, setText] = React.useState(&#39;&#39;);\n const [copied, copyToClipboard] = useCopyToClipboard(text);\n\n return (\n &lt;div&gt;\n &lt;input value={text} onChange={e =&gt; setText(e.target.value)} /&gt;\n &lt;button type=&quot;button&quot; onClick={copyToClipboard}&gt;copy text&lt;/button&gt;\n &lt;div&gt;Copied: {copied ? &#39;Yes&#39; : &#39;No&#39;}&lt;/div&gt;\n &lt;/div&gt;\n )\n}</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [state, copyToClipboard] = useCopyToClipboard();</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useCounter(1),min=_a[0],_b=_a[1],incMin=_b.inc,decMin=_b.dec,_c=__1.useCounter(10),max=_c[0],_d=_c[1],incMax=_d.inc,decMax=_d.dec,_e=__1.useCounter(5,max,min),value=_e[0],_f=_e[1],inc=_f.inc,dec=_f.dec,set=_f.set,reset=_f.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(){return inc()}},"Increment"),React.createElement("button",{onClick:function(){return dec()}},"Decrement"),React.createElement("button",{onClick:function(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function(){return reset()}},"Reset"),React.createElement("button",{onClick:function(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function(){return incMin()}},"Increment"),React.createElement("button",{onClick:function(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function(){return incMax()}},"Increment"),React.createElement("button",{onClick:function(){return decMax()}},"Decrement"))};react_1.storiesOf("State|useCounter",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(658)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecounter"><code>useCounter</code></h1>\n<p>React state hook that tracks a numeric value.</p>\n<p><code>useNumber</code> is an alias for <code>useCounter</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useNumber} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n return (\n &lt;div&gt;\n &lt;div&gt;\n current: { value } [min: { min }; max: { max }]\n &lt;/div&gt;\n\n &lt;br /&gt;\n Current value: &lt;button onClick={ () =&gt; inc() }&gt;Increment&lt;/button&gt;\n &lt;button onClick={ () =&gt; dec() }&gt;Decrement&lt;/button&gt;\n &lt;button onClick={ () =&gt; inc(5) }&gt;Increment (+5)&lt;/button&gt;\n &lt;button onClick={ () =&gt; dec(5) }&gt;Decrement (-5)&lt;/button&gt;\n &lt;button onClick={ () =&gt; set(100) }&gt;Set 100&lt;/button&gt;\n &lt;button onClick={ () =&gt; reset() }&gt;Reset&lt;/button&gt;\n &lt;button onClick={ () =&gt; reset(25) }&gt;Reset (25)&lt;/button&gt;\n\n &lt;br /&gt;\n &lt;br /&gt;\n Min value:\n &lt;button onClick={ () =&gt; incMin() }&gt;Increment&lt;/button&gt;\n &lt;button onClick={ () =&gt; decMin() }&gt;Decrement&lt;/button&gt;\n\n &lt;br /&gt;\n &lt;br /&gt;\n Max value:\n &lt;button onClick={ () =&gt; incMax() }&gt;Increment&lt;/button&gt;\n &lt;button onClick={ () =&gt; decMax() }&gt;Decrement&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, 20: number | null = null);</code></pre>\n<ul>\n<li><code>current</code> - current counter value;</li>\n<li><code>get(): number</code> - getter of current counter value;</li>\n<li><code>inc(delta: number): void</code> - increment current value;</li>\n<li><code>dec(delta: number): void</code> - decrement current value;</li>\n<li><code>set(value: number): void</code> - set arbitrary value;</li>\n<li><code>reset(value: number): void</code> - as the <code>set</code>, but also will assign value by reference to the <code>initial</code> parameter;</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var className=__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__(660)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usecss"><code>useCss</code></h1>\n<p>React UI hook that changes <a href="https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation">CSS dynamically</a>. Works like &quot;virtual CSS&quot; &mdash;\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCss} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const className = useCss({\n color: &#39;red&#39;,\n border: &#39;1px solid red&#39;,\n &#39;&amp;:hover&#39;: {\n color: &#39;blue&#39;,\n },\n });\n\n return (\n &lt;div className={className}&gt;\n Hover me!\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const className = useCss({\n color: &#39;tomato&#39;,\n &#39;&amp;:hover&#39;: {\n color: &#39;orange&#39;,\n },\n});\n\nconst className = useCss({\n svg: {\n fill: &#39;tomato&#39;,\n },\n &#39;.global_class &amp;:hover svg&#39;: {\n fill: &#39;orange&#39;,\n },\n});\n\nconst className = useCss({\n color: &#39;tomato&#39;,\n &#39;@media only screen and (max-width: 600px)&#39;: {\n color: &#39;orange&#39;,\n &#39;&amp;:hover&#39;: {\n color: &#39;red&#39;,\n }\n },\n});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1];return __1.useDebounce(function(){setState("Typing stopped"),setDebouncedValue(val)},2e3,[val]),React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue))};react_1.storiesOf("Side effects|useDebounce",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(662)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedebounce"><code>useDebounce</code></h1>\n<p>React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.</p>\n<p>The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from &#39;react&#39;;\nimport { useDebounce } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [state, setState] = React.useState(&#39;Typing stopped&#39;);\n const [val, setVal] = React.useState(&#39;&#39;);\n const [debouncedValue, setDebouncedValue] = React.useState(&#39;&#39;);\n\n useDebounce(\n () =&gt; {\n setState(&#39;Typing stopped&#39;);\n setDebouncedValue(val);\n },\n 2000,\n [val]\n );\n\n return (\n &lt;div&gt;\n &lt;input\n type=&quot;text&quot;\n value={val}\n placeholder=&quot;Debounced input&quot;\n onChange={({ currentTarget }) =&gt; {\n setState(&#39;Waiting for typing to stop...&#39;);\n setVal(currentTarget.value);\n }}\n /&gt;\n &lt;div&gt;{state}&lt;/div&gt;\n &lt;div&gt;Debounced value: {debouncedValue}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useDebounce(fn, ms: number, args: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=__1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect(function(){countNormal<options.max&&incNormal()},[options]),__1.useDeepCompareEffect(function(){countNormal<options.max&&incDeep()},[options]),React.createElement("div",null,React.createElement("p",null,"useEffect: ",countNormal),React.createElement("p",null,"useDeepCompareEffect: ",countDeep))};react_1.storiesOf("Lifecycle|useDeepCompareEffect",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(664)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedeepcompareeffect"><code>useDeepCompareEffect</code></h1>\n<p>A modified useEffect hook that is using deep comparison on its dependencies instead of reference equality.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCounter, useDeepCompareEffect} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, {inc: inc}] = useCounter(0);\n const options = { step: 2 };\n\n useDeepCompareEffect(() =&gt; {\n inc(options.step)\n }, [options]);\n\n return (\n &lt;div&gt;\n &lt;p&gt;useDeepCompareEffect: {count}&lt;/p&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useDeepCompareEffect(effect: () =&gt; void | (() =&gt; void | undefined), deps: any[]);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useDefault({name:"Mathers"},{name:"Marshall"}),user=_a[0],setUser=_a[1];return React.createElement("div",null,React.createElement("div",null,"User: ",user.name),React.createElement("input",{onChange:function(e){return setUser({name:e.target.value})}}),React.createElement("button",{onClick:function(){return setUser(null)}},"set to null"))};react_1.storiesOf("State|useDefault",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(666)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usedefault"><code>useDefault</code></h1>\n<p>React state hook that returns the default value when state is null or undefined.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useDefault} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const initialUser = { name: &#39;Marshall&#39; }\n const defaultUser = { name: &#39;Mathers&#39; }\n const [user, setUser] = useDefault(defaultUser, initialUser);\n\n return (\n &lt;div&gt;\n &lt;div&gt;User: {user.name}&lt;/div&gt;\n &lt;input onChange={e =&gt; setUser({ name: e.target.value })} /&gt;\n &lt;button onClick={() =&gt; setUser(null)}&gt;set to null&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useDrop({onFiles:addon_actions_1.action("onFiles"),onUri:addon_actions_1.action("onUri"),onText:addon_actions_1.action("onText")}),style=__assign({width:300,height:200,margin:"50px auto",border:"1px dotted #000",textAlign:"center",lineHeight:"200px"},state.over?{border:"1px dotted green",outline:"3px solid yellow",background:"#f8f8f8"}:{});return React.createElement("div",null,React.createElement("div",{style:style},"Drop anywhere on page"),React.createElement("div",{style:{maxWidth:300,margin:"0 auto"}},React.createElement("ul",{style:{margin:0,padding:"10px 18px"}},React.createElement("li",null,"See logs in ",React.createElement("code",null,"Actions")," tab."),React.createElement("li",null,"Drag in and drop files."),React.createElement("li",null,React.createElement("code",null,"Cmd + V")," paste text here."),React.createElement("li",null,"Drag in images from other tabs."),React.createElement("li",null,"Drag in link from navigation bar."),React.createElement("li",null,"Below is state returned by the hook:")),React.createElement("pre",null,JSON.stringify(state,null,4))))};react_1.storiesOf("UI|useDrop",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(262)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useDropArea({onFiles:addon_actions_1.action("onFiles"),onUri:addon_actions_1.action("onUri"),onText:addon_actions_1.action("onText")}),bond=_a[0],state=_a[1],style=__assign({width:300,height:200,margin:"50px auto",border:"1px solid #000",textAlign:"center",lineHeight:"200px"},state.over?{border:"1px solid green",outline:"3px solid yellow",background:"#f8f8f8"}:{});return React.createElement("div",null,React.createElement("div",__assign({},bond,{style:style}),"Drop here"),React.createElement("div",{style:{maxWidth:300,margin:"0 auto"}},React.createElement("ul",{style:{margin:0,padding:"10px 18px"}},React.createElement("li",null,"See logs in ",React.createElement("code",null,"Actions")," tab."),React.createElement("li",null,"Drag in and drop files."),React.createElement("li",null,React.createElement("code",null,"Cmd + V")," paste text here."),React.createElement("li",null,"Drag in images from other tabs."),React.createElement("li",null,"Drag in link from navigation bar."),React.createElement("li",null,"Below is state returned by the hook:")),React.createElement("pre",null,JSON.stringify(state,null,4))))};react_1.storiesOf("UI|useDropArea",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(262)})}).add("Default",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ConsoleStory_1=__importDefault(__webpack_require__(166)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.useEffectOnce(function(){return console.log("Running effect once on mount"),function(){console.log("Running clean-up of effect on unmount")}}),React.createElement(ConsoleStory_1.default,null)};react_1.storiesOf("Lifecycle|useEffectOnce",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(670)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useeffectonce"><code>useEffectOnce</code></h1>\n<p>React lifecycle hook that runs an effect only once.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useEffectOnce} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useEffectOnce(() =&gt; {\n console.log(&#39;Running effect once on mount&#39;)\n\n return () =&gt; {\n console.log(&#39;Running clean-up of effect on unmount&#39;)\n }\n });\n\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useEffectOnce(effect: EffectCallback);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),CenterStory_1=__webpack_require__(114),ShowDocs_1=__importDefault(__webpack_require__(3)),useCallback=React.useCallback,Demo=function(){var _a=__1.useList(),list=_a[0],_b=_a[1],push=_b.push,clear=_b.clear,onKeyDown=useCallback(function(_a){var key=_a.key;"r"===key&&clear(),push(key)},[]);return __1.useEvent("keydown",onKeyDown),React.createElement(CenterStory_1.CenterStory,null,React.createElement("p",null,"Press some keys on your keyboard, ",React.createElement("code",{style:{color:"tomato"}},"r")," key resets the list"),React.createElement("pre",null,JSON.stringify(list,null,4)))};react_1.storiesOf("Sensors|useEvent",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(672)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useevent"><code>useEvent</code></h1>\n<p>React sensor hook that subscribes a <code>handler</code> to events.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useEvent, useList} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [list, {push, clear}] = useList();\n\n const onKeyDown = useCallback(({key}) =&gt; {\n if (key === &#39;r&#39;) clear();\n push(key);\n }, []);\n\n useEvent(&#39;keydown&#39;, onKeyDown);\n\n return (\n &lt;div&gt;\n &lt;p&gt;\n Press some keys on your keyboard, &lt;code style={{color: &#39;tomato&#39;}}&gt;r&lt;/code&gt; key resets the list\n &lt;/p&gt;\n &lt;pre&gt;\n {JSON.stringify(list, null, 4)}\n &lt;/pre&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">useEvent(&#39;keydown&#39;, handler)\nuseEvent(&#39;scroll&#39;, handler, window, {capture: true})</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),NewTabStory_1=__importDefault(__webpack_require__(263)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.useFavicon("https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"),React.createElement(NewTabStory_1.default,null,"Favicon should be the Stack Overflow logo")};react_1.storiesOf("Side effects|useFavicon",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(674)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usefavicon"><code>useFavicon</code></h1>\n<p>React side-effect hook sets the favicon of the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useFavicon} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useFavicon(&#39;https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico&#39;);\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useToggle(!1),show=_a[0],toggle=_a[1],ref=React.useRef(null),videoRef=React.useRef(null),isFullScreen=__1.useFullscreen(ref,show,{onClose:function(){return toggle(!1)},video:videoRef}),controls=React.createElement("div",{style:{background:"white",padding:"20px"}},React.createElement("div",null,isFullScreen?"is full screen":"not full screen"),React.createElement("button",{onClick:function(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"));return React.createElement("div",null,React.createElement("div",{ref:ref,style:{backgroundColor:isFullScreen?"black":"grey",width:400,height:300,display:"flex",justifyContent:"center",alignItems:"center"}},React.createElement("video",{ref:videoRef,style:{width:"70%"},src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",autoPlay:!0}),isFullScreen&&controls),React.createElement("br",null),React.createElement("br",null),!isFullScreen&&controls)};react_1.storiesOf("UI|useFullscreen",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(676)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usefullscreen"><code>useFullscreen</code></h1>\n<p>Display an element full-screen, optional fallback for fullscreen video on iOS.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useFullscreen, useToggle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const ref = useRef(null)\n const [show, toggle] = useToggle(false);\n const isFullscreen = useFullscreen(ref, show, {onClose: () =&gt; toggle(false)});\n\n return (\n &lt;div ref={ref} style={{backgroundColor: &#39;white&#39;}}&gt;\n &lt;div&gt;{isFullscreen ? &#39;Fullscreen&#39; : &#39;Not fullscreen&#39;}&lt;/div&gt;\n &lt;button onClick={() =&gt; toggle()}&gt;Toggle&lt;/button&gt;\n &lt;video src=&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot; autoPlay /&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useFullscreen(ref, show, {onClose})</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useGeolocation();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useGeolocation",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(678)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegeolocation"><code>useGeolocation</code></h1>\n<p>React sensor hook that tracks user&#39;s geographic location. This hook accepts <a href="https://developer.mozilla.org/docs/Web/API/PositionOptions">position options</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useGeolocation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useGeolocation();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useGeolocation(options: PositionOptions)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useGetSet(0),get=_a[0],set=_a[1];return React.createElement("button",{onClick:function(){setTimeout(function(){set(get()+1)},1e3)}},"Clicked: ",get())},DemoWrong=function(){var _a=react_2.useState(0),cnt=_a[0],set=_a[1];return React.createElement("button",{onClick:function(){setTimeout(function(){set(cnt+1)},1e3)}},"Clicked: ",cnt)};react_1.storiesOf("State|useGetSet",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(680)})}).add("Demo, 1s delay",function(){return React.createElement(Demo,null)}).add("DemoWrong, 1s delay",function(){return React.createElement(DemoWrong,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegetset"><code>useGetSet</code></h1>\n<p>React state hook that returns state getter function instead of\nraw state itself, this prevents subtle bugs when state is used\nin nested functions.</p>\n<h2 id="usage">Usage</h2>\n<p>Below example uses <code>useGetSet</code> to increment a number after 1 second\non each click.</p>\n<pre><code class="language-jsx">import {useGetSet} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [get, set] = useGetSet(0);\n const onClick = () =&gt; {\n setTimeout(() =&gt; {\n set(get() + 1)\n }, 1_000);\n };\n\n return (\n &lt;button onClick={onClick}&gt;Clicked: {get()}&lt;/button&gt;\n );\n};</code></pre>\n<p>If you would do this example in a naive way using regular <code>useState</code>\nhook, the counter would not increment correctly if you click fast multiple times.</p>\n<pre><code class="language-jsx">const DemoWrong = () =&gt; {\n const [cnt, set] = useState(0);\n const onClick = () =&gt; {\n setTimeout(() =&gt; {\n set(cnt + 1)\n }, 1_000);\n };\n\n return (\n &lt;button onClick={onClick}&gt;Clicked: {cnt}&lt;/button&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useGetSetState({cnt:0}),get=_a[0],setState=_a[1];return React.createElement("button",{onClick:function(){setTimeout(function(){setState({cnt:get().cnt+1})},1e3)}},"Clicked: ",get().cnt)};react_1.storiesOf("State|useGetSetState",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(682)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usegetsetstate"><code>useGetSetState</code></h1>\n<p>A mix of <code>useGetSet</code> and <code>useGetSetState</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useGetSetState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [get, setState] = useGetSetState({cnt: 0});\n const onClick = () =&gt; {\n setTimeout(() =&gt; {\n setState({cnt: get().cnt + 1})\n }, 1_000);\n };\n\n return (\n &lt;button onClick={onClick}&gt;Clicked: {get().cnt}&lt;/button&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Clock=function(_a){var useInt=_a.useInt,_b=React.useState(0),count=_b[0],setCount=_b[1];useInt(function(){setCount(function(cnt){return cnt+1})},1e3);var m=Math.floor(count/60),s=count%60;m=m<10?"0"+m:String(m),s=s<10?"0"+s:String(s);return React.createElement("div",{style:{padding:"20px 5px",border:"1px solid #fafafa",float:"left",fontFamily:"monospace"}},m+":"+s)},Demo=function(_a){var useInt=_a.useInt,_b=React.useState(!1),showSecondClock=_b[0],setShowSecondClock=_b[1];__1.useTimeoutFn(function(){setShowSecondClock(!0)},500);return React.createElement(React.Fragment,null,React.createElement("div",{style:{width:"100%",clear:"both"}},React.createElement("h2",{style:{fontFamily:"sans",fontSize:"20px",padding:"0",lineHeight:"1.5em"}},useInt.name),React.createElement(Clock,{useInt:useInt}),showSecondClock?React.createElement(Clock,{useInt:useInt}):null))};react_1.storiesOf("Animation|useHarmonicIntervalFn",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(684)})}).add("Demo",function(){return React.createElement(React.Fragment,null,React.createElement(Demo,{useInt:__1.useInterval}),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement("br",null),React.createElement(Demo,{useInt:__1.useHarmonicIntervalFn}))})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useharmonicintervalfn"><code>useHarmonicIntervalFn</code></h1>\n<p>Same as <a href="./useInterval.md"><code>useInterval</code></a> hook, but triggers all effects with the same delay\nat the same time.</p>\n<p>For example, this allows you to create ticking clocks on the page which re-render second counter\nall at the same time.</p>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useHarmonicIntervalFn(fn, delay?: number)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useHover(function(hasHovered){return React.createElement("div",null,"Hover me! ",hasHovered&&"Thanks!")}),hoverable=_a[0],hovered=_a[1];return React.createElement("div",null,hoverable,React.createElement("div",null,hovered?"HOVERED":""))};react_1.storiesOf("Sensors|useHover",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(264)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var ref=react_2.useRef(null),isHovered=__1.useHoverDirty(ref);return React.createElement("div",{ref:ref},isHovered?"😁":"☹️")};react_1.storiesOf("Sensors|useHoverDirty",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(264)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(3e3),idleDelay=_a[0],setIdleDelay=_a[1],isIdle=__1.useIdle(idleDelay);return React.createElement("div",null,"Idle delay ms: ",React.createElement("input",{type:"number",value:idleDelay,onChange:function(_a){var target=_a.target;return setIdleDelay(+target.value)}}),React.createElement("div",null,"User is idle: ",isIdle?"Yes":"No"))};react_1.storiesOf("Sensors|useIdle",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(688)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useidle"><code>useIdle</code></h1>\n<p>React sensor hook that tracks if user on the page is idle.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useIdle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const isIdle = useIdle(3e3);\n\n return (\n &lt;div&gt;\n &lt;div&gt;User is idle: {isIdle ? &#39;Yes 😴&#39; : &#39;Nope&#39;}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useIdle(ms, initialState);</code></pre>\n<ul>\n<li><code>ms</code> &mdash; time in milliseconds after which to consider use idle, defaults to <code>60e3</code> &mdash; one minute.</li>\n<li><code>initialState</code> &mdash; whether to consider user initially idle, defaults to false.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(1e3),delay=_b[0],setDelay=_b[1];return __1.useInterval(function(){setCount(count+1)},delay),React.createElement("div",null,React.createElement("div",null,"delay: ",React.createElement("input",{value:delay,onChange:function handleDelayChange(e){setDelay(Number(e.target.value))}})),React.createElement("h1",null,"count: ",count),React.createElement("div",null,React.createElement("button",{onClick:function(){return setDelay(delay?null:1e3)}},delay?"stop":"start")))};react_1.storiesOf("Animation|useInterval",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(690)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useinterval"><code>useInterval</code></h1>\n<p>React hook that allow you using declarative <code>setInterval</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport {useInterval} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, setCount] = React.useState(0);\n const [delay, setDelay] = React.useState(1000);\n\n useInterval(() =&gt; {\n setCount(count + 1);\n }, delay);\n\n function handleDelayChange(e) {\n setDelay(Number(e.target.value));\n }\n\n return (\n &lt;div&gt;\n &lt;div&gt;\n delay: &lt;input value={delay} onChange={handleDelayChange} /&gt;\n &lt;/div&gt;\n &lt;h1&gt;count: {count}&lt;/h1&gt;\n &lt;div&gt;\n &lt;button onClick={() =&gt; setDelay(delay ? null : 1000)}&gt;{delay ? &#39;stop&#39; : &#39;start&#39;}&lt;/button&gt;\n &lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useInterval(fn, delay?: number)</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),ShowDocs_1=__importDefault(__webpack_require__(3));react_1.storiesOf("Lifecycle|useIsomorphicLayoutEffect",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(692)})})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useisomorphiclayouteffect"><code>useIsomorphicLayoutEffect</code></h1>\n<p><code>useLayoutEffect</code> that does not show warning when server-side rendering, see <a href="https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a">Alex Reardon&#39;s article</a> for more info.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useIsomorphicLayoutEffect} from &#39;react-use&#39;;\n\nconst Demo = ({value}) =&gt; {\n useIsomorphicLayoutEffect(() =&gt; {\n window.console.log(value)\n }, [value]);\n\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useIsomorphicLayoutEffect(effect: EffectCallback, deps?: ReadonlyArray&lt;any&gt; | undefined);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),CenterStory_1=__webpack_require__(114),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1];return __1.useKey("]",function(){return setCount(function(currentCount){return++currentCount})}),__1.useKey("[",function(){return setCount(function(currentCount){return--currentCount})}),__1.useKey("r",function(){return setCount(function(){return 0})}),React.createElement(CenterStory_1.CenterStory,null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"["),", ",React.createElement("code",null,"]"),", and ",React.createElement("code",null,"r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))},CounterDemo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1];return __1.useKey("ArrowUp",function(){return setCount(function(currentCount){return++currentCount})}),React.createElement("div",null,"Press arrow up: ",count)};react_1.storiesOf("Sensors/useKey",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(694)})}).add("Demo",function(){return React.createElement(Demo,null)}).add("Simple counter",function(){return React.createElement(CounterDemo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekey"><code>useKey</code></h1>\n<p>React UI sensor hook that executes a <code>handler</code> when a keyboard key is used.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useKey} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, set] = useState(0);\n const increment = () =&gt; set(count =&gt; ++count);\n useKey(&#39;ArrowUp&#39;, increment);\n\n return (\n &lt;div&gt;\n Press arrow up: {count}\n &lt;/div&gt;\n );\n};</code></pre>\n<p>Or as render-prop:</p>\n<pre><code class="language-jsx">import UseKey from &#39;react-use/lib/comps/UseKey&#39;;\n\n&lt;UseKey filter=&#39;a&#39; fn={() =&gt; alert(&#39;&quot;a&quot; key pressed!&#39;)} /&gt;</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKey(filter, handler, options?, deps?)</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">useKey(&#39;a&#39;, () =&gt; alert(&#39;&quot;a&quot; pressed&#39;));\n\nconst predicate = (event) =&gt; event.key === &#39;a&#39;\nuseKey(predicate, handler, {event: &#39;keyup&#39;});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),CenterStory_1=__webpack_require__(114),ShowDocs_1=__importDefault(__webpack_require__(3)),keys=["1","2","3","4","5","6","7","8","9","0"],Demo=function(){for(var states=[],_i=0,keys_1=keys;_i<keys_1.length;_i++){var key=keys_1[_i];states.push(__1.useKeyPress(key)[0])}return React.createElement(CenterStory_1.CenterStory,null,React.createElement("div",{style:{textAlign:"center"}},"Try pressing numbers",React.createElement("br",null),states.reduce(function(s,pressed,index){return s+(pressed?(s?" + ":"")+keys[index]:"")},"")))};react_1.storiesOf("Sensors|useKeyPress",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(696)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeypress"><code>useKeyPress</code></h1>\n<p>React UI sensor hook that detects when the user is pressing a specific\nkey on their keyboard.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useKeyPress} from &#39;react-use&#39;;\n\nconst keys = [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;, &#39;7&#39;, &#39;8&#39;, &#39;9&#39;, &#39;0&#39;];\n\nconst Demo = () =&gt; {\n const states = [];\n for (const key of keys) states.push(useKeyPress(key)[0]);\n\n return (\n &lt;div style={{textAlign: &#39;center&#39;}}&gt;\n Try pressing numbers\n &lt;br /&gt;\n {states.reduce((s, pressed, index) =&gt; s + (pressed ? (s ? &#39; + &#39; : &#39;&#39;) + keys[index] : &#39;&#39;), &#39;&#39;)}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const isPressed = useKeyPress(&#39;a&#39;);\n\nconst predicate = (event) =&gt; event.key === &#39;a&#39;;\nconst isPressed = useKeyPress(predicate);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],decrement=function(){console.log("DECREMENT"),setCount(function(currentCount){return--currentCount})};return __1.useKeyPressEvent("]",function(){console.log("INCREMENT"),setCount(function(currentCount){return++currentCount})}),__1.useKeyPressEvent("[",decrement,decrement),__1.useKeyPressEvent("r",function(){return setCount(function(){return 0})}),React.createElement("div",null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"["),", ",React.createElement("code",null,"]"),", and ",React.createElement("code",null,"r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))},DemoKeyboardJs=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],increment=function(){console.log("INCREMENT"),setCount(function(currentCount){return++currentCount})},decrement=function(){console.log("DECREMENT"),setCount(function(currentCount){return--currentCount})};return __1.useKeyPressEvent("q + ]",increment,increment,__1.useKeyboardJs),__1.useKeyPressEvent("q + [",decrement,decrement,__1.useKeyboardJs),__1.useKeyPressEvent("q + r",function(){return setCount(function(){return 0})},null,__1.useKeyboardJs),React.createElement("div",null,React.createElement("style",{dangerouslySetInnerHTML:{__html:"code {color: red}"}}),React.createElement("p",null,"Try pressing ",React.createElement("code",null,"q + ["),", ",React.createElement("code",null,"q + ]"),", and ",React.createElement("code",null,"q + r")," to see the count incremented and decremented."),React.createElement("p",null,"Count: ",count))};react_1.storiesOf("Sensors/useKeyPressEvent",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(698)})}).add("Demo",function(){return React.createElement(Demo,null)}).add("KeyboardJs",function(){return React.createElement(DemoKeyboardJs,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeypressevent"><code>useKeyPressEvent</code></h1>\n<p>This hook fires <code>keydown</code> and <code>keyup</code> calllbacks, similar to how <a href="./useKey.md"><code>useKey</code></a>\nhook does, but it only triggers each callback once per press cycle. For example,\nif you press and hold a key, it will fire <code>keydown</code> callback only once.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from React;\nimport {useKeyPressEvent} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, setCount] = useState(0);\n\n const increment = () =&gt; setCount(count =&gt; ++count);\n const decrement = () =&gt; setCount(count =&gt; --count);\n const reset = () =&gt; setCount(count =&gt; 0);\n\n useKeyPressEvent(&#39;]&#39;, increment, increment);\n useKeyPressEvent(&#39;[&#39;, decrement, decrement);\n useKeyPressEvent(&#39;r&#39;, reset);\n\n return (\n &lt;div&gt;\n &lt;p&gt;\n Try pressing &lt;code&gt;[&lt;/code&gt;, &lt;code&gt;]&lt;/code&gt;, and &lt;code&gt;r&lt;/code&gt; to\n see the count incremented and decremented.&lt;/p&gt;\n &lt;p&gt;Count: {count}&lt;/p&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown);\nuseKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown, keyup);\nuseKeyPressEvent(&#39;&lt;key&gt;&#39;, keydown, keyup, useKeyPress);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(81),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),useKeyboardJs_1=__importDefault(__webpack_require__(700)),CenterStory_1=__webpack_require__(114),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(_a){var combo=_a.combo,pressed=useKeyboardJs_1.default(combo)[0];return React.createElement(CenterStory_1.CenterStory,null,React.createElement("div",{style:{textAlign:"center"}},"Press"," ",React.createElement("code",{style:{color:"red",background:"#f6f6f6",padding:"3px 6px",borderRadius:"3px"}},combo)," ","combo",React.createElement("br",null),React.createElement("br",null),React.createElement("div",{style:{fontSize:"4em"}},pressed?"💋":"")))};react_1.storiesOf("Sensors|useKeyboardJs",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(704)})}).add("Demo",function(){var combo=addon_knobs_1.text("Combo","i + l + u");return React.createElement(Demo,{combo:combo})})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";var __importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMount_1=__importDefault(__webpack_require__(160));exports.default=function(combination){var _a=react_1.useState([!1,null]),state=_a[0],set=_a[1],_b=react_1.useState(null),keyboardJs=_b[0],setKeyboardJs=_b[1];return useMount_1.default(function(){Promise.resolve().then(function(){return __importStar(__webpack_require__(701))}).then(setKeyboardJs)}),react_1.useEffect(function(){if(keyboardJs){var down=function(event){return set([!0,event])},up=function(event){return set([!1,event])};return keyboardJs.bind(combination,down,up),function(){keyboardJs.unbind(combination,down,up)}}},[combination,keyboardJs]),state}},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usekeyboardjs"><code>useKeyboardJs</code></h1>\n<p>React UI sensor hook that detects complex key combos like detecting when\nmultiple keys are held down at the same time or requiring them to be held down in a specified order.</p>\n<p>Via <a href="https://github.com/RobertWHurst/KeyboardJS">KeyboardJS key combos</a>.\nCheck its documentation for further details on how to make combo strings.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import useKeyboardJs from &#39;react-use/lib/useKeyboardJs&#39;;\n\nconst Demo = () =&gt; {\n const [isPressed] = useKeyboardJs(&#39;a + b&#39;);\n\n return (\n &lt;div&gt;\n [a + b] pressed: {isPressed ? &#39;Yes&#39; : &#39;No&#39;}\n &lt;/div&gt;\n );\n};</code></pre>\n<p>Note: Because of dependency on <code>keyboardjs</code> you have to import this hook directly like shown above.</p>\n<h2 id="requirements">Requirements</h2>\n<p>Install <a href="https://github.com/RobertWHurst/KeyboardJS"><code>keyboardjs</code></a> peer dependency:</p>\n<pre><code class="language-bash">npm add keyboardjs\n# or\nyarn add keyboardjs</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKeyboardJs(combination: string | string[]): [isPressed: boolean, event?: KeyboardEvent]</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.useLifecycles(function(){return console.log("MOUNTED")},function(){return console.log("UNMOUNTED")}),null};react_1.storiesOf("Lifecycle|useLifecycles",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(706)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselifecycles"><code>useLifecycles</code></h1>\n<p>React lifecycle hook that call <code>mount</code> and <code>unmount</code> callbacks, when\ncomponent is mounted and un-mounted, respectively.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLifecycles} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useLifecycles(() =&gt; console.log(&#39;MOUNTED&#39;), () =&gt; console.log(&#39;UNMOUNTED&#39;));\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLifecycles(mount, unmount);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useList(),list=_a[0],_b=_a[1],set=_b.set,push=_b.push;return React.createElement("div",null,React.createElement("div",null,list.join(",")),React.createElement("button",{onClick:function(){return set([])}},"Reset"),React.createElement("button",{onClick:function(){return push(Date.now())}},"Push"))};react_1.storiesOf("State|useList",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(708)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselist"><code>useList</code></h1>\n<p>React state hook that tracks a value of an array.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useList} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [list, {set, push}] = useList();\n\n return (\n &lt;div&gt;\n &lt;div&gt;{list.join(&#39;,&#39;)}&lt;/div&gt;\n &lt;button onClick={() =&gt; set([])}&gt;Reset&lt;/button&gt;\n &lt;button onClick={() =&gt; push(Date.now())}&gt;Push&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useLocalStorage("hello-key","foo"),value=_a[0],setValue=_a[1];return React.createElement("div",null,React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function(){return setValue("bar")}},"bar"),React.createElement("button",{onClick:function(){return setValue("baz")}},"baz"))};react_1.storiesOf("Side effects|useLocalStorage",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(710)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselocalstorage"><code>useLocalStorage</code></h1>\n<p>React side-effect hook that manages a single <code>localStorage</code> key.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLocalStorage} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [value, setValue] = useLocalStorage(&#39;my-key&#39;, &#39;foo&#39;);\n\n return (\n &lt;div&gt;\n &lt;div&gt;Value: {value}&lt;/div&gt;\n &lt;button onClick={() =&gt; setValue(&#39;bar&#39;)}&gt;bar&lt;/button&gt;\n &lt;button onClick={() =&gt; setValue(&#39;baz&#39;)}&gt;baz&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLocalStorage(key);\nuseLocalStorage(key, initialValue);\nuseLocalStorage(key, initialValue, raw);</code></pre>\n<ul>\n<li><code>key</code> &mdash; <code>localStorage</code> key to manage.</li>\n<li><code>initialValue</code> &mdash; initial value to set, if value in <code>localStorage</code> is empty.</li>\n<li><code>raw</code> &mdash; boolean, if set to <code>true</code>, hook will not attempt to JSON serialize stored values.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),go=function(page){return history.pushState({},"",page)},Demo=function(){var state=__1.useLocation();return React.createElement("div",null,React.createElement("button",{onClick:function(){return go("page-1")}},"Page 1"),React.createElement("button",{onClick:function(){return go("page-2")}},"Page 2"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Sensors|useLocation",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(712)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselocation"><code>useLocation</code></h1>\n<p>React sensor hook that tracks brower&#39;s location.</p>\n<p>For Internet Explorer you need to <a href="https://github.com/streamich/react-use/issues/73">install a polyfill</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLocation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useLocation();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),react_frame_component_1=__importDefault(__webpack_require__(714)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useToggle(!1),locked=_a[0],toggleLocked=_a[1];return __1.useLockBodyScroll(locked),React.createElement("div",{style:{height:"200vh"}},React.createElement("button",{onClick:function(){return toggleLocked()},style:{position:"fixed",left:0}},locked?"Unlock":"Lock"))},AnotherComponent=function(){var _a=__1.useToggle(!1),locked=_a[0],toggleLocked=_a[1];return __1.useLockBodyScroll(locked),React.createElement("button",{onClick:function(){return toggleLocked()},style:{position:"fixed",left:0,top:40}},locked?"Unlock":"Lock")},IframeComponent=function(){var _a=__1.useToggle(!1),mainLocked=_a[0],toggleMainLocked=_a[1],_b=__1.useToggle(!1),iframeLocked=_b[0],toggleIframeLocked=_b[1],iframeElementRef=react_2.useRef(null);return __1.useLockBodyScroll(mainLocked),__1.useLockBodyScroll(iframeLocked,iframeElementRef),React.createElement("div",{style:{height:"200vh"}},React.createElement(react_frame_component_1.default,{style:{height:"50vh",width:"50vw"}},React.createElement("div",{style:{height:"200vh"},ref:iframeElementRef},React.createElement("button",{onClick:function(){return toggleMainLocked()},style:{position:"fixed",left:0,top:0}},mainLocked?"Unlock":"Lock"," main window scroll"),React.createElement("button",{onClick:function(){return toggleIframeLocked()},style:{position:"fixed",left:0,top:64}},iframeLocked?"Unlock":"Lock"," iframe window scroll"))))};react_1.storiesOf("Side effects|useLockBodyScroll",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(719)})}).add("Demo",function(){return React.createElement(Demo,null)}).add("Two hooks on page",function(){return React.createElement(React.Fragment,null,React.createElement(AnotherComponent,null),React.createElement(Demo,null),React.createElement(IframeComponent,null))}).add("Iframe",function(){return React.createElement(IframeComponent,null)})}).call(this,__webpack_require__(1)(module))},,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselockbodyscroll"><code>useLockBodyScroll</code></h1>\n<p>React side-effect hook that locks scrolling on the body element. Useful for modal and other overlay components.</p>\n<p>Accepts ref object pointing to any HTML element as second parameter. Parent body element will be found and it&#39;s scroll will be locked/unlocked. It is needed to proper iFrame handling.<br>By default it uses body element of script&#39;s parent window. </p>\n<blockquote>\n<p>Note: To improve performance you can pass body&#39;s or iframe&#39;s ref object, thus no parent lookup will be performed </p>\n</blockquote>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLockBodyScroll, useToggle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [locked, toggleLocked] = useToggle(false)\n\n useLockBodyScroll(locked);\n\n return (\n &lt;div&gt;\n &lt;button onClick={() =&gt; toggleLocked()}&gt;\n {locked ? &#39;Unlock&#39; : &#39;Lock&#39;}\n &lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useLockBodyScroll(locked: boolean = true, elementRef?: RefObject&lt;HTMLElement&gt;);</code></pre>\n<ul>\n<li><code>locked</code> &mdash; Hook will lock scrolling on the body element if <code>true</code>, defaults to <code>true</code></li>\n<li><code>elementRef</code> &mdash; The element ref object to find the body element. Can be either a ref to body or iframe element.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(81),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(props){var _a=__1.useCounter(0),state=_a[0],inc=_a[1].inc;return __1.useLogger("Demo",props,state),React.createElement(React.Fragment,null,React.createElement("p",{style:{fontWeight:props.bold?"bold":"normal"}},props.title),React.createElement("button",{onClick:function(){return inc()}},"Update state (",state,")"))};react_1.storiesOf("Lifecycle|useLogger",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(721)})}).add("Demo",function(){var props={title:addon_knobs_1.text("title","Open the developer console to see logs"),bold:addon_knobs_1.boolean("bold",!1)};return React.createElement(Demo,__assign({},props))})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="uselogger"><code>useLogger</code></h1>\n<p>React lifecycle hook that console logs parameters as component transitions through lifecycles.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLogger} from &#39;react-use&#39;;\n\nconst Demo = (props) =&gt; {\n useLogger(&#39;Demo&#39;, props);\n return null;\n};</code></pre>\n<h2 id="example-output">Example Output</h2>\n<pre><code>Demo mounted {}\nDemo updated {}\nDemo unmounted</code></pre><h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLogger(componentName: string, ...rest);</code></pre>\n<ul>\n<li><code>componentName</code> &mdash; component name.</li>\n<li><code>...rest</code> &mdash; parameters to log.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useMap({hello:"there"}),map=_a[0],_b=_a[1],set=_b.set,reset=_b.reset;return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(map,null,2)),React.createElement("button",{onClick:function(){return set(String(Date.now()),(new Date).toJSON())}},"Add"),React.createElement("button",{onClick:function(){return reset()}},"Reset"))};react_1.storiesOf("State|useMap",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(723)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemap"><code>useMap</code></h1>\n<p>React state hook that tracks a value of an object.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMap} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [map, {set, reset}] = useMap({\n hello: &#39;there&#39;,\n });\n\n return (\n &lt;div&gt;\n &lt;pre&gt;{JSON.stringify(map, null, 2)}&lt;/pre&gt;\n &lt;button onClick={() =&gt; set(String(Date.now()), (new Date()).toJSON())}&gt;Add&lt;/button&gt;\n &lt;button onClick={() =&gt; reset()}&gt;Reset&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var isWide=__1.useMedia("(min-width: 480px)");return React.createElement("div",null,"Screen is wide: ",isWide?"Yes":"No")};react_1.storiesOf("Sensors|useMedia",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(725)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemedia"><code>useMedia</code></h1>\n<p>React sensor hook that tracks state of a CSS media query.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMedia} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const isWide = useMedia(&#39;(min-width: 480px)&#39;);\n\n return (\n &lt;div&gt;\n Screen is wide: {isWide ? &#39;Yes&#39; : &#39;No&#39;}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMedia(query: string, defaultState: boolean = false): boolean;</code></pre>\n<p>The <code>defaultState</code> parameter is only used as a fallback for server side rendering.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useMediaDevices();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useMediaDevices",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(727)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemediadevices"><code>useMediaDevices</code></h1>\n<p>React sensor hook that tracks connected hardware devices.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMediaDevices} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useMediaDevices();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useMotion();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useMotion",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(729)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemotion"><code>useMotion</code></h1>\n<p>React sensor hook that uses device&#39;s acceleration sensor to track its motions.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMotion} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useMotion();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ConsoleStory_1=__importDefault(__webpack_require__(166)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.useMount(function(){return console.log("MOUNTED")}),React.createElement(ConsoleStory_1.default,null)};react_1.storiesOf("Lifecycle|useMount",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(731)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemount"><code>useMount</code></h1>\n<p>React lifecycle hook that calls a function after the component is mounted. Use <code>useEffectOnce</code> if you need both a mount and unmount function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMount} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useMount(() =&gt; console.log(&#39;MOUNTED&#39;));\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMount(fn: () =&gt; void);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var isMounted=__1.useMountedState(),updateState=React.useState()[1];return requestAnimationFrame(updateState),React.createElement("div",null,"This component is ",isMounted()?"MOUNTED":"NOT MOUNTED")};react_1.storiesOf("Lifecycle|useMountedState",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(733)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usemountedstate"><code>useMountedState</code></h1>\n<p>Lifecycle hook providing ability to check component&#39;s mount state.<br>Gives a function that will return <code>true</code> if component mounted and <code>false</code> otherwise.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport {useMountedState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const isMounted = useMountedState();\n\n React.useEffect(() =&gt; {\n setTimeout(() =&gt; {\n if (isMounted()) {\n // ...\n } else {\n // ...\n }\n }, 1000);\n });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var ref=React.useRef(null),state=__1.useMouse(ref);return React.createElement(React.Fragment,null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{ref:ref,style:{position:"relative",width:"400px",height:"400px",backgroundColor:"whitesmoke"}},React.createElement("span",{style:{position:"absolute",left:state.elX+"px",top:state.elY+"px",pointerEvents:"none",transform:"scale(4)"}},"🐭")))};react_1.storiesOf("Sensors|useMouse",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(268)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(81),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(_a){var whenHovered=_a.whenHovered,bound=_a.bound,ref=React.useRef(null),state=__1.useMouseHovered(ref,{whenHovered:whenHovered,bound:bound});return React.createElement(React.Fragment,null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{ref:ref,style:{position:"relative",width:"400px",height:"400px",backgroundColor:"whitesmoke"}},React.createElement("span",{style:{position:"absolute",left:state.elX+"px",top:state.elY+"px",pointerEvents:"none",transform:"scale(4)"}},"🐭")))};react_1.storiesOf("Sensors|useMouseHovered",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(268)})}).add("Demo",function(){var bound=addon_knobs_1.boolean("bound",!1),whenHovered=addon_knobs_1.boolean("whenHovered",!1);return React.createElement(Demo,{whenHovered:whenHovered,bound:bound})})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useNetwork();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useNetwork",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(737)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usenetwork"><code>useNetwork</code></h1>\n<p>React sensor hook that tracks connected hardware devices. Returns:</p>\n<pre><code class="language-json">{\n &quot;online&quot;: true,\n &quot;since&quot;: &quot;2018-10-27T08:59:05.562Z&quot;,\n &quot;downlink&quot;: 10,\n &quot;effectiveType&quot;: &quot;4g&quot;,\n &quot;rtt&quot;: 50\n}</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useNetwork} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useNetwork();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),rxjs_1=__webpack_require__(808),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),counter$=new rxjs_1.BehaviorSubject(0),Demo=function(){var value=__1.useObservable(counter$,0);return React.createElement("button",{onClick:function(){return counter$.next(value+1)}},"Clicked ",value," times")};react_1.storiesOf("State|useObservable",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(739)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useobservable"><code>useObservable</code></h1>\n<p>React state hook that tracks the latest value of an <code>Observable</code>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useObservable} from &#39;react-use&#39;;\n\nconst counter$ = new BehaviorSubject(0);\nconst Demo = () =&gt; {\n const value = useObservable(counter$, 0);\n\n return (\n &lt;button onClick={() =&gt; counter$.next(value + 1)}&gt;\n Clicked {value} times\n &lt;/button&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.useOrientation();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useOrientation",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(741)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useorientation"><code>useOrientation</code></h1>\n<p>React sensor hook that tracks screen orientation of user&#39;s device.</p>\n<p>Returns state in the following shape</p>\n<pre><code class="language-js">{\n angle: 0,\n type: &#39;landscape-primary&#39;\n}</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useOrientation} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = useOrientation();\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.usePageLeave(addon_actions_1.action("onPageLeave")),React.createElement("div",null,"Try leaving the page and see logs in ",React.createElement("code",null,"Actions")," tab.")};react_1.storiesOf("Sensors|usePageLeave",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(743)})}).add("Default",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepageleave"><code>usePageLeave</code></h1>\n<p>React sensor hook that fires a callback when mouse leaves the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePageLeave} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n usePageLeave(() =&gt; console.log(&#39;Page left...&#39;));\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var state=__1.usePermission({name:"microphone"});return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Side effects|usePermission",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(745)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepermission"><code>usePermission</code></h1>\n<p>React side-effect hook to query permission status of browser APIs.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePermission} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const state = usePermission({ name: &#39;microphone&#39; });\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],prevCount=__1.usePrevious(count);return React.createElement("div",null,React.createElement("p",null,"Now: ",count,", before: ",String(prevCount)),React.createElement("button",{onClick:function(){return setCount(function(value){return value+1})}},"+"),React.createElement("button",{onClick:function(){return setCount(function(value){return value-1})}},"-"))};react_1.storiesOf("State|usePrevious",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(747)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useprevious"><code>usePrevious</code></h1>\n<p>React state hook that returns the previous state as described in the <a href="https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state">React hooks FAQ</a>.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePrevious} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, setCount] = React.useState(0);\n const prevCount = usePrevious(count);\n\n return (\n &lt;p&gt;\n Now: {count}, before: {prevCount}\n &lt;/p&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const prevState = usePrevious = &lt;T&gt;(state: T): T;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useCounter(0),count=_a[0],relatedInc=_a[1].inc,_b=__1.useCounter(0),unrelatedCount=_b[0],inc=_b[1].inc,prevCount=__1.usePreviousDistinct(count);return React.createElement("p",null,"Now: ",count,", before: ",prevCount,React.createElement("button",{onClick:function(){return relatedInc()}},"Increment"),"Unrelated: ",unrelatedCount,React.createElement("button",{onClick:function(){return inc()}},"Increment Unrelated"))};react_1.storiesOf("State|usePreviousDistinct",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(749)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepreviousdistinct"><code>usePreviousDistinct</code></h1>\n<p>Just like <code>usePrevious</code> but it will only update once the value actually changes. This is important when other\nhooks are involved and you aren&#39;t just interested in the previous props version, but want to know the previous\ndistinct value</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePreviousDistinct, useCounter} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, { inc: relatedInc }] = useCounter(0);\n const [unrelatedCount, { inc }] = useCounter(0);\n const prevCount = usePreviousDistinct(count);\n\n return (\n &lt;p&gt;\n Now: {count}, before: {prevCount}\n &lt;button onClick={() =&gt; relatedInc()}&gt;Increment&lt;/button&gt;\n Unrelated: {unrelatedCount}\n &lt;button onClick={() =&gt; inc()}&gt;Increment Unrelated&lt;/button&gt;\n &lt;/p&gt;\n );\n};</code></pre>\n<p>You can also provide a way of identifying the value as unique. By default, a strict equals is used.</p>\n<pre><code class="language-jsx">import {usePreviousDistinct} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [str, setStr] = React.useState(&quot;something_lowercase&quot;);\n const [unrelatedCount] = React.useState(0);\n const prevStr = usePreviousDistinct(str, (prev, next) =&gt; (prev &amp;&amp; prev.toUpperCase()) === next.toUpperCase());\n\n return (\n &lt;p&gt;\n Now: {count}, before: {prevCount}\n Unrelated: {unrelatedCount}\n &lt;/p&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const prevState = usePreviousDistinct = &lt;T&gt;(state: T, compare?: (prev: T | undefined, next: T) =&gt; boolean): T;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),useState=React.useState,useEffect=React.useEffect,DemoInner=function(_a){var promise=_a.promise,safePromise=__1.usePromise(),_b=useState(-1),value=_b[0],setValue=_b[1];return useEffect(function(){safePromise(promise).then(setValue)},[promise]),React.createElement("div",null,-1===value?"Resolving value...":"Value: "+value)},Demo=function(){var _a=__1.useBoolean(!0),mounted=_a[0],toggleMounted=_a[1],_b=__1.useNumber(),num=_b[0],inc=_b[1].inc,promise=new Promise(function(r){return setTimeout(function(){return r(num)},1e3)});return React.createElement("div",null,React.createElement("p",null,"This demo provides a number in a promise that resolves in 1sec to a child component."),React.createElement("button",{onClick:function(){return toggleMounted()}},mounted?"Unmount":"Mount"),React.createElement("button",{onClick:function(){return inc()}},"Increment (",num,")"),React.createElement("br",null),mounted&&React.createElement(DemoInner,{promise:promise}))};react_1.storiesOf("Lifecycle|usePromise",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(751)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usepromise"><code>usePromise</code></h1>\n<p>React Lifecycle hook that returns a helper function for wrapping promises.\nPromises wrapped with this function will resolve only when component is mounted.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {usePromise} from &#39;react-use&#39;;\n\nconst Demo = ({promise}) =&gt; {\n const mounted = usePromise();\n const [value, setValue] = useState();\n\n useEffect(() =&gt; {\n (async () =&gt; {\n const value = await mounted(promise);\n // This line will not execute if &lt;Demo&gt; component gets unmounted.\n setValue(value);\n })();\n });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var frames=__1.useRaf(5e3,1e3);return React.createElement("div",null,"Elapsed: ",frames)};react_1.storiesOf("Animation|useRaf",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(753)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useraf"><code>useRaf</code></h1>\n<p>React animation hook that forces component to re-render on each <code>requestAnimationFrame</code>,\nreturns percentage of time elapsed.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useRaf} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const elapsed = useRaf(5000, 1000);\n\n return (\n &lt;div&gt;\n Elapsed: {elapsed}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useRaf(ms?: number, delay?: number): number;</code></pre>\n<ul>\n<li><code>ms</code> &mdash; milliseconds for how long to keep re-rendering component, defaults to <code>1e12</code>.</li>\n<li><code>delay</code> &mdash; delay in milliseconds after which to start re-rendering component, defaults to <code>0</code>.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),ticks=_a[0],setTicks=_a[1],_b=__1.useRafLoop(function(){setTicks(ticks+1)}),loopStop=_b[0],isActive=_b[1],loopStart=_b[2];return React.createElement("div",null,React.createElement("div",null,"RAF triggered: ",ticks," (times)"),React.createElement("br",null),React.createElement("button",{onClick:isActive?loopStop:loopStart},isActive?"STOP":"START"))};react_1.storiesOf("Side effects|useRafLoop",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(755)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="userafloop"><code>useRafLoop</code></h1>\n<p>React hook that calls given function inside the RAF loop without re-rendering parent component if not needed. Loop stops automatically on component unmount.<br>Provides controls to stop and start loop manually.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport { useRafLoop } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [ticks, setTicks] = React.useState(0);\n\n const [loopStop, isActive, loopStart] = useRafLoop(() =&gt; {\n setTicks(ticks + 1);\n }, [ticks]);\n\n return (\n &lt;div&gt;\n &lt;div&gt;RAF triggered: {ticks} (times)&lt;/div&gt;\n &lt;br /&gt;\n &lt;button onClick={isActive ? loopStop : loopStart}&gt;{isActive ? &#39;STOP&#39; : &#39;START&#39;}&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [stopLoop, isActive, startLoop] = useRafLoop(callback: CallableFunction, deps?: DependencyList);</code></pre>\n<ul>\n<li><code>callback</code> &mdash; function to call each RAF tick</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var refMounted=__1.useRefMounted();return __1.useRaf(),React.createElement("div",null,React.createElement("h3",null,"**DEPRECATED**"),React.createElement("h4",null,"This method is obsolete, use `useMountedState` instead."),React.createElement("span",null,"is mounted: ",refMounted.current?"👍":"👎"))};react_1.storiesOf("Lifecycle|useRefMounted",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(757)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="userefmounted"><code>useRefMounted</code></h1>\n<blockquote>\n<p><strong>DEPRECATED</strong><br>This method is obsolete, use <code>useMountedState</code> instead.</p>\n</blockquote>\n<p>Lifecycle hook that tracks if component is mounted. Returns a ref, which has a\nboolean <code>.current</code> property.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useRefMounted} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const refMounted = useRefMounted();\n\n useEffect(() =&gt; {\n setTimeout(() =&gt; {\n if (refMounted.current) {\n // ...\n } else {\n // ...\n }\n }, 1000);\n });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var scrollRef=React.useRef(null),_a=__1.useScroll(scrollRef),x=_a.x,y=_a.y;return React.createElement(React.Fragment,null,React.createElement("div",null,"x: ",x),React.createElement("div",null,"y: ",y),React.createElement("div",{ref:scrollRef,style:{width:"400px",height:"400px",backgroundColor:"whitesmoke",overflow:"scroll"}},React.createElement("div",{style:{width:"2000px",height:"2000px"}},"Scroll me")))};react_1.storiesOf("Sensors/useScroll",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(759)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usescroll"><code>useScroll</code></h1>\n<p>React sensor hook that re-renders when the scroll position in a DOM element changes.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useScroll} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const scrollRef = React.useRef(null);\n const {x, y} = useScroll(scrollRef);\n\n return (\n &lt;div ref={scrollRef}&gt;\n &lt;div&gt;x: {x}&lt;/div&gt;\n &lt;div&gt;y: {y}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useScroll(ref: RefObject&lt;HTMLElement&gt;);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var scrollRef=React.useRef(null),scrolling=__1.useScrolling(scrollRef);return React.createElement(React.Fragment,null,React.createElement("div",null,scrolling?"Scrolling":"Not scrolling"),React.createElement("br",null),React.createElement("div",{ref:scrollRef,style:{width:"400px",height:"400px",backgroundColor:"whitesmoke",overflow:"scroll"}},React.createElement("div",{style:{width:"2000px",height:"2000px"}},"Scroll me")))};react_1.storiesOf("Sensors/useScrolling",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(761)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usescrolling"><code>useScrolling</code></h1>\n<p>React sensor hook that keeps track of whether the user is scrolling or not.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useScrolling } from &quot;react-use&quot;;\n\nconst Demo = () =&gt; {\n const scrollRef = React.useRef(null);\n const scrolling = useScrolling(scrollRef);\n\n return (\n &lt;div ref={scrollRef}&gt;\n {&lt;div&gt;{scrolling ? &quot;Scrolling&quot; : &quot;Not scrolling&quot;}&lt;/div&gt;}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useScrolling(ref: RefObject&lt;HTMLElement&gt;);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useSessionStorage("hello-key","foo"),value=_a[0],setValue=_a[1];return React.createElement("div",null,React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function(){return setValue("bar")}},"bar"),React.createElement("button",{onClick:function(){return setValue("baz")}},"baz"))};react_1.storiesOf("Side effects|useSessionStorage",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(763)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesessionstorage"><code>useSessionStorage</code></h1>\n<p>React side-effect hook that manages a single <code>sessionStorage</code> key.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSessionStorage} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [value, setValue] = useSessionStorage(&#39;my-key&#39;, &#39;foo&#39;);\n\n return (\n &lt;div&gt;\n &lt;div&gt;Value: {value}&lt;/div&gt;\n &lt;button onClick={() =&gt; setValue(&#39;bar&#39;)}&gt;bar&lt;/button&gt;\n &lt;button onClick={() =&gt; setValue(&#39;baz&#39;)}&gt;baz&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useSessionStorage(key);\nuseSessionStorage(key, initialValue);\nuseSessionStorage(key, initialValue, raw);</code></pre>\n<ul>\n<li><code>key</code> &mdash; <code>sessionStorage</code> key to manage.</li>\n<li><code>initialValue</code> &mdash; initial value to set, if value in <code>sessionStorage</code> is empty.</li>\n<li><code>raw</code> &mdash; boolean, if set to <code>true</code>, hook will not attempt to JSON serialize stored values.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useSetState({}),state=_a[0],setState=_a[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:function(){return setState({hello:"world"})}},"hello"),React.createElement("button",{onClick:function(){return setState({foo:"bar"})}},"foo"),React.createElement("button",{onClick:function(){setState(function(prevState){return{count:void 0===prevState.count?0:prevState.count+1}})}},"increment"))};react_1.storiesOf("State|useSetState",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(765)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesetstate"><code>useSetState</code></h1>\n<p>React state hook that creates <code>setState</code> method which works similar to how\n<code>this.setState</code> works in class components&mdash;it merges object changes into\ncurrent state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSetState} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [state, setState] = useSetState({});\n\n return (\n &lt;div&gt;\n &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n &lt;button onClick={() =&gt; setState({hello: &#39;world&#39;})}&gt;hello&lt;/button&gt;\n &lt;button onClick={() =&gt; setState({foo: &#39;bar&#39;})}&gt;foo&lt;/button&gt;\n &lt;button \n onClick={() =&gt; {\n setState((prevState) =&gt; ({\n count: (prevState.count || 0) + 1,\n }))\n }}\n &gt;\n count\n &lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [state, setState] = useSetState({cnt: 0});\n\nsetState({cnt: state.cnt + 1});\nsetState((prevState) =&gt; ({\n cnt: prevState + 1,\n}));</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__1.useSize(function(_a){var currentWidth=_a.width;return React.createElement("div",{style:{border:"1px solid red"}},"Size me up! (",currentWidth,"px)")}),sized=_a[0],_b=_a[1],width=_b.width,height=_b.height;return React.createElement("div",null,sized,React.createElement("div",null,"width: ",width),React.createElement("div",null,"height: ",height))};react_1.storiesOf("Sensors|useSize",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(767)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usesize"><code>useSize</code></h1>\n<p>React sensor hook that tracks size of an HTML element.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSize} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [sized, {width, height}] = useSize(\n ({width}) =&gt; &lt;div style={{border: &#39;1px solid red&#39;}}&gt;Size me up! ({width}px)&lt;/div&gt;\n );\n\n return (\n &lt;div&gt;\n {sized}\n &lt;div&gt;width: {width}&lt;/div&gt;\n &lt;div&gt;height: {height}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),voices=window.speechSynthesis.getVoices(),Demo=function(){var state=__1.useSpeech("Hello world!",{rate:.8,pitch:.5,voice:voices[0]});return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("UI|useSpeech",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(769)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usespeech"><code>useSpeech</code></h1>\n<p>React UI hook that synthesizes human voice that speaks a given string.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSpeech} from &#39;react-use&#39;;\n\nconst voices = window.speechSynthesis.getVoices();\n\nconst Demo = () =&gt; {\n const state = useSpeech(&#39;Hello world!&#39;, { rate: 0.8, pitch: 0.5, voice: voices[0] });\n\n return (\n &lt;pre&gt;\n {JSON.stringify(state, null, 2)}\n &lt;/pre&gt; \n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),useSpring_1=__importDefault(__webpack_require__(771)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(50),target=_a[0],setTarget=_a[1],value=useSpring_1.default(target);return React.createElement("div",null,value,React.createElement("br",null),React.createElement("button",{onClick:function(){return setTarget(0)}},"Set 0"),React.createElement("button",{onClick:function(){return setTarget(100)}},"Set 100"))};react_1.storiesOf("Animation|useSpring",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(773)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),rebound_1=__webpack_require__(772);exports.default=function(targetValue,tension,friction){void 0===targetValue&&(targetValue=0),void 0===tension&&(tension=50),void 0===friction&&(friction=3);var _a=react_1.useState(null),spring=_a[0],setSpring=_a[1],_b=react_1.useState(targetValue),value=_b[0],setValue=_b[1],listener=react_1.useMemo(function(){return{onSpringUpdate:function(currentSpring){var newValue=currentSpring.getCurrentValue();setValue(newValue)}}},[]);return react_1.useEffect(function(){if(!spring){var newSpring=(new rebound_1.SpringSystem).createSpring(tension,friction);newSpring.setCurrentValue(targetValue),setSpring(newSpring),newSpring.addListener(listener)}return function(){spring&&(spring.removeListener(listener),setSpring(null))}},[tension,friction,spring]),react_1.useEffect(function(){spring&&spring.setEndValue(targetValue)},[targetValue]),value}},,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usespring"><code>useSpring</code></h1>\n<p>React animation hook that updates a single numeric value over time according\nto spring dynamics.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import useSpring from &#39;react-use/lib/useSpring&#39;;\n\nconst Demo = () =&gt; {\n const [target, setTarget] = useState(50);\n const value = useSpring(target);\n\n return (\n &lt;div&gt;\n {value}\n &lt;br /&gt;\n &lt;button onClick={() =&gt; setTarget(0)}&gt;Set 0&lt;/button&gt;\n &lt;button onClick={() =&gt; setTarget(100)}&gt;Set 100&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<p>Note: Because of dependency on <code>rebound</code> you have to import this hook directly like shown above.</p>\n<h2 id="requirements">Requirements</h2>\n<p>Install <a href="https://github.com/facebook/rebound-js"><code>rebound</code></a> peer dependency:</p>\n<pre><code class="language-bash">npm add rebound\n# or\nyarn add rebound</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const currentValue = useSpring(targetValue);\nconst currentValue = useSpring(targetValue, tension, friction);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var input=React.useRef(null);return __1.useStartTyping(function(){input.current&&input.current.focus()}),React.createElement("div",null,React.createElement("p",null,"Start typing, and below field will get focused."),React.createElement("input",{ref:input}),React.createElement("br",null),React.createElement("hr",null),React.createElement("p",null,"Try focusing below elements and see what happens."),React.createElement("button",null,"When button is focused, it will lose it."),React.createElement("br",null),React.createElement("br",null),React.createElement("input",null),React.createElement("br",null),React.createElement("br",null),React.createElement("textarea",null,"Editable textarea"),React.createElement("br",null),React.createElement("br",null),React.createElement("div",{contentEditable:!0},"Editable DIV"))};react_1.storiesOf("Sensors|useStartTyping",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(775)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestarttyping"><code>useStartTyping</code></h1>\n<p>React sensor hook that fires a callback when user starts typing. Can be used\nto focus default input field on the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useStartTyping} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useStartTyping(() =&gt; alert(&#39;Started typing...&#39;));\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),stateSet=["first","second","third","fourth","fifth"],Demo=function(){var _a=__1.useStateList(stateSet),state=_a.state,prev=_a.prev,next=_a.next;return React.createElement("div",null,React.createElement("pre",null,state),React.createElement("button",{onClick:function(){return prev()}},"prev"),React.createElement("button",{onClick:function(){return next()}},"next"))};react_1.storiesOf("State|useStateList",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(777)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usestatelist"><code>useStateList</code></h1>\n<p>React state hook that circularly iterates over an array.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useStateList } from &#39;react-use&#39;;\n\nconst stateSet = [&#39;first&#39;, &#39;second&#39;, &#39;third&#39;, &#39;fourth&#39;, &#39;fifth&#39;];\n\nconst Demo = () =&gt; {\n const {state, prev, next} = useStateList(stateSet);\n\n return (\n &lt;div&gt;\n &lt;pre&gt;{state}&lt;/pre&gt;\n &lt;button onClick={() =&gt; prev()}&gt;prev&lt;/button&gt;\n &lt;button onClick={() =&gt; next()}&gt;next&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<blockquote>\n<p>If the <code>stateSet</code> is changed by a shorter one the hook will select the last element of it.</p>\n</blockquote>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__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(_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__(269)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottleFn(function(defaultValue){return defaultValue},2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__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(_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__(269)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3));function TestComponent(props){void 0===props&&(props={});var ms=props.ms||5e3,_a=__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(){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__(781)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetimeout"><code>useTimeout</code></h1>\n<p>Re-renders the component after a specified number of milliseconds.<br>Provides handles to cancel and/or reset the timeout.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useTimeout } from &#39;react-use&#39;;\n\nfunction TestComponent(props: { ms?: number } = {}) {\n const ms = props.ms || 5000;\n const [isReady, cancel] = useTimeout(ms);\n\n return (\n &lt;div&gt;\n { isReady() ? &#39;I\\&#39;m reloaded after timeout&#39; : `I will be reloaded after ${ ms / 1000 }s` }\n { isReady() === false ? &lt;button onClick={ cancel }&gt;Cancel&lt;/button&gt; : &#39;&#39; }\n &lt;/div&gt;\n );\n}\n\nconst Demo = () =&gt; {\n return (\n &lt;div&gt;\n &lt;TestComponent /&gt;\n &lt;TestComponent ms={ 10000 } /&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [\n isReady: () =&gt; boolean | null,\n cancel: () =&gt; void,\n reset: () =&gt; void,\n] = useTimeout(ms: number = 0);</code></pre>\n<ul>\n<li><strong><code>isReady</code></strong><em><code>:()=&gt;boolean|null</code></em> - function returning current timeout state:<ul>\n<li><code>false</code> - pending re-render</li>\n<li><code>true</code> - re-render performed</li>\n<li><code>null</code> - re-render cancelled</li>\n</ul>\n</li>\n<li><strong><code>cancel</code></strong><em><code>:()=&gt;void</code></em> - cancel the timeout (component will not be re-rendered)</li>\n<li><strong><code>reset</code></strong><em><code>:()=&gt;void</code></em> - reset the timeout</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),index_1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState("Not called yet"),state=_a[0],setState=_a[1];var _b=index_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__(783)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetimeoutfn"><code>useTimeoutFn</code></h1>\n<p>Calls given function after specified amount of milliseconds.<br><strong>Note:</strong> this hook does not re-render component by itself.</p>\n<p>Automatically cancels timeout on component unmount.\nAutomatically resets timeout on delay change.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import * as React from &#39;react&#39;;\nimport { useTimeoutFn } from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [state, setState] = React.useState(&#39;Not called yet&#39;);\n\n function fn() {\n setState(`called at ${Date.now()}`);\n }\n\n const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n const cancelButtonClick = useCallback(() =&gt; {\n if (isReady() === false) {\n cancel();\n setState(`cancelled`);\n } else {\n reset();\n setState(&#39;Not called yet&#39;);\n }\n }, []);\n\n const readyState = isReady();\n\n return (\n &lt;div&gt;\n &lt;div&gt;{readyState !== null ? &#39;Function will be called in 5 seconds&#39; : &#39;Timer cancelled&#39;}&lt;/div&gt;\n &lt;button onClick={cancelButtonClick}&gt; {readyState === false ? &#39;cancel&#39; : &#39;restart&#39;} timeout&lt;/button&gt;\n &lt;br /&gt;\n &lt;div&gt;Function state: {readyState === false ? &#39;Pending&#39; : readyState ? &#39;Called&#39; : &#39;Cancelled&#39;}&lt;/div&gt;\n &lt;div&gt;{state}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const [\n isReady: () =&gt; boolean | null,\n cancel: () =&gt; void,\n reset: () =&gt; void,\n] = useTimeoutFn(fn: Function, ms: number = 0);</code></pre>\n<ul>\n<li><strong><code>fn</code></strong><em><code>: Function</code></em> - function that will be called;</li>\n<li><strong><code>ms</code></strong><em><code>: number</code></em> - delay in milliseconds;</li>\n<li><strong><code>isReady</code></strong><em><code>: ()=&gt;boolean|null</code></em> - function returning current timeout state:<ul>\n<li><code>false</code> - pending</li>\n<li><code>true</code> - called</li>\n<li><code>null</code> - cancelled</li>\n</ul>\n</li>\n<li><strong><code>cancel</code></strong><em><code>: ()=&gt;void</code></em> - cancel the timeout</li>\n<li><strong><code>reset</code></strong><em><code>: ()=&gt;void</code></em> - reset the timeout</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),NewTabStory_1=__importDefault(__webpack_require__(263)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __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__(785)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetitle"><code>useTitle</code></h1>\n<p>React side-effect hook that sets title of the page.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useTitle} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useTitle(&#39;Hello world!&#39;);\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useToggle",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(259)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var t=__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__(788)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usetween"><code>useTween</code></h1>\n<p>React animation hook that tweens a number between 0 and 1.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useTween} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const t = useTween();\n\n return (\n &lt;div&gt;\n Tween: {t}\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useTween(easing?: string, ms?: number, delay?: number): number</code></pre>\n<p>Returns a number that begins with 0 and ends with 1 when animation ends.</p>\n<ul>\n<li><code>easing</code> &mdash; one of the valid <a href="https://github.com/streamich/ts-easing/blob/master/src/index.ts">easing names</a>, defaults to <code>inCirc</code>.</li>\n<li><code>ms</code> &mdash; milliseconds for how long to keep re-rendering component, defaults to <code>200</code>.</li>\n<li><code>delay</code> &mdash; delay in milliseconds after which to start re-rendering component, defaults to <code>0</code>.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ConsoleStory_1=__importDefault(__webpack_require__(166)),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){return __1.useUnmount(function(){return console.log("UNMOUNTED")}),React.createElement(ConsoleStory_1.default,null)};react_1.storiesOf("Lifecycle|useUnmount",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(790)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useunmount"><code>useUnmount</code></h1>\n<p>React lifecycle hook that calls a function when the component will unmount. Use <code>useEffectOnce</code> if you need both a mount and unmount function.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUnmount} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n useUnmount(() =&gt; console.log(&#39;UNMOUNTED&#39;));\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useUnmount(fn: () =&gt; void | undefined);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var update=__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__(792)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupdate"><code>useUpdate</code></h1>\n<p>React utility hook that returns a function that forces component\nto re-render when called.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUpdate} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const update = useUpdate();\n return (\n &lt;&gt;\n &lt;div&gt;Time: {Date.now()}&lt;/div&gt;\n &lt;button onClick={update}&gt;Update&lt;/button&gt;\n &lt;/&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(!1),didUpdate=_b[0],setDidUpdate=_b[1];return __1.useUpdateEffect(function(){setDidUpdate(!0)},[count]),React.createElement("div",null,React.createElement("button",{onClick:function(){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__(794)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupdateeffect"><code>useUpdateEffect</code></h1>\n<p>React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the <code>useEffect</code> hook.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React from &#39;react&#39;\nimport {useUpdateEffect} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [count, setCount] = React.useState(0);\n\n React.useEffect(() =&gt; {\n const interval = setInterval(() =&gt; {\n setCount(count =&gt; count + 1)\n }, 1000)\n\n return () =&gt; {\n clearInterval(interval)\n }\n }, [])\n\n useUpdateEffect(() =&gt; {\n console.log(&#39;count&#39;, count) // will only show 1 and beyond\n\n return () =&gt; { // *OPTIONAL*\n // do something on unmount\n }\n }) // you can include deps array if necessary\n\n return &lt;div&gt;Count: {count}&lt;/div&gt;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),index_1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function(){var _a=index_1.useUpsert(function(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(e){return upsert(__assign({},item,{text:e.target.value}))}}),React.createElement("button",{onClick:function(){return remove(index)}},"Remove"))}),React.createElement("button",{onClick:function(){return upsert({id:(list.length+1).toString(),text:""})}},"Add item"),React.createElement("button",{onClick:function(){return set([])}},"Reset"))};react_1.storiesOf("State|useUpsert",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(796)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="useupsert"><code>useUpsert</code></h1>\n<p>Superset of <code>useList</code>. Provides an additional method to upsert (update or insert) an element into the list. </p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useUpsert} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const comparisonFunction = (a: DemoType, b: DemoType) =&gt; {\n return a.id === b.id;\n };\n const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n return (\n &lt;div style={{ display: &#39;inline-flex&#39;, flexDirection: &#39;column&#39; }}&gt;\n {list.map((item: DemoType, index: number) =&gt; (\n &lt;div key={item.id}&gt;\n &lt;input value={item.text} onChange={e =&gt; upsert({ ...item, text: e.target.value })} /&gt;\n &lt;button onClick={() =&gt; remove(index)}&gt;Remove&lt;/button&gt;\n &lt;/div&gt;\n ))}\n &lt;button onClick={() =&gt; upsert({ id: (list.length + 1).toString(), text: &#39;&#39; })}&gt;Add item&lt;/button&gt;\n &lt;button onClick={() =&gt; set([])}&gt;Reset&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function(){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__(798)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usevideo"><code>useVideo</code></h1>\n<p>Creates <code>&lt;video&gt;</code> element, tracks its state and exposes playback controls.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useVideo} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const [video, state, controls, ref] = useVideo(\n &lt;video src=&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot; autoPlay /&gt;\n );\n\n return (\n &lt;div&gt;\n {video}\n &lt;pre&gt;{JSON.stringify(state, null, 2)}&lt;/pre&gt;\n &lt;button onClick={controls.pause}&gt;Pause&lt;/button&gt;\n &lt;button onClick={controls.play}&gt;Play&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={controls.mute}&gt;Mute&lt;/button&gt;\n &lt;button onClick={controls.unmute}&gt;Un-mute&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={() =&gt; controls.volume(.1)}&gt;Volume: 10%&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.volume(.5)}&gt;Volume: 50%&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.volume(1)}&gt;Volume: 100%&lt;/button&gt;\n &lt;br/&gt;\n &lt;button onClick={() =&gt; controls.seek(state.time - 5)}&gt;-5 sec&lt;/button&gt;\n &lt;button onClick={() =&gt; controls.seek(state.time + 5)}&gt;+5 sec&lt;/button&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-jsx">const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(&lt;video {...props}/&gt;);</code></pre>\n<p><code>video</code> is React&#39;s <code>&lt;video&gt;</code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx">&lt;div&gt;{video}&lt;/div&gt;</code></pre>\n<p><code>state</code> tracks the state of the video and has the following shape:</p>\n<pre><code class="language-json">{\n &quot;buffered&quot;: [\n {\n &quot;start&quot;: 0,\n &quot;end&quot;: 425.952625\n }\n ],\n &quot;time&quot;: 5.244996,\n &quot;duration&quot;: 425.952625,\n &quot;isPlaying&quot;: false,\n &quot;muted&quot;: false,\n &quot;volume&quot;: 1\n}</code></pre>\n<p><code>controls</code> is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:</p>\n<pre><code class="language-ts">interface AudioControls {\n play: () =&gt; Promise&lt;void&gt; | void;\n pause: () =&gt; void;\n mute: () =&gt; void;\n unmute: () =&gt; void;\n volume: (volume: number) =&gt; void;\n seek: (time: number) =&gt; void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code>&lt;video&gt;</code> element, you can access the element by\n<code>ref.current</code>, note that it may be <code>null</code>.</p>\n<p>And finally, <code>props</code> &mdash; all props that <code>&lt;video&gt;</code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),AnotherComponent=function(){var isWaiting=__1.useWait().isWaiting;return React.createElement("p",null,isWaiting("creating user")?"Now creating user...":"")},Demo=function(){var _a=__1.useWait(),Wait=_a.Wait,isWaiting=_a.isWaiting,startWaiting=_a.startWaiting,endWaiting=_a.endWaiting;return React.createElement("div",null,React.createElement("button",{disabled:isWaiting("creating user"),onClick:function createUser(){startWaiting("creating user"),setTimeout(function(){endWaiting("creating user")},1e3)}},React.createElement(Wait,{on:"creating user",fallback:React.createElement("b",null,"Creating User...")},"Create User")),React.createElement(AnotherComponent,null))};react_1.storiesOf("UI|useWait",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(800)})}).add("Demo",function(){return React.createElement(__1.useWait.Waiter,null,React.createElement(Demo,null))})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usewait"><code>useWait</code></h1>\n<p><code>useWait</code> is a React Hook helps to manage multiple loading states on the page without any conflict. It&#39;s based on a very simple idea that manages an <code>Array</code> of multiple loading states. The built-in <code>Wait</code> component listens its registered loader and immediately become loading state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useWait } from &#39;react-use&#39;\n\nfunction UserCreateButton() {\n const { startWaiting, endWaiting, isWaiting, Wait } = useWait();\n\n return (\n &lt;button\n onClick={() =&gt; startWaiting(&quot;creating user&quot;)}\n disabled={isWaiting(&quot;creating user&quot;)}\n &gt;\n &lt;Wait on=&quot;creating user&quot; fallback={&lt;div&gt;Creating user!&lt;/div&gt;}&gt;\n Create User\n &lt;/Wait&gt;\n &lt;/button&gt;\n );\n}</code></pre>\n<p>And you should wrap your <code>App</code> with <code>Waiter</code> component. It&#39;s actually a <code>Context.Provider</code> that provides a loading context to the component tree.</p>\n<pre><code class="language-jsx">const rootElement = document.getElementById(&quot;root&quot;);\nReactDOM.render(\n &lt;useWait.Waiter&gt;\n &lt;App /&gt;\n &lt;/useWait.Waiter&gt;,\n rootElement\n);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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__(802)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usewindowscroll"><code>useWindowScroll</code></h1>\n<p>React sensor hook that re-renders on window scroll.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useWindowScroll} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const {x, y} = useWindowScroll();\n\n return (\n &lt;div&gt;\n &lt;div&gt;x: {x}&lt;/div&gt;\n &lt;div&gt;y: {y}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),__1=__webpack_require__(4),ShowDocs_1=__importDefault(__webpack_require__(3)),Demo=function(){var _a=__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__(804)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='<h1 id="usewindowsize"><code>useWindowSize</code></h1>\n<p>React sensor hook that tracks dimensions of the browser window.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useWindowSize} from &#39;react-use&#39;;\n\nconst Demo = () =&gt; {\n const {width, height} = useWindowSize();\n\n return (\n &lt;div&gt;\n &lt;div&gt;width: {width}&lt;/div&gt;\n &lt;div&gt;height: {height}&lt;/div&gt;\n &lt;/div&gt;\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__importStar(__webpack_require__(0)),UseKey_1=__importDefault(__webpack_require__(806));react_1.storiesOf("Components|<UseKey>",module).add("Demo",function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function(){return alert("Q pressed!")}}))})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";var __rest=this&&this.__rest||function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0});var useKey_1=__importDefault(__webpack_require__(159)),UseKey=__importDefault(__webpack_require__(807)).default(useKey_1.default,function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,__rest(_a,["filter","fn","deps"]),deps]});exports.default=UseKey},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function(props){return[props]};exports.default=function(hook,mapPropsToArgs){void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs);return function(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}}}],[[272,1,2]]]);
//# sourceMappingURL=main.46ce426413b0c24abc36.bundle.js.map
Reference in New Issue View Git Blame Copy Permalink