mirror of
https://github.com/streamich/react-use.git
synced 2026-01-25 14:17:16 +00:00
2 lines
193 KiB
JavaScript
2 lines
193 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(356);exports.createMemo=createMemo_1.default;var useAsync_1=__webpack_require__(177);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(106);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(357);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(358);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(360);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(361);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(362);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(363);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(364);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(180);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(367);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(373);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(374);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDrop_1=__webpack_require__(376);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(377);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(80);exports.useEffectOnce=useEffectOnce_1.default;var useEvent_1=__webpack_require__(182);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(378);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(379);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(381);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(181);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(382);exports.useGetSetState=useGetSetState_1.default;var useHover_1=__webpack_require__(383);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(183);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(384);exports.useIdle=useIdle_1.default;var useKey_1=__webpack_require__(108);exports.useKey=useKey_1.default;var useKeyboardJs_1=__webpack_require__(386);exports.useKeyboardJs=useKeyboardJs_1.default;var useKeyPress_1=__webpack_require__(185);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(390);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(391);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(392);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(393);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(394);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(395);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(396);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(397);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(398);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(399);exports.useMediaDevices=useMediaDevices_1.default;var useMotion_1=__webpack_require__(400);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(109);exports.useMount=useMount_1.default;var useMouse_1=__webpack_require__(186);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(401);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(402);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(403);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(404);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(405);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(406);exports.usePageLeave=usePageLeave_1.default;var usePrevious_1=__webpack_require__(407);exports.usePrevious=usePrevious_1.default;var usePromise_1=__webpack_require__(408);exports.usePromise=usePromise_1.default;var useRaf_1=__webpack_require__(187);exports.useRaf=useRaf_1.default;var useRefMounted_1=__webpack_require__(45);exports.useRefMounted=useRefMounted_1.default;var useScroll_1=__webpack_require__(409);exports.useScroll=useScroll_1.default;var useSessionStorage_1=__webpack_require__(410);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(79);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(411);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(412);exports.useSpeech=useSpeech_1.default;var useSpring_1=__webpack_require__(413);exports.useSpring=useSpring_1.default;var useStartTyping_1=__webpack_require__(415);exports.useStartTyping=useStartTyping_1.default;var useThrottle_1=__webpack_require__(416);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(417);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(418);exports.useTimeout=useTimeout_1.default;var useTitle_1=__webpack_require__(419);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(179);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(420);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(112);exports.useUnmount=useUnmount_1.default;var useUpdate_1=__webpack_require__(107);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(111);exports.useUpdateEffect=useUpdateEffect_1.default;var useVideo_1=__webpack_require__(422);exports.useVideo=useVideo_1.default;var useWait_1=__webpack_require__(423);exports.useWait=useWait_1.default;var useWindowScroll_1=__webpack_require__(425);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(426);exports.useWindowSize=useWindowSize_1.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(0).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md}}),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}),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(){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(initialState){void 0===initialState&&(initialState={});var _a=react_1.useState(initialState),state=_a[0],set=_a[1];return[state,function(patch){set(function(prevState){return Object.assign({},prevState,patch instanceof Function?patch(prevState):patch)})}]}},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";Object.defineProperty(exports,"__esModule",{value:!0});var React=__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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useRefMounted_1=__webpack_require__(45);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],mounted=useRefMounted_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 mounted.current&&set({value:value,loading:!1}),value},function(error){return mounted.current&&set({error:error,loading:!1}),error})},deps)]}},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),useEvent_1=__webpack_require__(182),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";Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__webpack_require__(80);exports.default=function(fn){useEffectOnce_1.default(function(){fn()})}},,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(isInitialMount.current?function(){isInitialMount.current=!1}:effect,deps)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__webpack_require__(80);exports.default=function(fn){useEffectOnce_1.default(function(){return fn})}},,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useAsyncFn_1=__webpack_require__(106),useAsyncFn_2=__webpack_require__(106);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)};Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),react_1=__webpack_require__(0),useSetState_1=__webpack_require__(79),parseTimeRanges_1=__webpack_require__(359);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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useGetSet_1=__webpack_require__(181);exports.default=function(initialValue){void 0===initialValue&&(initialValue=0);var _a=useGetSet_1.default(initialValue),get=_a[0],set=_a[1],inc=react_1.useCallback(function(delta){return void 0===delta&&(delta=1),set(get()+delta)},[]),dec=react_1.useCallback(function(delta){return void 0===delta&&(delta=1),inc(-delta)},[]),reset=react_1.useCallback(function(value){void 0===value&&(value=initialValue),initialValue=value,set(value)},[]),actions={inc:inc,dec:dec,get:get,set:set,reset:reset};return[get(),actions]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdate_1=__webpack_require__(107);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__(13).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),useKey_1=__webpack_require__(108);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(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.scrollX,posY=top+window.scrollY,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){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [on, toggle] = useToggle(true);\n\n return (\n <div>\n <div>{on ? 'ON' : 'OFF'}</div>\n <button onClick={toggle}>Toggle</button>\n <button onClick={() => toggle(true)}>set ON</button>\n <button onClick={() => toggle(false)}>set OFF</button>\n </div>\n );\n};</code></pre>\n'},,,,,,,,,,,,function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const state = useDrop({\n onFiles: files => console.log('files', files),\n onUri: uri => console.log('uri', uri),\n onText: text => console.log('text', text),\n });\n\n return (\n <div>\n Drop something on the page.\n </div>\n );\n};</code></pre>\n<p><code>useDropArea</code>:</p>\n<pre><code class="language-jsx">import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n const [bond, state] = useDropArea({\n onFiles: files => console.log('files', files),\n onUri: uri => console.log('uri', uri),\n onText: text => console.log('text', text),\n });\n\n return (\n <div {...bond}>\n Drop something here.\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__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,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const element = (hovered) =>\n <div>\n Hover me! {hovered && 'Thanks!'}\n </div>;\n const [hoverable, hovered] = useHover(element);\n\n return (\n <div>\n {hoverable}\n <div>{hovered ? 'HOVERED' : ''}</div>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) => reactElement);\nconst isHovering = useHoverDirty(ref);</code></pre>\n'},function(module,exports){module.exports='<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> — to bind mouse coordinates within the element</li>\n<li><code>whenHovered</code> — 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 'react-use';\n\nconst Demo = () => {\n const ref = React.useRef(null);\n const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n return (\n <div ref={ref}>\n <div>Mouse position in document - x:{docX} y:{docY}</div>\n <div>Mouse position in element - x:{elX} y:{elY}</div>\n <div>Element position- x:{posX} y:{posY}</div>\n <div>Element dimensions - {elW}x{elH}</div>\n </div>\n );\n};</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,exports){module.exports='<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 'react';\nimport { useThrottle, useThrottleFn } from 'react-use';\n\nconst Demo = ({value}) => {\n const throttledValue = useThrottle(value);\n // const throttledValue = useThrottleFn(value => value, 200, [value]);\n\n return (\n <>\n <div>Value: {value}</div>\n <div>Throttled value: {throttledValue}</div>\n </>\n );\n};</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__(208),__webpack_require__(287),module.exports=__webpack_require__(288)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(19),__webpack_require__(20),__webpack_require__(18),__webpack_require__(29);var _storybook_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(206);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_5__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(354);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.configure)(function(){req.keys().forEach(function(filename){return req(filename)})},module)}.call(this,__webpack_require__(289)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./__stories__/createMemo.story.tsx":355,"./__stories__/useAsync.story.tsx":428,"./__stories__/useAsyncFn.story.tsx":430,"./__stories__/useAsyncRetry.story.tsx":432,"./__stories__/useAudio.story.tsx":434,"./__stories__/useBattery.story.tsx":436,"./__stories__/useBeforeUnload.story.tsx":438,"./__stories__/useBoolean.story.tsx":440,"./__stories__/useClickAway.story.tsx":441,"./__stories__/useCopyToClipboard.story.tsx":443,"./__stories__/useCounter.story.tsx":445,"./__stories__/useCss.story.tsx":447,"./__stories__/useDebounce.story.tsx":449,"./__stories__/useDeepCompareEffect.story.tsx":451,"./__stories__/useDrop.story.tsx":453,"./__stories__/useDropArea.story.tsx":523,"./__stories__/useEffectOnce.story.tsx":524,"./__stories__/useEvent.story.tsx":526,"./__stories__/useFavicon.story.tsx":528,"./__stories__/useFullscreen.story.tsx":530,"./__stories__/useGeolocation.story.tsx":532,"./__stories__/useGetSet.story.tsx":534,"./__stories__/useGetSetState.story.tsx":536,"./__stories__/useHover.story.tsx":538,"./__stories__/useHoverDirty.story.tsx":539,"./__stories__/useIdle.story.tsx":540,"./__stories__/useKey.story.tsx":542,"./__stories__/useKeyPress.story.tsx":544,"./__stories__/useKeyPressEvent.story.tsx":546,"./__stories__/useKeyboardJs.story.tsx":548,"./__stories__/useLifecycles.story.tsx":556,"./__stories__/useList.story.tsx":558,"./__stories__/useLocalStorage.story.tsx":560,"./__stories__/useLocation.story.tsx":562,"./__stories__/useLockBodyScroll.story.tsx":564,"./__stories__/useLogger.story.tsx":566,"./__stories__/useMap.story.tsx":568,"./__stories__/useMedia.story.tsx":570,"./__stories__/useMediaDevices.story.tsx":572,"./__stories__/useMotion.story.tsx":574,"./__stories__/useMount.story.tsx":576,"./__stories__/useMouse.story.tsx":578,"./__stories__/useMouseHovered.story.tsx":579,"./__stories__/useNetwork.story.tsx":580,"./__stories__/useObservable.story.tsx":582,"./__stories__/useOrientation.story.tsx":584,"./__stories__/usePageLeave.story.tsx":586,"./__stories__/usePrevious.story.tsx":588,"./__stories__/usePromise.story.tsx":590,"./__stories__/useRaf.story.tsx":592,"./__stories__/useRefMounted.story.tsx":594,"./__stories__/useScroll.story.tsx":596,"./__stories__/useSessionStorage.story.tsx":598,"./__stories__/useSetState.story.tsx":600,"./__stories__/useSize.story.tsx":602,"./__stories__/useSpeech.story.tsx":604,"./__stories__/useSpring.story.tsx":606,"./__stories__/useStartTyping.story.tsx":608,"./__stories__/useThrottle.story.tsx":610,"./__stories__/useThrottleFn.story.tsx":611,"./__stories__/useTimeout.story.tsx":612,"./__stories__/useTitle.story.tsx":614,"./__stories__/useToggle.story.tsx":616,"./__stories__/useTween.story.tsx":617,"./__stories__/useUnmount.story.tsx":619,"./__stories__/useUpdate.story.tsx":621,"./__stories__/useUpdateEffect.story.tsx":623,"./__stories__/useVideo.story.tsx":625,"./__stories__/useWait.story.tsx":627,"./__stories__/useWindowScroll.story.tsx":629,"./__stories__/useWindowSize.story.tsx":631,"./comps/__stories__/UseKey.story.tsx":633};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=354},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(427)})}).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 __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),useAsync_1=__webpack_require__(177);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";Object.defineProperty(exports,"__esModule",{value:!0});var useAudio=__webpack_require__(178).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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(13);exports.default=function(){var _a=react_1.useState({}),state=_a[0],setState=_a[1],mounted=!0,battery=null,onChange=function(){var charging=battery.charging,level=battery.level,chargingTime=battery.chargingTime,dischargingTime=battery.dischargingTime;setState({charging:charging,level:level,chargingTime:chargingTime,dischargingTime:dischargingTime})};return react_1.useEffect(function(){return navigator.getBattery().then(function(bat){mounted&&(battery=bat,onChange(),util_1.on(battery,"chargingchange",onChange),util_1.on(battery,"levelchange",onChange),util_1.on(battery,"chargingtimechange",onChange),util_1.on(battery,"dischargingtimechange",onChange))}),function(){mounted=!1,battery&&(util_1.off(battery,"chargingchange",onChange),util_1.off(battery,"levelchange",onChange),util_1.off(battery,"chargingtimechange",onChange),util_1.off(battery,"dischargingtimechange",onChange))}},[]),state}},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";Object.defineProperty(exports,"__esModule",{value:!0});var useToggle_1=__webpack_require__(179);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__(13),defaultEvents=["mousedown","touchstart"];exports.default=function(ref,onClickAway,events){void 0===events&&(events=defaultEvents),react_1.useEffect(function(){for(var handler=function(event){var el=ref.current;el&&!el.contains(event.target)&&onClickAway(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)}}})}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var writeText=__webpack_require__(365),react_1=__webpack_require__(0),useRefMounted_1=__webpack_require__(45),useSetState_1=__webpack_require__(79);exports.default=function(){var mounted=useRefMounted_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{var noUserInteraction=writeText(value);if(!mounted.current)return;setState({value:value,error:void 0,noUserInteraction:noUserInteraction})}catch(error){if(!mounted.current)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__(368),cssom_1=__webpack_require__(369),vcssom_1=__webpack_require__(370),cssToTree_1=__webpack_require__(372),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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(fn,ms,args){void 0===ms&&(ms=0),void 0===args&&(args=[]),react_1.useEffect(function(){var handle=setTimeout(fn.bind(null,args),ms);return function(){clearTimeout(handle)}},args)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),isEqual=__webpack_require__(375);exports.default=function(effect,deps){var ref=react_1.useRef(void 0);isEqual(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=__webpack_require__(0),useRefMounted_1=__webpack_require__(45),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,mounted=useRefMounted_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.current&&(options.onText||noop)(text,event)})}}(options,mounted)},[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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useRefMounted_1=__webpack_require__(45),noop=function(){};exports.default=function(options){void 0===options&&(options={});var onFiles=options.onFiles,onText=options.onText,onUri=options.onUri,mounted=useRefMounted_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.current&&(options.onText||noop)(text,event)})}}(options,mounted)},[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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),screenfull_1=__webpack_require__(380),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)};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUpdate_1=__webpack_require__(107);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=__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__(385),util_1=__webpack_require__(13),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),useMount_1=__webpack_require__(109);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 __webpack_require__(387)}).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,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useKeyPress_1=__webpack_require__(185),useUpdateEffect_1=__webpack_require__(111);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);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],list.slice(index+1))})},remove:function(index){return set(function(currentList){return currentList.slice(0,index).concat(list.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),util_1=__webpack_require__(13);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,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(13),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),counter=0,originalOverflow=null,increment=function(){1===++counter&&(originalOverflow=window.getComputedStyle(document.body).overflow,document.body.style.overflow="hidden")},decrement=function(){0===--counter&&(document.body.style.overflow=originalOverflow,originalOverflow=null)};exports.default=function(enabled){void 0===enabled&&(enabled=!0),react_1.useEffect(function(){return enabled?(increment(),decrement):void 0},[enabled])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useEffectOnce_1=__webpack_require__(80),useUpdateEffect_1=__webpack_require__(111);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){var _a;set(__assign({},map,((_a={})[key]=entry,_a)))},remove:function(key){var _a=key,rest=(map[_a],__rest(map,["symbol"==typeof _a?_a:_a+""]));set(rest)},reset:function(){return set(initialMap)}}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(query,defaultState){void 0===defaultState&&(defaultState=!1);var _a=react_1.useState(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__(13),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__(13),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";Object.defineProperty(exports,"__esModule",{value:!0});var useHoverDirty_1=__webpack_require__(183),useMouse_1=__webpack_require__(186),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__(13),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";Object.defineProperty(exports,"__esModule",{value:!0});var useCounter_1=__webpack_require__(180);exports.default=useCounter_1.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function useObservable(observable$,initialValue){var _a=react_1.useState(initialValue),value=_a[0],update=_a[1];return react_1.useEffect(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__(13),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);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),useRefMounted_1=__webpack_require__(45);exports.default=function(){var refMounted=useRefMounted_1.default();return react_1.useCallback(function(promise){return new Promise(function(resolve,reject){promise.then(function(value){refMounted.current&&resolve(value)},function(error){refMounted.current&&reject(error)})})},[])}},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),util_1=__webpack_require__(13);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";Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),util_1=__webpack_require__(13),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.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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useMount_1=__webpack_require__(109),useSetState_1=__webpack_require__(79);exports.default=function(text,opts){void 0===opts&&(opts={});var _a=useSetState_1.default({isPlaying:!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);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),rebound_1=__webpack_require__(414);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];return react_1.useEffect(function(){var listener={onSpringUpdate:function(currentSpring){var newValue=currentSpring.getCurrentValue();setValue(newValue)}};if(!spring){var newSpring=(new rebound_1.SpringSystem).createSpring(tension,friction);return newSpring.setCurrentValue(targetValue),setSpring(newSpring),void newSpring.addListener(listener)}return function(){spring.removeListener(listener),setSpring(null)}},[tension,friction]),react_1.useEffect(function(){spring&&spring.setEndValue(targetValue)},[targetValue]),value}},,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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUnmount_1=__webpack_require__(112);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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useUnmount_1=__webpack_require__(112);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";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(ms){void 0===ms&&(ms=0);var _a=react_1.useState(!1),ready=_a[0],setReady=_a[1];return react_1.useEffect(function(){var timer=setTimeout(function(){setReady(!0)},ms);return function(){clearTimeout(timer)}},[ms]),ready}},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";Object.defineProperty(exports,"__esModule",{value:!0});var ts_easing_1=__webpack_require__(421),useRaf_1=__webpack_require__(187);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";Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__webpack_require__(178).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_wait_1=__webpack_require__(424);react_wait_1.useWait.Waiter=react_wait_1.Waiter,exports.default=react_wait_1.useWait},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(13);exports.default=function(){var frame=react_1.useRef(0),_a=react_1.useState({x:util_1.isClient?window.scrollX:0,y:util_1.isClient?window.scrollY: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.scrollX,y:window.scrollY})})};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__(13);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,exports){module.exports='<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 'react-use';\n\nconst fibonacci = n => {\n if (n === 0) return 0;\n if (n === 1) return 1;\n return fibonacci(n - 1) + fibonacci(n - 2);\n};\n\nconst useMemoFibonacci = createMemo(fibonacci);\n\nconst Demo = () => {\n const result = useMemoFibonacci(10);\n\n return (\n <div>\n fib(10) = {result}\n </div>\n );\n};</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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),fn=function(){return new Promise(function(resolve){setTimeout(function(){resolve("RESOLVED")},1e3)})},Demo=function(){var _a=__1.useAsync(fn),loading=_a.loading,error=_a.error,value=_a.value;return React.createElement("div",null,loading?React.createElement("div",null,"Loading..."):error?React.createElement("div",null,"Error: ",error.message):React.createElement("div",null,"Value: ",value))};react_1.storiesOf("Side effects|useAsync",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(429)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\n// Returns a Promise that resolves after one second.\nconst fn = () => new Promise((resolve) => {\n setTimeout(() => {\n resolve('RESOLVED');\n }, 1000);\n});\n\nconst Demo = () => {\n const state = useAsync(fn);\n\n return (\n <div>\n {state.loading?\n <div>Loading...</div>\n : state.error?\n <div>Error...</div>\n : <div>Value: {state.value}</div>\n }\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),fn=function(){return new Promise(function(resolve,reject){setTimeout(function(){Math.random()>.5?reject(new Error("Random error!")):resolve("RESOLVED")},1e3)})},Demo=function(){var _a=__1.useAsyncFn(fn),_b=_a[0],loading=_b.loading,error=_b.error,value=_b.value,callback=_a[1];return React.createElement("div",null,loading?React.createElement("div",null,"Loading..."):error?React.createElement("div",null,"Error: ",error.message):value&&React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function(){return callback()}},"Start"))};react_1.storiesOf("Side effects|useAsyncFn",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(431)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = (url) => {\n const [state, fetch] = useAsyncFn(async () => {\n const response = await fetch(url);\n const result = await response.text();\n return result\n }, [url]);\n\n return (\n <div>\n {state.loading\n ? <div>Loading...</div>\n : state.error\n ? <div>Error: {state.error.message}</div>\n : state.value && <div>Value: {state.value}</div>\n }\n <button onClick={() => fetch()}>Start loading</button>\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),fnRetry=function(){return new Promise(function(resolve,reject){setTimeout(function(){Math.random()>.5?reject(new Error("Random error!")):resolve("RESOLVED")},1e3)})},DemoRetry=function(){var _a=__1.useAsyncRetry(fnRetry),loading=_a.loading,value=_a.value,error=_a.error,retry=_a.retry;return React.createElement("div",null,loading?React.createElement("div",null,"Loading..."):error?React.createElement("div",null,"Error: ",error.message):React.createElement("div",null,"Value: ",value),React.createElement("button",{onClick:function(){return retry()}},"Retry"))};react_1.storiesOf("Side effects|useAsyncRetry",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(433)})}).add("Demo",function(){return React.createElement(DemoRetry,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\n// Returns a Promise that resolves after one second.\nconst fn = () => new Promise((resolve, reject) => {\n setTimeout(() => {\n if (Math.random() > 0.5) {\n reject(new Error('Random error!'));\n } else {\n resolve('RESOLVED');\n }\n }, 1000);\n});\n\nconst Demo = () => {\n const state = useAsyncRetry(fn);\n\n return (\n <div>\n {state.loading?\n <div>Loading...</div>\n : state.error?\n <div>Error...</div>\n : <div>Value: {state.value}</div>\n }\n {!state.loading?\n <a href='javascript:void 0' onClick={() => state.retry()}>Retry</a>\n : null\n }\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(435)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="useaudio"><code>useAudio</code></h1>\n<p>Creates <code><audio></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 'react-use';\n\nconst Demo = () => {\n const [audio, state, controls, ref] = useAudio({\n src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n autoPlay: true,\n });\n\n return (\n <div>\n {audio}\n <pre>{JSON.stringify(state, null, 2)}</pre>\n <button onClick={controls.pause}>Pause</button>\n <button onClick={controls.play}>Play</button>\n <br/>\n <button onClick={controls.mute}>Mute</button>\n <button onClick={controls.unmute}>Un-mute</button>\n <br/>\n <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n <br/>\n <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n </div>\n );\n};</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(<audio {...props}/>);</code></pre>\n<p><code>audio</code> is React's <code><audio></code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx"><div>{audio}</div></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 "buffered": [\n {\n "start": 0,\n "end": 425.952625\n }\n ],\n "time": 5.244996,\n "duration": 425.952625,\n "isPlaying": false,\n "muted": false,\n "volume": 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: () => Promise<void> | void;\n pause: () => void;\n mute: () => void;\n unmute: () => void;\n volume: (volume: number) => void;\n seek: (time: number) => void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code><audio></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> — all props that <code><audio></code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var state=__1.useBattery();return React.createElement("pre",null,JSON.stringify(state,null,2))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(437)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usebattery"><code>useBattery</code></h1>\n<p>React sensor hook that tracks battery status.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useBattery} from 'react-use';\n\nconst Demo = () => {\n const state = useBattery();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(439)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [dirty, toggleDirty] = useToggle(false);\n useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n return (\n <div>\n {dirty && <p>Try to reload or close tab</p>}\n <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(188)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),react_2=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var ref=react_2.useRef(null);return __1.useClickAway(ref,function(){alert("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__(442)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const ref = useRef(null);\n useClickAway(ref, () => {\n alert('OUTSIDE CLICKED');\n });\n\n return (\n <div ref={ref} style={{\n width: 200,\n height: 200,\n background: 'red',\n }} />\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(444)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usecopytoclipboard"><code>useCopyToClipboard</code></h1>\n<p>Copy text to a user's clipboard.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">const Demo = () => {\n const [text, setText] = React.useState('');\n const [state, copyToClipboard] = useCopyToClipboard();\n\n return (\n <div>\n <input value={text} onChange={e => setText(e.target.value)} />\n <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n {state.error\n ? <p>Unable to copy value: {state.error.message}</p>\n : state.value && <p>Copied {state.value}</p>}\n </div>\n )\n\n const [text, setText] = React.useState('');\n const [copied, copyToClipboard] = useCopyToClipboard(text);\n\n return (\n <div>\n <input value={text} onChange={e => setText(e.target.value)} />\n <button type="button" onClick={copyToClipboard}>copy text</button>\n <div>Copied: {copied ? 'Yes' : 'No'}</div>\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var _a=__1.useCounter(5),value=_a[0],_b=_a[1],inc=_b.inc,dec=_b.dec,get=_b.get,set=_b.set,reset=_b.reset;return React.createElement("div",null,React.createElement("div",null,value," is ",get()),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_1.storiesOf("State|useCounter",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(446)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [value, {inc, dec, get, set, reset}] = useCounter(5);\n\n return (\n <div>\n <div>{value} is {get()}</div>\n <button onClick={() => inc()}>Increment</button>\n <button onClick={() => dec()}>Decrement</button>\n <button onClick={() => inc(5)}>Increment (+5)</button>\n <button onClick={() => dec(5)}>Decrement (-5)</button>\n <button onClick={() => set(100)}>Set 100</button>\n <button onClick={() => reset()}>Reset</button>\n <button onClick={() => reset(25)}>Reset (25)</button>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(448)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useCss} from 'react-use';\n\nconst Demo = () => {\n const className = useCss({\n color: 'red',\n border: '1px solid red',\n '&:hover': {\n color: 'blue',\n },\n });\n\n return (\n <div className={className}>\n Hover me!\n </div>\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const className = useCss({\n color: 'tomato',\n '&:hover': {\n color: 'orange',\n },\n});\n\nconst className = useCss({\n svg: {\n fill: 'tomato',\n },\n '.global_class &:hover svg': {\n fill: 'orange',\n },\n});\n\nconst className = useCss({\n color: 'tomato',\n '@media only screen and (max-width: 600px)': {\n color: 'orange',\n '&:hover': {\n color: 'red',\n }\n },\n});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(450)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react';\nimport { useDebounce } from 'react-use';\n\nconst Demo = () => {\n const [state, setState] = React.useState('Typing stopped');\n const [val, setVal] = React.useState('');\n const [debouncedValue, setDebouncedValue] = React.useState('');\n\n useDebounce(\n () => {\n setState('Typing stopped');\n setDebouncedValue(val);\n },\n 2000,\n [val]\n );\n\n return (\n <div>\n <input\n type="text"\n value={val}\n placeholder="Debounced input"\n onChange={({ currentTarget }) => {\n setState('Waiting for typing to stop...');\n setVal(currentTarget.value);\n }}\n />\n <div>{state}</div>\n <div>Debounced value: {debouncedValue}</div>\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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("useDeepCompareEffect",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(452)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [count, {inc: inc}] = useCounter(0);\n const options = { step: 2 };\n\n useDeepCompareEffect(() => {\n inc(options.step)\n }, [options]);\n\n return (\n <div>\n <p>useDeepCompareEffect: {count}</p>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useDeepCompareEffect(effect: () => void | (() => void | undefined), deps: any[]);</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)};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(200)})}).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)};Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(200)})}).add("Default",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ConsoleStory_1=__webpack_require__(117),ShowDocs_1=__webpack_require__(4),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__(525)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useEffectOnce(() => {\n console.log('Running effect once on mount')\n\n return () => {\n console.log('Running clean-up of effect on unmount')\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),CenterStory_1=__webpack_require__(85),ShowDocs_1=__webpack_require__(4),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__(527)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 from 'react-use/lib/useEvent';\nimport useList from 'react-use/lib/useList';\n\nconst Demo = () => {\n const [list, {push, clear}] = useList();\n\n const onKeyDown = useCallback(({key}) => {\n if (key === 'r') clear();\n push(key);\n }, []);\n\n useEvent('keydown', onKeyDown);\n\n return (\n <div>\n <p>\n Press some keys on your keyboard, <code style={{color: 'tomato'}}>r</code> key resets the list\n </p>\n <pre>\n {JSON.stringify(list, null, 4)}\n </pre>\n </div>\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">useEvent('keydown', handler)\nuseEvent('scroll', handler, window, {capture: true})</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),NewTabStory_1=__webpack_require__(201),ShowDocs_1=__webpack_require__(4),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__(529)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useFavicon('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico');\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(531)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 from 'react-use/lib/useFullscreen';\nimport useToggle from 'react-use/lib/useToggle';\n\nconst Demo = () => {\n const ref = useRef(null)\n const [show, toggle] = useToggle(false);\n const isFullscreen = useFullscreen(ref, show, {onClose: () => toggle(false)});\n\n return (\n <div ref={ref} style={{backgroundColor: 'white'}}>\n <div>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>\n <button onClick={() => toggle()}>Toggle</button>\n <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n </div>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(533)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usegeolocation"><code>useGeolocation</code></h1>\n<p>React sensor hook that tracks user'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 'react-use';\n\nconst Demo = () => {\n const state = useGeolocation();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),react_2=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(535)})}).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,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [get, set] = useGetSet(0);\n const onClick = () => {\n setTimeout(() => {\n set(get() + 1)\n }, 1_000);\n };\n\n return (\n <button onClick={onClick}>Clicked: {get()}</button>\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 = () => {\n const [cnt, set] = useState(0);\n const onClick = () => {\n setTimeout(() => {\n set(cnt + 1)\n }, 1_000);\n };\n\n return (\n <button onClick={onClick}>Clicked: {cnt}</button>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(537)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [get, setState] = useGetSetState({cnt: 0});\n const onClick = () => {\n setTimeout(() => {\n setState({cnt: get().cnt + 1})\n }, 1_000);\n };\n\n return (\n <button onClick={onClick}>Clicked: {get().cnt}</button>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(202)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),react_2=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(202)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(541)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const isIdle = useIdle(3e3);\n\n return (\n <div>\n <div>User is idle: {isIdle ? 'Yes 😴' : 'Nope'}</div>\n </div>\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> — time in milliseconds after which to consider use idle, defaults to <code>60e3</code> — one minute.</li>\n<li><code>initialState</code> — whether to consider user initially idle, defaults to false.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),CenterStory_1=__webpack_require__(85),ShowDocs_1=__webpack_require__(4),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__(543)})}).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,exports){module.exports='<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 'react-use/lib/useKey';\n\nconst Demo = () => {\n const [count, set] = useState(0);\n const increment = () => set(count => ++count);\n useKey('ArrowUp', increment);\n\n return (\n <div>\n Press arrow up: {count}\n </div>\n );\n};</code></pre>\n<p>Or as render-prop:</p>\n<pre><code class="language-jsx">import UseKey from 'react-use/lib/comps/UseKey';\n\n<UseKey filter='a' fn={() => alert('"a" key pressed!')} /></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('a', () => alert('"a" pressed'));\n\nconst predicate = (event) => event.key === 'a'\nuseKey(predicate, handler, {event: 'keyup'});</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),CenterStory_1=__webpack_require__(85),ShowDocs_1=__webpack_require__(4),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__(545)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use/lib/useKeyPress';\n\nconst keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];\n\nconst Demo = () => {\n const states = [];\n for (const key of keys) states.push(useKeyPress(key)[0]);\n\n return (\n <div style={{textAlign: 'center'}}>\n Try pressing numbers\n <br />\n {states.reduce((s, pressed, index) => s + (pressed ? (s ? ' + ' : '') + keys[index] : ''), '')}\n </div>\n );\n};</code></pre>\n<h2 id="examples">Examples</h2>\n<pre><code class="language-js">const isPressed = useKeyPress('a');\n\nconst predicate = (event) => event.key === 'a';\nconst isPressed = useKeyPress(predicate);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(547)})}).add("Demo",function(){return React.createElement(Demo,null)}).add("KeyboardJs",function(){return React.createElement(DemoKeyboardJs,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use/lib/useKeyPressEvent';\n\nconst Demo = () => {\n const [count, setCount] = useState(0);\n\n const increment = () => setCount(count => ++count);\n const decrement = () => setCount(count => --count);\n const reset = () => setCount(count => 0);\n\n useKeyPressEvent(']', increment, increment);\n useKeyPressEvent('[', decrement, decrement);\n useKeyPressEvent('r', reset);\n\n return (\n <div>\n <p>\n Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to\n see the count incremented and decremented.</p>\n <p>Count: {count}</p>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">useKeyPressEvent('<key>', keydown);\nuseKeyPressEvent('<key>', keydown, keyup);\nuseKeyPressEvent('<key>', keydown, keyup, useKeyPress);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(118),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),CenterStory_1=__webpack_require__(85),ShowDocs_1=__webpack_require__(4),Demo=function(_a){var combo=_a.combo,pressed=__1.useKeyboardJs(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__(555)})}).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){module.exports='<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 'react-use/lib/useKeyboardJs';\n\nconst Demo = () => {\n const [isPressed] = useKeyboardJs('a + b');\n\n return (\n <div>\n [a + b] pressed: {isPressed ? 'Yes' : 'No'}\n </div>\n );\n};</code></pre>\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): [isPressed: boolean, event?: KeyboardEvent]</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(557)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(559)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [list, {set, push}] = useList();\n\n return (\n <div>\n <div>{list.join(',')}</div>\n <button onClick={() => set([])}>Reset</button>\n <button onClick={() => push(Date.now())}>Push</button>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(561)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [value, setValue] = useLocalStorage('my-key', 'foo');\n\n return (\n <div>\n <div>Value: {value}</div>\n <button onClick={() => setValue('bar')}>bar</button>\n <button onClick={() => setValue('baz')}>baz</button>\n </div>\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> — <code>localStorage</code> key to manage.</li>\n<li><code>initialValue</code> — initial value to set, if value in <code>localStorage</code> is empty.</li>\n<li><code>raw</code> — 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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(563)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="uselocation"><code>useLocation</code></h1>\n<p>React sensor hook that tracks brower'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 'react-use';\n\nconst Demo = () => {\n const state = useLocation();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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")};react_1.storiesOf("Side effects|useLockBodyScroll",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(565)})}).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))})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useLockBodyScroll, useToggle} from 'react-use';\n\nconst Demo = () => {\n const [locked, toggleLocked] = useToggle(false)\n\n useLockBodyScroll(locked);\n\n return (\n <div>\n <button onClick={() => toggleLocked()}>\n {locked ? 'Unlock' : 'Lock'}\n </button>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useLockBodyScroll(enabled?: boolean = true);</code></pre>\n<ul>\n<li><code>enabled</code> — Hook will lock scrolling on the body element if <code>true</code>, defaults to <code>true</code></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)};Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(118),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),__2=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(props){var _a=__1.useCounter(0),state=_a[0],inc=_a[1].inc;return __2.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__(567)})}).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,exports){module.exports='<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 'react-use';\n\nconst Demo = (props) => {\n useLogger('Demo', 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> — component name.</li>\n<li><code>...rest</code> — parameters to log.</li>\n</ul>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(569)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [map, {set, reset}] = useMap({\n hello: 'there',\n });\n\n return (\n <div>\n <pre>{JSON.stringify(map, null, 2)}</pre>\n <button onClick={() => set(String(Date.now()), (new Date()).toJSON())}>Add</button>\n <button onClick={() => reset()}>Reset</button>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(571)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const isWide = useMedia('(min-width: 480px)');\n\n return (\n <div>\n Screen is wide: {isWide ? 'Yes' : 'No'}\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(573)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const state = useMediaDevices();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(575)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usemotion"><code>useMotion</code></h1>\n<p>React sensor hook that uses device's acceleration sensor to track its motions.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useMotion} from 'react-use';\n\nconst Demo = () => {\n const state = useMotion();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ConsoleStory_1=__webpack_require__(117),ShowDocs_1=__webpack_require__(4),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__(577)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useMount(() => console.log('MOUNTED'));\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useMount(fn: () => void);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(203)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var addon_knobs_1=__webpack_require__(118),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(203)})}).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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(581)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 "online": true,\n "since": "2018-10-27T08:59:05.562Z",\n "downlink": 10,\n "effectiveType": "4g",\n "rtt": 50\n}</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useNetwork} from 'react-use';\n\nconst Demo = () => {\n const state = useNetwork();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),rxjs_1=__webpack_require__(636),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(583)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst counter$ = new BehaviorSubject(0);\nconst Demo = () => {\n const value = useObservable(counter$, 0);\n\n return (\n <button onClick={() => counter$.next(value + 1)}>\n Clicked {value} times\n </button>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(585)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="useorientation"><code>useOrientation</code></h1>\n<p>React sensor hook that tracks screen orientation of user's device.</p>\n<p>Returns state in the following shape</p>\n<pre><code class="language-js">{\n angle: 0,\n type: 'landscape-primary'\n}</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useOrientation} from 'react-use';\n\nconst Demo = () => {\n const state = useOrientation();\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var addon_actions_1=__webpack_require__(113),react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(587)})}).add("Default",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n usePageLeave(() => console.log('Page left...'));\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(589)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [count, setCount] = React.useState(0);\n const prevCount = usePrevious(count);\n\n return (\n <p>\n Now: {count}, before: {prevCount}\n </p>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">const prevState = usePrevious = <T>(state: T): T;</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(591)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = ({promise}) => {\n const mounted = usePromise();\n const [value, setValue] = useState();\n\n useEffect(() => {\n (async () => {\n const value = await mounted(promise);\n // This line will not execute if <Demo> component gets unmounted.\n setValue(value);\n })();\n });\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(593)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const elapsed = useRaf(5000, 1000);\n\n return (\n <div>\n Elapsed: {elapsed}\n </div>\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> — milliseconds for how long to keep re-rendering component, defaults to <code>1e12</code>.</li>\n<li><code>delay</code> — 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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var refMounted=__1.useRefMounted();return __1.useRaf(),React.createElement("div",null,"is mounted: ",refMounted.current?"👍":"👎")};react_1.storiesOf("Lifecycle|useRefMounted",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(595)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="userefmounted"><code>useRefMounted</code></h1>\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 'react-use';\n\nconst Demo = () => {\n const refMounted = useRefMounted();\n\n useEffect(() => {\n setTimeout(() => {\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(597)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const scrollRef = React.useRef(null);\n const {x, y} = useScroll(scrollRef);\n\n return (\n <div ref={scrollRef}>\n <div>x: {x}</div>\n <div>y: {y}</div>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useScroll(ref: RefObject<HTMLElement>);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(599)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [value, setValue] = useSessionStorage('my-key', 'foo');\n\n return (\n <div>\n <div>Value: {value}</div>\n <button onClick={() => setValue('bar')}>bar</button>\n <button onClick={() => setValue('baz')}>baz</button>\n </div>\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> — <code>sessionStorage</code> key to manage.</li>\n<li><code>initialValue</code> — initial value to set, if value in <code>sessionStorage</code> is empty.</li>\n<li><code>raw</code> — 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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(601)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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—it merges object changes into\ncurrent state.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import {useSetState} from 'react-use';\n\nconst Demo = () => {\n const [state, setState] = useSetState({});\n\n return (\n <div>\n <pre>{JSON.stringify(state, null, 2)}</pre>\n <button onClick={() => setState({hello: 'world'})}>hello</button>\n <button onClick={() => setState({foo: 'bar'})}>foo</button>\n <button \n onClick={() => {\n setState((prevState) => ({\n count: (prevState.count || 0) + 1,\n }))\n }}\n >\n count\n </button>\n </div>\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) => ({\n cnt: prevState + 1,\n}));</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(603)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [sized, {width, height}] = useSize(\n ({width}) => <div style={{border: '1px solid red'}}>Size me up! ({width}px)</div>\n );\n\n return (\n <div>\n {sized}\n <div>width: {width}</div>\n <div>height: {height}</div>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var state=__1.useSpeech("Hello world!");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__(605)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const state = useSpeech('Hello world!');\n\n return (\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre> \n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var _a=React.useState(50),target=_a[0],setTarget=_a[1],value=__1.useSpring(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__(607)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const [target, setTarget] = useState(50);\n const value = useSpring(target);\n\n return (\n <div>\n {value}\n <br />\n <button onClick={() => setTarget(0)}>Set 0</button>\n <button onClick={() => setTarget(100)}>Set 100</button>\n </div>\n );\n};</code></pre>\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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(609)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use/lib/useStartTyping';\n\nconst Demo = () => {\n useStartTyping(() => alert('Started typing...'));\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(204)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(204)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var ready=__1.useTimeout(2e3);return React.createElement("div",null,"Ready: ",ready?"Yes":"No")};react_1.storiesOf("Animation|useTimeout",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(613)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usetimeout"><code>useTimeout</code></h1>\n<p>Returns <code>true</code> after a specified number of milliseconds.</p>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useTimeout } from 'react-use';\n\nconst Demo = () => {\n const ready = useTimeout(2000);\n\n return <div>Ready: {ready ? 'Yes' : 'No'}</div>;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),NewTabStory_1=__webpack_require__(201),ShowDocs_1=__webpack_require__(4),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__(615)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useTitle('Hello world!');\n\n return null;\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(188)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(618)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const t = useTween();\n\n return (\n <div>\n Tween: {t}\n </div>\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> — 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> — milliseconds for how long to keep re-rendering component, defaults to <code>200</code>.</li>\n<li><code>delay</code> — 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){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ConsoleStory_1=__webpack_require__(117),ShowDocs_1=__webpack_require__(4),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__(620)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n useUnmount(() => console.log('UNMOUNTED'));\n return null;\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useUnmount(fn: () => void | undefined);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(622)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const update = useUpdate();\n return (\n <>\n <div>Time: {Date.now()}</div>\n <button onClick={update}>Update</button>\n </>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(624)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react'\nimport {useUpdateEffect} from 'react-use';\n\nconst Demo = () => {\n const [count, setCount] = React.useState(0);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setCount(count => count + 1)\n }, 1000)\n\n return () => {\n clearInterval(interval)\n }\n }, [])\n\n useUpdateEffect(() => {\n console.log('count', count) // will only show 1 and beyond\n\n return () => { // *OPTIONAL*\n // do something on unmount\n }\n }) // you can include deps array if necessary\n\n return <div>Count: {count}</div>\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(626)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usevideo"><code>useVideo</code></h1>\n<p>Creates <code><video></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 'react-use';\n\nconst Demo = () => {\n const [video, state, controls, ref] = useVideo(\n <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n );\n\n return (\n <div>\n {video}\n <pre>{JSON.stringify(state, null, 2)}</pre>\n <button onClick={controls.pause}>Pause</button>\n <button onClick={controls.play}>Play</button>\n <br/>\n <button onClick={controls.mute}>Mute</button>\n <button onClick={controls.unmute}>Un-mute</button>\n <br/>\n <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n <br/>\n <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n </div>\n );\n};</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(<video {...props}/>);</code></pre>\n<p><code>video</code> is React's <code><video></code> element that you have to insert somewhere in your\nrender tree, for example:</p>\n<pre><code class="language-jsx"><div>{video}</div></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 "buffered": [\n {\n "start": 0,\n "end": 425.952625\n }\n ],\n "time": 5.244996,\n "duration": 425.952625,\n "isPlaying": false,\n "muted": false,\n "volume": 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: () => Promise<void> | void;\n pause: () => void;\n mute: () => void;\n unmute: () => void;\n volume: (volume: number) => void;\n seek: (time: number) => void;\n}</code></pre>\n<p><code>ref</code> is a React reference to HTML <code><video></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> — all props that <code><video></code> accepts.</p>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(628)})}).add("Demo",function(){return React.createElement(__1.useWait.Waiter,null,React.createElement(Demo,null))})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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'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 'react-use'\n\nfunction UserCreateButton() {\n const { startWaiting, endWaiting, isWaiting, Wait } = useWait();\n\n return (\n <button\n onClick={() => startWaiting("creating user")}\n disabled={isWaiting("creating user")}\n >\n <Wait on="creating user" fallback={<div>Creating user!</div>}>\n Create User\n </Wait>\n </button>\n );\n}</code></pre>\n<p>And you should wrap your <code>App</code> with <code>Waiter</code> component. It'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("root");\nReactDOM.render(\n <useWait.Waiter>\n <App />\n </useWait.Waiter>,\n rootElement\n);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(630)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const {x, y} = useWindowScroll();\n\n return (\n <div>\n <div>x: {x}</div>\n <div>y: {y}</div>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),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__(632)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<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 'react-use';\n\nconst Demo = () => {\n const {width, height} = useWindowSize();\n\n return (\n <div>\n <div>width: {width}</div>\n <div>height: {height}</div>\n </div>\n );\n};</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(2),React=__webpack_require__(0),UseKey_1=__webpack_require__(634);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};Object.defineProperty(exports,"__esModule",{value:!0});var useKey_1=__webpack_require__(108),UseKey=__webpack_require__(635).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}}}],[[207,1,2]]]);
|
|
//# sourceMappingURL=main.ac62ce2ad5a8b5ec0eb9.bundle.js.map
|