mirror of
https://github.com/streamich/react-use.git
synced 2026-02-01 14:37:31 +00:00
2 lines
141 KiB
JavaScript
2 lines
141 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__(325);exports.createMemo=createMemo_1.default;var useAsync_1=__webpack_require__(147);exports.useAsync=useAsync_1.default;var useAsyncRetry_1=__webpack_require__(326);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(327);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(329);exports.useBattery=useBattery_1.default;var useBoolean_1=__webpack_require__(330);exports.useBoolean=useBoolean_1.default;var useCounter_1=__webpack_require__(150);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(331);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(337);exports.useDebounce=useDebounce_1.default;var useFavicon_1=__webpack_require__(338);exports.useFavicon=useFavicon_1.default;var useGeolocation_1=__webpack_require__(339);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(151);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(340);exports.useGetSetState=useGetSetState_1.default;var useHover_1=__webpack_require__(341);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(152);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(342);exports.useIdle=useIdle_1.default;var useKeyPress_1=__webpack_require__(153);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(347);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(155);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(348);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(349);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(350);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(351);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(352);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(353);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(354);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(355);exports.useMediaDevices=useMediaDevices_1.default;var useMotion_1=__webpack_require__(356);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(156);exports.useMount=useMount_1.default;var useMouse_1=__webpack_require__(157);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(357);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(358);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(359);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(360);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(361);exports.useOrientation=useOrientation_1.default;var useClickAway_1=__webpack_require__(362);exports.useClickAway=useClickAway_1.default;var usePromise_1=__webpack_require__(363);exports.usePromise=usePromise_1.default;var useRaf_1=__webpack_require__(159);exports.useRaf=useRaf_1.default;var useRefMounted_1=__webpack_require__(158);exports.useRefMounted=useRefMounted_1.default;var useScroll_1=__webpack_require__(364);exports.useScroll=useScroll_1.default;var useSessionStorage_1=__webpack_require__(365);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(91);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(366);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(367);exports.useSpeech=useSpeech_1.default;var useSpring_1=__webpack_require__(368);exports.useSpring=useSpring_1.default;var useTimeout_1=__webpack_require__(370);exports.useTimeout=useTimeout_1.default;var useTitle_1=__webpack_require__(371);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(149);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(372);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(374);exports.useUnmount=useUnmount_1.default;var useUpdate_1=__webpack_require__(92);exports.useUpdate=useUpdate_1.default;var useVideo_1=__webpack_require__(375);exports.useVideo=useVideo_1.default;var useWindowScroll_1=__webpack_require__(376);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(377);exports.useWindowSize=useWindowSize_1.default;var useWait_1=__webpack_require__(378);exports.useWait=useWait_1.default;var useUpdateEffect_1=__webpack_require__(380);exports.useUpdateEffect=useUpdateEffect_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(http://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(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(){var setState=react_1.useState(0)[1];return function(){return setState(function(cnt){return cnt+1})}}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(fn,args){var _a=react_1.useState({loading:!0}),state=_a[0],set=_a[1],memoized=react_1.useCallback(fn,args);return react_1.useEffect(function(){var mounted=!0;return set({loading:!0}),memoized().then(function(value){mounted&&set({loading:!1,value:value})},function(error){mounted&&set({loading:!1,error:error})}),function(){mounted=!1}},[memoized]),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__(91),parseTimeRanges_1=__webpack_require__(328);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&&(props.autoPlay&&el.paused&&controls.play(),setState({volume:el.volume,muted:el.muted}))},[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(state){var _a=react_1.useState(state),value=_a[0],setValue=_a[1];return[value,react_1.useCallback(function(nextValue){setValue(void 0===nextValue?function(value){return!value}:!!nextValue)},[setValue])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useGetSet_1=__webpack_require__(151),react_1=__webpack_require__(0);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__(92);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);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=__webpack_require__(0),useState=React.useState,useEffect=React.useEffect,defaults={useKeyboardJS:!1},useKeyPress=function(targetKey,config){void 0===config&&(config=defaults);var _a=useState(!1),state=_a[0],setState=_a[1],_b=useState(null),keyboardjs=_b[0],setKeyboardJs=_b[1],useKeyboardJS=config.useKeyboardJS;useKeyboardJS&&Promise.resolve().then(function(){return __webpack_require__(344)}).then(setKeyboardJs);var regularDownHandler=function(_a){_a.key===targetKey&&setState(!0)},regularUpHandler=function(_a){_a.key===targetKey&&setState(!1)},customDownHandler=function(){setState(!0)},customUpHandler=function(){setState(!1)};return useEffect(function(){return useKeyboardJS?keyboardjs&&keyboardjs.bind(targetKey,customDownHandler,customUpHandler):(window.addEventListener("keydown",regularDownHandler),window.addEventListener("keyup",regularUpHandler)),function(){useKeyboardJS?keyboardjs&&keyboardjs.unbind(targetKey,customDownHandler,customUpHandler):(window.removeEventListener("keydown",regularDownHandler),window.removeEventListener("keyup",regularUpHandler))}},[targetKey,useKeyPress,keyboardjs]),state};exports.default=useKeyPress},,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(mount){return react_1.useEffect(mount,[])}},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(){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(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="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<p><code>bound</code> — to bind mouse coordinates withing the element.\n<code>whenHovered</code> — whether to attach <code>mousemove</code> event handler only when user hovers over the element.</p>\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={element}>\n <div>Mouse position in document - x:{docX} y:{docY}</div>\n <div>Mouse position in element - x:{posX} y:{posY}</div>\n <div>Element position - x:{elX} y:{elY}</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,__webpack_require__){__webpack_require__(166),__webpack_require__(246),module.exports=__webpack_require__(247)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(23),__webpack_require__(25),__webpack_require__(45);var _storybook_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(2),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(164);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_4__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(323);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_3__.configure)(function(){req.keys().forEach(function(filename){return req(filename)})},module)}.call(this,__webpack_require__(248)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./__stories__/createMemo.story.tsx":324,"./__stories__/useAsync.story.tsx":382,"./__stories__/useAsyncRetry.story.tsx":384,"./__stories__/useAudio.story.tsx":386,"./__stories__/useBattery.story.tsx":388,"./__stories__/useBoolean.story.tsx":390,"./__stories__/useClickAway.story.tsx":391,"./__stories__/useCounter.story.tsx":393,"./__stories__/useCss.story.tsx":395,"./__stories__/useDebounce.story.tsx":397,"./__stories__/useFavicon.story.tsx":399,"./__stories__/useGeolocation.story.tsx":401,"./__stories__/useGetSet.story.tsx":403,"./__stories__/useGetSetState.story.tsx":405,"./__stories__/useHover.story.tsx":407,"./__stories__/useHoverDirty.story.tsx":408,"./__stories__/useIdle.story.tsx":409,"./__stories__/useKeyPress.story.tsx":411,"./__stories__/useKeyPressEvent.story.tsx":413,"./__stories__/useLifecycles.story.tsx":415,"./__stories__/useList.story.tsx":417,"./__stories__/useLocalStorage.story.tsx":419,"./__stories__/useLocation.story.tsx":421,"./__stories__/useLockBodyScroll.story.tsx":423,"./__stories__/useLogger.story.tsx":425,"./__stories__/useMap.story.tsx":427,"./__stories__/useMedia.story.tsx":429,"./__stories__/useMediaDevices.story.tsx":431,"./__stories__/useMotion.story.tsx":433,"./__stories__/useMount.story.tsx":435,"./__stories__/useMouse.story.tsx":437,"./__stories__/useMouseHovered.story.tsx":438,"./__stories__/useNetwork.story.tsx":446,"./__stories__/useObservable.story.tsx":448,"./__stories__/useOrientation.story.tsx":450,"./__stories__/usePromise.story.tsx":452,"./__stories__/useRaf.story.tsx":454,"./__stories__/useRefMounted.story.tsx":456,"./__stories__/useScroll.story.tsx":458,"./__stories__/useSessionStorage.story.tsx":460,"./__stories__/useSetState.story.tsx":462,"./__stories__/useSize.story.tsx":464,"./__stories__/useSpeech.story.tsx":465,"./__stories__/useSpring.story.tsx":467,"./__stories__/useTimeout.story.tsx":469,"./__stories__/useTitle.story.tsx":471,"./__stories__/useToggle.story.tsx":473,"./__stories__/useTween.story.tsx":474,"./__stories__/useUnmount.story.tsx":476,"./__stories__/useUpdate.story.tsx":478,"./__stories__/useUpdateEffect.story.tsx":480,"./__stories__/useVideo.story.tsx":482,"./__stories__/useWait.story.tsx":484,"./__stories__/useWindowScroll.story.tsx":486,"./__stories__/useWindowSize.story.tsx":488};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=323},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),react_1=__webpack_require__(2),__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__(381)})}).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__(147);exports.default=function(fn,args){void 0===args&&(args=[]);var _a=react_1.useState(0),attempt=_a[0],setAttempt=_a[1],memoized=react_1.useCallback(function(){return fn()},args.concat([attempt])),state=useAsync_1.default(memoized),retry=react_1.useCallback(function(){state.loading||setAttempt(attempt+1)},[memoized,state,attempt]);return __assign({},state,{retry:retry})}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useAudio=__webpack_require__(148).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__(17);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))}},[0]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useToggle_1=__webpack_require__(149);exports.default=useToggle_1.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),nano_css_1=__webpack_require__(332),cssom_1=__webpack_require__(333),vcssom_1=__webpack_require__(334),cssToTree_1=__webpack_require__(336),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);exports.default=function(href){react_1.useEffect(function(){var link=document.querySelector("link[rel*='icon']")||document.createElement("link");link.type="image/x-icon",link.rel="shortcut icon",link.href=href,document.getElementsByTagName("head")[0].appendChild(link)},[href])}},function(module,exports,__webpack_require__){"use strict";var __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(){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),watchId=navigator.geolocation.watchPosition(onEvent,onEventError),function(){mounted=!1,navigator.geolocation.clearWatch(watchId)}},[0]),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__(92);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),util_1=__webpack_require__(17),throttle_debounce_1=__webpack_require__(343),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)}},events),state}},,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useEffect=__webpack_require__(0).useEffect,useKeyPress_1=__webpack_require__(153);exports.default=function(targetKey,onKeyup,onKeydown){void 0===onKeyup&&(onKeyup=void 0),void 0===onKeydown&&(onKeydown=void 0);var useKeyboardJS=targetKey.length>1,pressedKeys=useKeyPress_1.default(targetKey,{useKeyboardJS:useKeyboardJS});void 0===onKeydown&&(onKeydown=onKeyup,onKeyup=null),useEffect(function(){pressedKeys?onKeydown&&onKeydown(targetKey):onKeyup&&onKeyup(targetKey)},[pressedKeys])}},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,updateAt:function(index,entry){return set(list.slice(0,index).concat([entry],list.slice(index+1)))},remove:function(index){return set(list.slice(0,index).concat(list.slice(index+1)))},push:function(entry){return set(list.concat([entry]))},filter:function(fn){return set(list.filter(fn))},sort:function(fn){return set(list.slice().sort(fn))}}]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),isClient="object"==typeof window;exports.default=function(key,initialValue,raw){if(!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__(17),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"));exports.default=function(){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}},_a=react_1.useState(util_1.isClient?buildState("load"):{trigger:"load",length:1}),state=_a[0],setState=_a[1],onChange=function(trigger){return setState(buildState(trigger))},onPopstate=function(){return onChange("popstate")},onPushstate=function(){return onChange("pushstate")},onReplacestate=function(){return onChange("replacestate")};return react_1.useEffect(function(){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)}},[0]),state}},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 react_1=__webpack_require__(0),useLifecycles_1=__webpack_require__(155);exports.default=function(name,props){useLifecycles_1.default(function(){return console.log(name+" mounted")},function(){return console.log(name+" un-mounted")}),react_1.useEffect(function(){console.log(name+" props updated",props)})}},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&&(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;return set(__assign({},map,((_a={})[key]=entry,_a)))},remove:function(key){var _a=map,_b=key,rest=(_a[_b],__rest(_a,["symbol"==typeof _b?_b:_b+""]));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__(17),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)}},[0]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(17),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)}},[0]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useHoverDirty_1=__webpack_require__(152),useMouse_1=__webpack_require__(157),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__(17),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)}},[0]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useCounter_1=__webpack_require__(150);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(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__(17),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)}},[0]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(17);exports.default=function(ref,onClickAway){react_1.useEffect(function(){var handler=function(event){var el=ref.current;el&&!el.contains(event.target)&&onClickAway()};return util_1.on(document,"click",handler),function(){util_1.off(document,"click",handler)}})}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useRefMounted_1=__webpack_require__(158);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),util_1=__webpack_require__(17);exports.default=function(ref){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:ref.current.scrollLeft,y:ref.current.scrollTop})})};return ref&&ref.current&&ref.current.addEventListener("scroll",handler,{capture:!1,passive:!0}),function(){frame.current&&cancelAnimationFrame(frame.current),ref&&ref.current&&ref.current.removeEventListener("scroll",handler)}},[ref]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),isClient="object"==typeof window;exports.default=function(key,initialValue,raw){if(!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),useState=React.useState,useEffect=React.useEffect,useRef=React.useRef,isClient="object"==typeof window;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(!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(window){window.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)}},[0]),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),useSetState_1=__webpack_require__(91),useMount_1=__webpack_require__(156);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 rebound_1=__webpack_require__(369),react_1=__webpack_require__(0);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(spring){var value=spring.getCurrentValue();setValue(value)}};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(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__(373),useRaf_1=__webpack_require__(159);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 react_1=__webpack_require__(0);exports.default=function(unmount){react_1.useEffect(function(){return function(){unmount&&unmount()}},[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__webpack_require__(148).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(17);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),isClient="object"==typeof window;exports.default=function(initialWidth,initialHeight){void 0===initialWidth&&(initialWidth=1/0),void 0===initialHeight&&(initialHeight=1/0);var _a=react_1.useState({width:isClient?window.innerWidth:initialWidth,height:isClient?window.innerHeight:initialHeight}),state=_a[0],setState=_a[1];return react_1.useEffect(function(){if(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,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_wait_1=__webpack_require__(379);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);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){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=__webpack_require__(0),react_1=__webpack_require__(2),__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,value=_a.value;return React.createElement("div",null,loading?React.createElement("div",null,"Loading..."):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__(383)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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("a",{href:"javascript:void 0",onClick:function(){return retry()}},"Retry"))};react_1.storiesOf("Side effects|useAsyncRetry",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(385)})}).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 = 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 {!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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(387)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(389)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(160)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__1=__webpack_require__(3),react_2=__webpack_require__(0),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__(392)})}).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'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),react_1=__webpack_require__(2),__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__(394)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(396)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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];return __1.useDebounce(function(){setState("Typing stopped")},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_1.storiesOf("Side effects|useDebounce",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(398)})}).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\n useDebounce(\n () => {\n setState('Typing stopped');\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>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-ts">useDebouce(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(){return __1.useFavicon("https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"),null};react_1.storiesOf("Side effects|useFavicon",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(400)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(402)})}).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.</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'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),react_1=__webpack_require__(2),__1=__webpack_require__(3),react_2=__webpack_require__(0),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__(404)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(406)})}).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(hovered){return React.createElement("div",null,"Hover me! ",hovered&&"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__(161)})}).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__(161)})}).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 isIdle=__1.useIdle(3e3);return React.createElement("div",null,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__(410)})}).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),ShowDocs_1=__webpack_require__(4),Demo=function(){var hasPressedQ=__1.useKeyPress("q"),hasPressedW=__1.useKeyPress("w"),hasPressedE=__1.useKeyPress("e"),hasPressedR=__1.useKeyPress("r"),hasPressedT=__1.useKeyPress("t"),hasPressedY=__1.useKeyPress("y"),hasPressedWord=__1.useKeyPress("q + w + e + r + t + y",{useKeyboardJS:!0});return React.createElement("div",null,"Try pressing each one of these at a time: ",React.createElement("code",null,"Q W E R T Y"),!hasPressedWord&&React.createElement("div",null,hasPressedQ&&"Q",hasPressedW&&"W",hasPressedE&&"E",hasPressedR&&"R",hasPressedT&&"T",hasPressedY&&"Y"),React.createElement("div",null,"And now press them all at once!"),React.createElement("div",null,hasPressedWord&&"Q + W + E + R + T + Y"))};react_1.storiesOf("Sensors|useKeyPress",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(412)})}).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<p>Complex bindings like detecting when multiple keys are held down at the same\ntime or requiring them to be held down in a specified order are also available\nvia <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<p>Requires <code>keyboardjs</code>:</p>\n<pre><code class="language-bash">npm add keyboardjs\n# or\nyarn add keyboardjs</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import { useKeyPress } from "react-use";\n\nconst Demo = () => {\n const hasPressedQ = useKeyPress("q");\n const hasPressedW = useKeyPress("w");\n const hasPressedE = useKeyPress("e");\n const hasPressedR = useKeyPress("r");\n const hasPressedT = useKeyPress("t");\n const hasPressedY = useKeyPress("y");\n const hasPressedWord = useKeyPress("q + w + e + r + t + y", {\n useKeyboardJS: true\n });\n\n return (\n <div>\n Try pressing each one of these at a time: <code>Q W E R T Y</code>\n {!hasPressedWord && (\n <div>\n {hasPressedQ && "Q"}\n {hasPressedW && "W"}\n {hasPressedE && "E"}\n {hasPressedR && "R"}\n {hasPressedT && "T"}\n {hasPressedY && "Y"}\n </div>\n )}\n <div>And now press them all at once!</div>\n <div>{hasPressedWord && "Q + W + E + R + T + Y"}</div>\n </div>\n );\n};</code></pre>\n<h2 id="reference">Reference</h2>\n<pre><code class="language-js">const hasPressedSingleKey = useKeyPress("<key>");\nconst hasPressedKeyCombo = useKeyPress("<key combo>", {\n useKeyboardJS: true\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],increment=function(){return setCount(function(count){return++count})},decrement=function(){return setCount(function(count){return--count})};return __1.useKeyPressEvent("]",increment,increment),__1.useKeyPressEvent("[",decrement,decrement),__1.useKeyPressEvent("r",function(){return setCount(function(count){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))};react_1.storiesOf("Sensors/useKeyPressEvent",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(414)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="usekeypressevent"><code>useKeyPressEvent</code></h1>\n<p>React UI sensor hook that detects when the user is pressing a specific\nkey on their keyboard and fires a specified keyup and/or keydown effect. If\nyou only need to retrieve the state, see <a href="useKeyPress.md">useKeyPress</a>.</p>\n<p>Complex bindings like detecting when multiple keys are held down at the same\ntime or requiring them to be held down in a specified order are also available\nvia <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<p>The first argument is the key(s) to watch. If only a second argument\n(a function) is passed, it will be used in the keydown event. On the other hand,\nif a second and third argument are passed, the second will be used in the keyup\nevent and the third in the keydown event. Essentially, keydown takes precedence.</p>\n<p>Requires <code>keyboardjs</code>:</p>\n<pre><code class="language-bash">npm add keyboardjs\n# or\nyarn add keyboardjs</code></pre>\n<h2 id="usage">Usage</h2>\n<pre><code class="language-jsx">import React, { useState } from React;\nimport { useKeyPressEvent } from "react-use";\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>', onKeydown);\nuseKeyPressEvent('<key>', onKeyup, onKeydown);</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("Lifecycles|useLifecycles",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(416)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(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__(418)})}).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__(420)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var state=__1.useLocation();return 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__(422)})}).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__(424)})}).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">useToggle(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){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(props){return __1.useLogger("Demo",props),null};react_1.storiesOf("Lifecycles|useLogger",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(426)})}).add("Demo",function(){return React.createElement(Demo,null)})}).call(this,__webpack_require__(1)(module))},function(module,exports){module.exports='<h1 id="uselogger"><code>useLogger</code></h1>\n<p>React lifecycle hook that logs in console as component transitions through life-cycles.</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 props updated {}\nDemo un-mounted</code></pre><h2 id="reference">Reference</h2>\n<pre><code class="language-js">useLogger(name, props);</code></pre>\n<ul>\n<li><code>name</code> — component name.</li>\n<li><code>props</code> — latest props.</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__(428)})}).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__(430)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(432)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(434)})}).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),ShowDocs_1=__webpack_require__(4),Demo=function(){return __1.useMount(function(){return console.log("MOUNTED")}),null};react_1.storiesOf("Lifecycles|useMount",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(436)})}).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 call <code>mount</code> callback, when\ncomponent is mounted.</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-js">useMount(mount);</code></pre>\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0),react_1=__webpack_require__(2),__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__(162)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),addon_knobs_1=__webpack_require__(439),__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__(162)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(447)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),counter$=new(__webpack_require__(490).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__(449)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(451)})}).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 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("Lifecycles|usePromise",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(453)})}).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("Animations|useRaf",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(455)})}).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>reaquestAnimationFrame</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("Lifecycles|useRefMounted",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(457)})}).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.currrent) {\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=__webpack_require__(0),react_1=__webpack_require__(2),__1=__webpack_require__(3),ShowDocs_1=__webpack_require__(4),Demo=function(){var element=React.useRef(null),_a=__1.useScroll(element),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:element,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__(459)})}).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 on when 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 element = React.useRef(null);\n const {x, y} = useScroll(element);\n\n return (\n <div ref={element}>\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.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__(461)})}).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__(463)})}).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),Demo=function(){var _a=__1.useSize(function(_a){var width=_a.width;return React.createElement("div",{style:{border:"1px solid red"}},"Size me up! (",width,"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("Example",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 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__(466)})}).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<p><a href="https://codesandbox.io/s/n090mqz69m"><img src="https://img.shields.io/badge/demo-useSpeech-green.svg" alt=""></a></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("Animations|useSpring",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(468)})}).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<p>Requires <code>rebound</code>:</p>\n<pre><code class="language-bash">npm add rebound\n# or\nyarn add rebound</code></pre>\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<h1 id="reference">Reference</h1>\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 ready=__1.useTimeout(2e3);return React.createElement("div",null,"Ready: ",ready?"Yes":"No")};react_1.storiesOf("Animations|useTimeout",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(470)})}).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),ShowDocs_1=__webpack_require__(4),Demo=function(){return __1.useTitle("Hello world!"),null};react_1.storiesOf("Side effects|useTitle",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(472)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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: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|useToggle",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(160)})}).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("Animations|useTween",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(475)})}).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<p><a href="https://codesandbox.io/s/52990wwzyl"><img src="https://img.shields.io/badge/demo-useTween-green.svg" alt=""></a></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),ShowDocs_1=__webpack_require__(4),Demo=function(){return __1.useUnmount(function(){return console.log("UNMOUNTED")}),null};react_1.storiesOf("Lifecycles|useUnmount",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(477)})}).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 call <code>unmount</code> callback, when\ncomponent is un-mounted.</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-js">useUnmount(mount);</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("Animations|useUpdate",module).add("Docs",function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(479)})}).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),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(count){return count+1})}},"Count: ",count),React.createElement("p",null,"Updated: ",didUpdate))};react_1.storiesOf("useUpdateEffect",module).add("Docs",function(){return React.createElement(ShowDocs,{md:__webpack_require__(481)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(483)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(485)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(487)})}).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=__webpack_require__(0),react_1=__webpack_require__(2),__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__(489)})}).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'}],[[165,1,2]]]);
|
|
//# sourceMappingURL=main.9c1222e90ff035284144.bundle.js.map
|