diff --git a/iframe.html b/iframe.html index 4a3e963b..1f5d5555 100644 --- a/iframe.html +++ b/iframe.html @@ -70,4 +70,4 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/main.a2e70de30ebd93e2310b.bundle.js b/main.a2e70de30ebd93e2310b.bundle.js
deleted file mode 100644
index ed33d4ed..00000000
--- a/main.a2e70de30ebd93e2310b.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(0).__importStar(__webpack_require__(1)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(612);exports.createMemo=createMemo_1.default;var createReducer_1=__webpack_require__(613);exports.createReducer=createReducer_1.default;var useAsync_1=__webpack_require__(277);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(178);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(614);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(615);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(617);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(618);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(619);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(620);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(621);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(281);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(624);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(630);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(631);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(632);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(633);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(634);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(128);exports.useEffectOnce=useEffectOnce_1.default;var useEnsuredForwardedRef_1=__webpack_require__(635);exports.useEnsuredForwardedRef=useEnsuredForwardedRef_1.default,exports.ensuredForwardRef=useEnsuredForwardedRef_1.ensuredForwardRef;var useEvent_1=__webpack_require__(283);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(636);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(637);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(639);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(282);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(640);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(641);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(643);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(284);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(644);exports.useIdle=useIdle_1.default;var useIntersection_1=__webpack_require__(646);exports.useIntersection=useIntersection_1.default;var useInterval_1=__webpack_require__(647);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(285);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(180);exports.useKey=useKey_1.default;var createBreakpoint_1=__webpack_require__(648);exports.createBreakpoint=createBreakpoint_1.default;var useKeyPress_1=__webpack_require__(286);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(649);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(650);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(287);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(651);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(652);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(653);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(654);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(655);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(656);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(657);exports.useMediaDevices=useMediaDevices_1.default;var useMediatedState_1=__webpack_require__(288);exports.useMediatedState=useMediatedState_1.useMediatedState;var useMotion_1=__webpack_require__(658);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(181);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(61);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(289);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(659);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(660);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(661);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(662);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(663);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(664);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(665);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(666);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(667);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(668);exports.usePromise=usePromise_1.default;var useQueue_1=__webpack_require__(669);exports.useQueue=useQueue_1.default;var useRaf_1=__webpack_require__(290);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(670);exports.useRafLoop=useRafLoop_1.default;var useRafState_1=__webpack_require__(94);exports.useRafState=useRafState_1.default;var useSearchParam_1=__webpack_require__(671);exports.useSearchParam=useSearchParam_1.default;var useScroll_1=__webpack_require__(672);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(673);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(674);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(126);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(675);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(676);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(677);exports.useStartTyping=useStartTyping_1.default;var useStateWithHistory_1=__webpack_require__(678);exports.useStateWithHistory=useStateWithHistory_1.useStateWithHistory;var useStateList_1=__webpack_require__(679);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(680);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(681);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(682);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(179);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(683);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(280);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(684);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(129);exports.useUnmount=useUnmount_1.default;var useUnmountPromise_1=__webpack_require__(686);exports.useUnmountPromise=useUnmountPromise_1.default;var useUpdate_1=__webpack_require__(54);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(92);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(687);exports.useUpsert=useUpsert_1.default;var useVibrate_1=__webpack_require__(688);exports.useVibrate=useVibrate_1.default;var useVideo_1=__webpack_require__(689);exports.useVideo=useVideo_1.default;var useStateValidator_1=__webpack_require__(291);exports.useStateValidator=useStateValidator_1.default;var useScrollbarWidth_1=__webpack_require__(690);exports.useScrollbarWidth=useScrollbarWidth_1.useScrollbarWidth;var useMultiStateValidator_1=__webpack_require__(692);exports.useMultiStateValidator=useMultiStateValidator_1.useMultiStateValidator;var useWindowScroll_1=__webpack_require__(693);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(694);exports.useWindowSize=useWindowSize_1.default;var useMeasure_1=__webpack_require__(695);exports.useMeasure=useMeasure_1.default;var useRendersCount_1=__webpack_require__(292);exports.useRendersCount=useRendersCount_1.useRendersCount;var useFirstMountState_1=__webpack_require__(93);exports.useFirstMountState=useFirstMountState_1.useFirstMountState;var useSet_1=__webpack_require__(697);exports.useSet=useSet_1.default},,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isClient="object"==typeof window,exports.on=function(obj){for(var args=[],_i=1;_iarr.length?arr[index]=item:arr.splice(index,0,item),arr}))},update:function(predicate,newItem){actions.set((function(curr){return curr.map((function(item){return predicate(item,newItem)?newItem:item}))}))},updateFirst:function(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0&&actions.updateAt(index,newItem)},upsert:function(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0?actions.updateAt(index,newItem):actions.push(newItem)},sort:function(compareFn){actions.set((function(curr){return curr.slice().sort(compareFn)}))},filter:function(callbackFn,thisArg){actions.set((function(curr){return curr.slice().filter(callbackFn,thisArg)}))},removeAt:function(index){actions.set((function(curr){var arr=curr.slice();return arr.splice(index,1),arr}))},clear:function(){actions.set([])},reset:function(){actions.set(resolveHookState_1.resolveHookState(initialList).slice())}};return a.remove=a.removeAt,a}),[]);return[list.current,actions]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useMediatedState=function useMediatedState(mediator,initialState){var mediatorFn=react_1.useRef(mediator),_a=react_1.useState(initialState),state=_a[0],setMediatedState=_a[1];return[state,react_1.useCallback((function(newState){2===mediatorFn.current.length?mediatorFn.current(newState,setMediatedState):setMediatedState(mediatorFn.current(newState))}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useRafState_1=tslib_1.__importDefault(__webpack_require__(94));exports.default=function(ref){var _a=useRafState_1.default({docX:0,docY:0,posX:0,posY:0,elX:0,elY:0,elH:0,elW:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var moveHandler=function(event){if(ref&&ref.current){var _a=ref.current.getBoundingClientRect(),left=_a.left,top=_a.top,elW=_a.width,elH=_a.height,posX=left+window.pageXOffset,posY=top+window.pageYOffset,elX=event.pageX-posX,elY=event.pageY-posY;setState({docX:event.pageX,docY:event.pageY,posX:posX,posY:posY,elX:elX,elY:elY,elH:elH,elW:elW})}};return document.addEventListener("mousemove",moveHandler),function(){document.removeEventListener("mousemove",moveHandler)}}),[ref]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(ms,delay){void 0===ms&&(ms=1e12),void 0===delay&&(delay=0);var _a=react_1.useState(0),elapsed=_a[0],set=_a[1];return react_1.useLayoutEffect((function(){var raf,timerStop,start,onFrame=function(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout((function(){timerStop=setTimeout((function(){cancelAnimationFrame(raf),set(1)}),ms),start=Date.now(),loop()}),delay);return function(){clearTimeout(timerStop),clearTimeout(timerDelay),cancelAnimationFrame(raf)}}),[ms,delay]),elapsed}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function useStateValidator(state,validator,initialState){void 0===initialState&&(initialState=[void 0]);var validatorInner=react_1.useRef(validator),stateInner=react_1.useRef(state);validatorInner.current=validator,stateInner.current=state;var _a=react_1.useState(initialState),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(stateInner.current,setValidity):setValidity(validatorInner.current(stateInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),[state]),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useRendersCount=function useRendersCount(){return++react_1.useRef(0).current}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useToggle
\n
React state hook that tracks value of a boolean.
\n
useBoolean is an alias for useToggle.
\n
Usage
\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDrop and useDropArea
\n
Triggers on file, link drop and copy-paste.
\n
useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.
\n
Usage
\n
useDrop:
\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n
useDropArea:
\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0).__importStar(__webpack_require__(1));exports.default=function(_a){var children=_a.children;return window.location===window.parent.location?children:React.createElement("p",null,"This story should be"," ",React.createElement("a",{href:window.location.href,target:"_blank",title:"Open in new tab"},"opened in a new tab"),".")}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useHover and useHoverDirty
\n
React UI sensor hooks that track if some element is being hovered\nby a mouse.
\n\n
Usage
\n
import {useHover} from 'react-use';\n\nconst Demo = () => {\n  const element = (hovered) =>\n    <div>\n      Hover me! {hovered && 'Thanks!'}\n    </div>;\n  const [hoverable, hovered] = useHover(element);\n\n  return (\n    <div>\n      {hoverable}\n      <div>{hovered ? 'HOVERED' : ''}</div>\n    </div>\n  );\n};
\n
Reference
\n
const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) => reactElement);\nconst isHovering = useHoverDirty(ref);
\n'},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useMouse and useMouseHovered
\n
React sensor hooks that re-render on mouse position changes. useMouse simply tracks\nmouse position; useMouseHovered allows you to specify extra options:
\n\n
Usage
\n
import {useMouse} from 'react-use';\n\nconst Demo = () => {\n  const ref = React.useRef(null);\n  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n  return (\n    <div ref={ref}>\n      <div>Mouse position in document - x:{docX} y:{docY}</div>\n      <div>Mouse position in element - x:{elX} y:{elY}</div>\n      <div>Element position- x:{posX} y:{posY}</div>\n      <div>Element dimensions - {elW}x{elH}</div>\n    </div>\n  );\n};
\n
Reference
\n
useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useScroll
\n
React sensor hook that re-renders when the scroll position in a DOM element changes.
\n
Usage
\n
import {useScroll} from 'react-use';\n\nconst Demo = () => {\n  const scrollRef = React.useRef(null);\n  const {x, y} = useScroll(scrollRef);\n\n  return (\n    <div ref={scrollRef}>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n
Reference
\n
useScroll(ref: RefObject<HTMLElement>);
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useThrottle and useThrottleFn
\n
React hooks that throttle.
\n
Usage
\n
import React, { useState } from 'react';\nimport { useThrottle, useThrottleFn } from 'react-use';\n\nconst Demo = ({value}) => {\n  const throttledValue = useThrottle(value);\n  // const throttledValue = useThrottleFn(value => value, 200, [value]);\n\n  return (\n    <>\n      <div>Value: {value}</div>\n      <div>Throttled value: {throttledValue}</div>\n    </>\n  );\n};
\n
Reference
\n
useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);
\n'},,function(module,exports,__webpack_require__){__webpack_require__(307),__webpack_require__(420),module.exports=__webpack_require__(421)},,,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(25),__webpack_require__(22),__webpack_require__(18),__webpack_require__(26),__webpack_require__(27);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(3),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(305);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(601);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(422)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./__stories__/createBreakpoint.story.tsx":602,"./__stories__/createMemo.story.tsx":699,"./__stories__/createReducer.story.tsx":701,"./__stories__/useAsync.story.tsx":705,"./__stories__/useAsyncFn.story.tsx":707,"./__stories__/useAsyncRetry.story.tsx":709,"./__stories__/useAudio.story.tsx":711,"./__stories__/useBattery.story.tsx":713,"./__stories__/useBeforeUnload.story.tsx":715,"./__stories__/useBoolean.story.tsx":717,"./__stories__/useClickAway.story.tsx":718,"./__stories__/useCopyToClipboard.story.tsx":732,"./__stories__/useCounter.story.tsx":734,"./__stories__/useCss.story.tsx":736,"./__stories__/useDebounce.story.tsx":738,"./__stories__/useDeepCompareEffect.story.tsx":740,"./__stories__/useDefault.story.tsx":742,"./__stories__/useDrop.story.tsx":744,"./__stories__/useDropArea.story.tsx":745,"./__stories__/useEffectOnce.story.tsx":746,"./__stories__/useEnsuredForwardedRef.story.tsx":749,"./__stories__/useEvent.story.tsx":751,"./__stories__/useFavicon.story.tsx":753,"./__stories__/useFirstMountState.story.tsx":755,"./__stories__/useFullscreen.story.tsx":757,"./__stories__/useGeolocation.story.tsx":759,"./__stories__/useGetSet.story.tsx":761,"./__stories__/useGetSetState.story.tsx":763,"./__stories__/useHarmonicIntervalFn.story.tsx":765,"./__stories__/useHover.story.tsx":767,"./__stories__/useHoverDirty.story.tsx":768,"./__stories__/useIdle.story.tsx":769,"./__stories__/useIntersection.story.tsx":771,"./__stories__/useInterval.story.tsx":773,"./__stories__/useIsomorphicLayoutEffect.story.tsx":775,"./__stories__/useKey.story.tsx":777,"./__stories__/useKeyPress.story.tsx":779,"./__stories__/useKeyPressEvent.story.tsx":781,"./__stories__/useKeyboardJs.story.tsx":783,"./__stories__/useLifecycles.story.tsx":789,"./__stories__/useList.story.tsx":791,"./__stories__/useLocalStorage.story.tsx":793,"./__stories__/useLocation.story.tsx":795,"./__stories__/useLockBodyScroll.story.tsx":797,"./__stories__/useLogger.story.tsx":804,"./__stories__/useMap.story.tsx":806,"./__stories__/useMeasure.story.tsx":808,"./__stories__/useMedia.story.tsx":810,"./__stories__/useMediaDevices.story.tsx":812,"./__stories__/useMediatedState.story.tsx":814,"./__stories__/useMotion.story.tsx":816,"./__stories__/useMount.story.tsx":818,"./__stories__/useMountedState.story.tsx":820,"./__stories__/useMouse.story.tsx":822,"./__stories__/useMouseHovered.story.tsx":823,"./__stories__/useMultiStateValidator.story.tsx":824,"./__stories__/useNetwork.story.tsx":826,"./__stories__/useObservable.story.tsx":828,"./__stories__/useOrientation.story.tsx":830,"./__stories__/usePageLeave.story.tsx":832,"./__stories__/usePermission.story.tsx":834,"./__stories__/usePrevious.story.tsx":836,"./__stories__/usePreviousDistinct.story.tsx":838,"./__stories__/usePromise.story.tsx":840,"./__stories__/useQueue.story.tsx":842,"./__stories__/useRaf.story.tsx":844,"./__stories__/useRafLoop.story.tsx":846,"./__stories__/useRafState.story.tsx":848,"./__stories__/useRendersCount.story.tsx":850,"./__stories__/useScroll.story.tsx":852,"./__stories__/useScrollbarWidth.story.tsx":853,"./__stories__/useScrolling.story.tsx":854,"./__stories__/useSearchParam.story.tsx":856,"./__stories__/useSessionStorage.story.tsx":858,"./__stories__/useSet.story.tsx":860,"./__stories__/useSetState.story.tsx":862,"./__stories__/useSize.story.tsx":864,"./__stories__/useSpeech.story.tsx":866,"./__stories__/useSpring.story.tsx":868,"./__stories__/useStartTyping.story.tsx":872,"./__stories__/useStateList.story.tsx":874,"./__stories__/useStateValidator.story.tsx":876,"./__stories__/useStateWithHistory.story.tsx":878,"./__stories__/useThrottle.story.tsx":880,"./__stories__/useThrottleFn.story.tsx":881,"./__stories__/useTimeout.story.tsx":882,"./__stories__/useTimeoutFn.story.tsx":884,"./__stories__/useTitle.story.tsx":886,"./__stories__/useToggle.story.tsx":888,"./__stories__/useTween.story.tsx":889,"./__stories__/useUnmount.story.tsx":891,"./__stories__/useUpdate.story.tsx":893,"./__stories__/useUpdateEffect.story.tsx":895,"./__stories__/useUpsert.story.tsx":897,"./__stories__/useVibrate.story.tsx":899,"./__stories__/useVideo.story.tsx":901,"./__stories__/useWindowScroll.story.tsx":903,"./__stories__/useWindowSize.story.tsx":905,"./comps/__stories__/UseKey.story.tsx":907};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=601},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useBreakpointA=__1.createBreakpoint(),useBreakpointB=__1.createBreakpoint({mobileM:350,laptop:1024,tablet:768}),Demo=function(){var breakpointA=useBreakpointA(),breakpointB=useBreakpointB();return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"try resize your window"),react_2.default.createElement("p",null,"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"),react_2.default.createElement("p",null,breakpointA),react_2.default.createElement("p",null,"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"),react_2.default.createElement("p",null,breakpointB))};react_1.storiesOf("sensors|createBreakpoint",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(698)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(fn){return function(){for(var args=[],_i=0;_i=b[1]?1:-1}))}),[breakpoints]);return sortedBreakpoints.reduce((function(acc,_a){var name=_a[0],width=_a[1];return screen>=width?name:acc}),sortedBreakpoints[0][0])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(286)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);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__(1),util_1=__webpack_require__(16);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState((function(){try{var localStorageValue=localStorage.getItem(key);return"string"!=typeof localStorageValue?(localStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?localStorageValue:JSON.parse(localStorageValue||"null")}catch(_a){return initialValue}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){try{var serializedState=raw?String(state):JSON.stringify(state);localStorage.setItem(key,serializedState)}catch(_a){}}),[state]),[state,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(16),patchHistoryMethod=function(method){var original=history[method];history[method]=function(state){var result=original.apply(this,arguments),event=new Event(method.toLowerCase());return event.state=state,window.dispatchEvent(event),result}};util_1.isClient&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function(trigger){return{trigger:trigger,state:history.state,length:history.length,hash:location.hash,host:location.host,hostname:location.hostname,href:location.href,origin:location.origin,pathname:location.pathname,port:location.port,protocol:location.protocol,search:location.search}},hasEventConstructor="function"==typeof Event;exports.default=util_1.isClient&&hasEventConstructor?function(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var onPopstate=function(){return setState(buildState("popstate"))},onPushstate=function(){return setState(buildState("pushstate"))},onReplacestate=function(){return setState(buildState("replacestate"))};return util_1.on(window,"popstate",onPopstate),util_1.on(window,"pushstate",onPushstate),util_1.on(window,"replacestate",onReplacestate),function(){util_1.off(window,"popstate",onPopstate),util_1.off(window,"pushstate",onPushstate),util_1.off(window,"replacestate",onReplacestate)}}),[]),state}:function(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}exports.getClosestBody=getClosestBody;var bodies=new Map,doc="object"==typeof document?document:void 0;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body){var bodyInfo=bodies.get(body);locked?bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),body.style.overflow="hidden"):bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))}}),[locked,elementRef.current])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(128)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function(componentName){for(var rest=[],_i=1;_i=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),useFirstMountState_1=__webpack_require__(93),resolveHookState_1=__webpack_require__(127);exports.useStateWithHistory=function useStateWithHistory(initialState,capacity,initialHistory){if(void 0===capacity&&(capacity=10),capacity<1)throw new Error("Capacity has to be greater than 1, got '"+capacity+"'");var isFirstMount=useFirstMountState_1.useFirstMountState(),_a=react_1.useState(initialState),state=_a[0],innerSetState=_a[1],history=react_1.useRef(null!=initialHistory?initialHistory:[]),historyPosition=react_1.useRef(0);return isFirstMount&&(history.current.length?(history.current[history.current.length-1]!==initialState&&history.current.push(initialState),history.current.length>capacity&&(history.current=history.current.slice(history.current.length-capacity))):history.current.push(initialState),historyPosition.current=history.current.length&&history.current.length-1),[state,react_1.useCallback((function(newState){innerSetState((function(currentState){return(newState=resolveHookState_1.resolveHookState(newState))!==currentState&&(historyPosition.currentcapacity&&(history.current=history.current.slice(history.current.length-capacity))),newState}))}),[state,capacity]),react_1.useMemo((function(){return{history:history.current,position:historyPosition.current,capacity:capacity,back:function(amount){void 0===amount&&(amount=1),historyPosition.current&&innerSetState((function(){return historyPosition.current-=Math.min(amount,historyPosition.current),history.current[historyPosition.current]}))},forward:function(amount){void 0===amount&&(amount=1),historyPosition.current!==history.current.length-1&&innerSetState((function(){return historyPosition.current=Math.min(historyPosition.current+amount,history.current.length-1),history.current[historyPosition.current]}))},go:function(position){position!==historyPosition.current&&innerSetState((function(){return historyPosition.current=position<0?Math.max(history.current.length+position,0):Math.min(history.current.length-1,position),history.current[historyPosition.current]}))}}}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useMountedState_1=tslib_1.__importDefault(__webpack_require__(61)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(54)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var isMounted=useMountedState_1.default(),update=useUpdate_1.default(),index=react_1.useRef(0);useUpdateEffect_1.default((function(){stateSet.length<=index.current&&(index.current=stateSet.length-1,update())}),[stateSet.length]);var actions=react_1.useMemo((function(){return{next:function(){return actions.setStateAt(index.current+1)},prev:function(){return actions.setStateAt(index.current-1)},setStateAt:function(newIndex){isMounted()&&stateSet.length&&newIndex!==index.current&&(index.current=newIndex>=0?newIndex%stateSet.length:stateSet.length+newIndex%stateSet.length,update())},setState:function(state){if(isMounted()){var newIndex=stateSet.length?stateSet.indexOf(state):-1;if(-1===newIndex)throw new Error("State '"+state+"' is not a valid state (does not exist in state list)");index.current=newIndex,update()}}}}),[stateSet]);return tslib_1.__assign({state:stateSet[index.current],currentIndex:index.current},actions)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(129));exports.default=function(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextValue=react_1.useRef(null),hasNextValue=react_1.useRef(0);return react_1.useEffect((function(){if(timeout.current)nextValue.current=value,hasNextValue.current=!0;else{setState(value);var timeoutCallback_1=function(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),[value]),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(129));exports.default=function(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextArgs=react_1.useRef();return react_1.useEffect((function(){if(timeout.current)nextArgs.current=args;else{setState(fn.apply(void 0,args));var timeoutCallback_1=function(){nextArgs.current?(setState(fn.apply(void 0,nextArgs.current)),nextArgs.current=void 0,timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),args),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(179)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(54));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default="undefined"!=typeof document?function useTitle(title){var t=react_1.useRef();t.current!==title&&(document.title=t.current=title)}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),ts_easing_1=__webpack_require__(685),useRaf_1=tslib_1.__importDefault(__webpack_require__(290));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__(1);exports.default=function(){var refUnmounted=react_1.useRef(!1);return react_1.useEffect((function(){return function(){refUnmounted.current=!0}})),react_1.useMemo((function(){return function(promise,onError){return new Promise((function(resolve,reject){promise.then((function(result){refUnmounted.current||resolve(result)}),(function(error){refUnmounted.current?onError?onError(error):console.error("useUnmountPromise",error):reject(error)}))}))}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useList_1=tslib_1.__importDefault(__webpack_require__(287));exports.default=function useUpsert(predicate,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),list=_a[0],listActions=_a[1];return[list,tslib_1.__assign(tslib_1.__assign({},listActions),{upsert:function(newItem){listActions.upsert(predicate,newItem)}})]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),isVibrationApiSupported="object"==typeof navigator&&"vibrate"in navigator;exports.default=isVibrationApiSupported?function useVibrate(enabled,pattern,loop){void 0===enabled&&(enabled=!0),void 0===pattern&&(pattern=[1e3,1e3]),void 0===loop&&(loop=!0),react_1.useEffect((function(){var interval;if(enabled&&(navigator.vibrate(pattern),loop)){var duration=pattern instanceof Array?pattern.reduce((function(a,b){return a+b})):pattern;interval=setInterval((function(){navigator.vibrate(pattern)}),duration)}return function(){enabled&&(navigator.vibrate(0),loop&&clearInterval(interval))}}),[enabled])}:function(){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__webpack_require__(0).__importDefault(__webpack_require__(278)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var scrollbar_width_1=__webpack_require__(691),react_1=__webpack_require__(1);exports.useScrollbarWidth=function useScrollbarWidth(){var _a=react_1.useState(scrollbar_width_1.scrollbarWidth()),sbw=_a[0],setSbw=_a[1];return react_1.useEffect((function(){if(void 0===sbw){var raf=requestAnimationFrame((function(){setSbw(scrollbar_width_1.scrollbarWidth())}));return function(){return cancelAnimationFrame(raf)}}}),[]),sbw}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useMultiStateValidator=function useMultiStateValidator(states,validator,initialValidity){if(void 0===initialValidity&&(initialValidity=[void 0]),"object"!=typeof states)throw new Error("states expected to be an object or array, got "+typeof states);var validatorInner=react_1.useRef(validator),statesInner=react_1.useRef(states);validatorInner.current=validator,statesInner.current=states;var _a=react_1.useState(initialValidity),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(statesInner.current,setValidity):setValidity(validatorInner.current(statesInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),Object.values(states)),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),util_1=__webpack_require__(16),useRafState_1=tslib_1.__importDefault(__webpack_require__(94));exports.default=function(){var _a=useRafState_1.default({x:util_1.isClient?window.pageXOffset:0,y:util_1.isClient?window.pageYOffset:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handler=function(){setState({x:window.pageXOffset,y:window.pageYOffset})};return window.addEventListener("scroll",handler,{capture:!1,passive:!0}),function(){window.removeEventListener("scroll",handler)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useRafState_1=tslib_1.__importDefault(__webpack_require__(94)),util_1=__webpack_require__(16);exports.default=function(initialWidth,initialHeight){void 0===initialWidth&&(initialWidth=1/0),void 0===initialHeight&&(initialHeight=1/0);var _a=useRafState_1.default({width:util_1.isClient?window.innerWidth:initialWidth,height:util_1.isClient?window.innerHeight:initialHeight}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){if(util_1.isClient){var handler_1=function(){setState({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",handler_1),function(){window.removeEventListener("resize",handler_1)}}}),[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),resize_observer_polyfill_1=tslib_1.__importDefault(__webpack_require__(696));exports.default=function(){var _a=react_1.useState({x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0}),rect=_a[0],set=_a[1],observer=react_1.useState((function(){return new resize_observer_polyfill_1.default((function(entries){var entry=entries[0];entry&&set(entry.contentRect)}))}))[0];return[react_1.useCallback((function(node){observer.disconnect(),node&&observer.observe(node)}),[observer]),rect]}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1);exports.default=function(initialSet){void 0===initialSet&&(initialSet=new Set);var _a=react_1.useState(initialSet),set=_a[0],setSet=_a[1],utils=react_1.useMemo((function(){return{has:function(item){return set.has(item)},add:function(item){return setSet((function(prevSet){return new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},remove:function(item){return setSet((function(prevSet){return new Set(Array.from(prevSet).filter((function(i){return i!==item})))}))},reset:function(){return setSet(initialSet)}}}),[setSet]);return[set,utils]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createBreakpoint
\n
Usage
\n
use default breakpoint
\n
laptopL: 1440, laptop: 1024, tablet: 768
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n
use custom breakpoint
\n
XL: 1280, L: 768, S: 350
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(700)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createMemo
\n
Hook factory, receives a function to be memoized, returns a memoized React hook,\nwhich receives the same arguments and returns the same result as the original function.
\n
Usage
\n
import {createMemo} from 'react-use';\n\nconst fibonacci = n => {\n  if (n === 0) return 0;\n  if (n === 1) return 1;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n};\n\nconst useMemoFibonacci = createMemo(fibonacci);\n\nconst Demo = () => {\n  const result = useMemoFibonacci(10);\n\n  return (\n    <div>\n      fib(10) = {result}\n    </div>\n  );\n};
\n
Reference
\n
const useMemoFn = createMemo(fn);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),redux_logger_1=tslib_1.__importDefault(__webpack_require__(702)),redux_thunk_1=tslib_1.__importDefault(__webpack_require__(703)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useThunkReducer=__1.createReducer(redux_thunk_1.default,redux_logger_1.default);function init(initialCount){return{count:initialCount}}function reducer(state,action){switch(action.type){case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};case"reset":return init(action.payload);default:throw new Error}}var Demo=function(_a){var _b=_a.initialCount,initialCount=void 0===_b?1:_b,addAndReset=React.useCallback((function(){return function(dispatch2){dispatch2({type:"increment"}),setTimeout((function(){dispatch2({type:"reset",payload:initialCount})}),1e3)}}),[initialCount]),_c=useThunkReducer(reducer,initialCount,init),state=_c[0],dispatch=_c[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:function(){return dispatch(addAndReset())}},"Add and reset"),React.createElement("button",{onClick:function(){return dispatch({type:"reset",payload:initialCount})}},"Reset"),React.createElement("button",{onClick:function(){return dispatch({type:"increment"})}},"+"),React.createElement("button",{onClick:function(){return dispatch({type:"decrement"})}},"-"),React.createElement("p",null,"Open your developer console to see actions logged by middleware"))};react_1.storiesOf("State|createReducer",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(704)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createReducer
\n
Factory for reducer hooks with custom middleware with an identical API as React's useReducer. Compatible with Redux middlware.
\n
Usage
\n
An example with redux-thunk and redux-logger.
\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n
Reference
\n
const useMiddlewareReducer = createReducer(...middlewares);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsync((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(706)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsync
\n
React hook that resolves an async function or a function that returns\na promise;
\n
Usage
\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n
Reference
\n
useAsync(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return callback()}},"Start"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(708)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncFn
\n
React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.
\n
Usage
\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n
Reference
\n
useAsyncFn(fn, deps?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return state.retry()}},"Retry"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncRetry",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(710)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncRetry
\n
Uses useAsync with an additional retry method to easily retry/refresh the async function;
\n
Usage
\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n
Reference
\n
useAsyncRetry(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(712)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAudio
\n
Creates <audio> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n
audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{audio}</div>
\n
state tracks the state of the audio and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <audio> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=__1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(714)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBattery
\n
React sensor hook that tracks battery status.
\n
\n
Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.
\n
\n
Usage
\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n
Reference
\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return __1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),React.createElement("div",null,dirty&&React.createElement("p",null,"Try to reload or close tab"),React.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(716)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBeforeUnload
\n
React side-effect hook that shows browser alert when user try to reload or close the page.
\n
Usage
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(293)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_actions_1=__webpack_require__(130),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return __1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(731)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useClickAway
\n
React UI hook that triggers a callback when user\nclicks outside the target element.
\n
Usage
\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n
Reference
\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=__1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function(){return copyToClipboard(text)}},"copy text"),state.error?React.createElement("p",null,"Unable to copy value: ",state.error.message):state.value&&React.createElement(React.Fragment,null,React.createElement("p",null,"Copied ",state.value," ",state.noUserInteraction?"without":"with"," user interaction"),React.createElement("input",{type:"text",placeholder:"Paste it in here to check"})))};react_1.storiesOf("Side-effects|useCopyToClipboard",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(733)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCopyToClipboard
\n
Copy text to a user's clipboard.
\n
Usage
\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n
Reference
\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — catched error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(5),initialValue=_a[0],setInitialValue=_a[1],_b=__1.useCounter(1),min=_b[0],_c=_b[1],incMin=_c.inc,decMin=_c.dec,_d=__1.useCounter(10),max=_d[0],_e=_d[1],incMax=_e.inc,decMax=_e.dec,_f=__1.useCounter(initialValue,max,min),value=_f[0],_g=_f[1],inc=_g.inc,dec=_g.dec,set=_g.set,reset=_g.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){return inc()}},"Increment"),React.createElement("button",{onClick:function(){return dec()}},"Decrement"),React.createElement("button",{onClick:function(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function(){return reset()}},"Reset"),React.createElement("button",{onClick:function(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function(){return incMin()}},"Increment"),React.createElement("button",{onClick:function(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function(){return incMax()}},"Increment"),React.createElement("button",{onClick:function(){return decMax()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Initial value: ",initialValue,React.createElement("button",{onClick:function(){return setInitialValue((function(v){return++v}))}},"Increment"),React.createElement("button",{onClick:function(){return setInitialValue((function(v){return--v}))}},"Decrement"))};react_1.storiesOf("State|useCounter",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(735)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCounter
\n
React state hook that tracks a numeric value.
\n
useNumber is an alias for useCounter.
\n
Usage
\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\n  const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n  const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n  return (\n    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n
Reference
\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, 20: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(737)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCss
\n
React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.
\n
Usage
\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n
Examples
\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1],cancel=__1.useDebounce((function(){setState("Typing stopped"),setDebouncedValue(val)}),2e3,[val])[1];return React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue,React.createElement("button",{onClick:cancel},"Cancel debounce")))};react_1.storiesOf("Side effects|useDebounce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(739)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDebounce
\n
React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
\n
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.
\n
Usage
\n
const Demo = () => {\n  const [state, setState] = React.useState('Typing stopped');\n  const [val, setVal] = React.useState('');\n  const [debouncedValue, setDebouncedValue] = React.useState('');\n\n  const [, cancel] = useDebounce(\n    () => {\n      setState('Typing stopped');\n      setDebouncedValue(val);\n    },\n    2000,\n    [val]\n  );\n\n  return (\n    <div>\n      <input\n        type="text"\n        value={val}\n        placeholder="Debounced input"\n        onChange={({ currentTarget }) => {\n          setState('Waiting for typing to stop...');\n          setVal(currentTarget.value);\n        }}\n      />\n      <div>{state}</div>\n      <div>\n        Debounced value: {debouncedValue}\n        <button onClick={cancel}>Cancel debounce</button>\n      </div>\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • deps: DependencyList - array of values that the debounce depends on, in the same manner as useEffect;
    • \n
  • isReady: ()=>boolean|null - function returning current debounce state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the debounce
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=__1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal=history.history.length-1},"Forward >"),"  Step size: ",React.createElement("input",{type:"number",value:stepSize,min:1,max:3,onChange:handleStepSizeChange})),React.createElement("div",{style:{marginTop:8}},React.createElement("div",null,"Current history"),React.createElement("div",{dangerouslySetInnerHTML:{__html:JSON.stringify(history.history,null,2).replace(/\n/g,"
").replace(/ /g," ")}})))};react_1.storiesOf("State|useStateWithHistory",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(879)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useStateHistory
\n
Stores defined amount of previous state values and provides handles to travel through them.
\n
Usage
\n
Reference
\n
const [state, setState, stateHistory] = useStateWithHistory<S = undefined>(\n  initialState?: S | (()=>S),\n  historyCapacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • historyCapacity - amount of history entries that hold by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equals [ initialState ].  \nInitial state will not be pushed to initial history.
    If entries amount is greater than historyCapacity parameter it wont be modified on init but will be trimmed on next setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. I will have the same ref all the time so pe careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState invoke and component re-render.
      If first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState invoke and component re-render.
      If last element of history reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects|useThrottle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(304)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottleFn((function(defaultValue){return defaultValue}),2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects|useThrottleFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(304)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4));function TestComponent(props){void 0===props&&(props={});var ms=props.ms||5e3,_a=__1.useTimeout(ms),isReady=_a[0],cancel=_a[1];return React.createElement("div",null,isReady()?"I'm reloaded after timeout":"I will be reloaded after "+ms/1e3+"s",!1===isReady()?React.createElement("button",{onClick:cancel},"Cancel"):"")}var Demo=function(){return React.createElement("div",null,React.createElement(TestComponent,null),React.createElement(TestComponent,{ms:1e4}))};react_1.storiesOf("Animation|useTimeout",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(883)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTimeout
\n
Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.
\n
Usage
\n
import { useTimeout } from 'react-use';\n\nfunction TestComponent(props: { ms?: number } = {}) {\n  const ms = props.ms || 5000;\n  const [isReady, cancel] = useTimeout(ms);\n\n  return (\n    <div>\n      { isReady() ? 'I\\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }\n      { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }\n    </div>\n  );\n}\n\nconst Demo = () => {\n  return (\n    <div>\n      <TestComponent />\n      <TestComponent ms={ 10000 } />\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeout(ms: number = 0);
\n
    \n
  • isReady:()=>boolean|null - function returning current timeout state:
      \n
    • false - pending re-render
      • \n
    • true - re-render performed
      • \n
    • null - re-render cancelled
      • \n
    \n
    • \n
  • cancel:()=>void - cancel the timeout (component will not be re-rendered)
    • \n
  • reset:()=>void - reset the timeout
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),index_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Not called yet"),state=_a[0],setState=_a[1];var _b=index_1.useTimeoutFn((function fn(){setState("called at "+Date.now())}),5e3),isReady=_b[0],cancel=_b[1],reset=_b[2],cancelButtonClick=react_2.useCallback((function(){!1===isReady()?(cancel(),setState("cancelled")):(reset(),setState("Not called yet"))}),[]),readyState=isReady();return React.createElement("div",null,React.createElement("div",null,null!==readyState?"Function will be called in 5 seconds":"Timer cancelled"),React.createElement("button",{onClick:cancelButtonClick}," ",!1===readyState?"cancel":"restart"," timeout"),React.createElement("br",null),React.createElement("div",null,"Function state: ",!1===readyState?"Pending":readyState?"Called":"Cancelled"),React.createElement("div",null,state))};react_1.storiesOf("Animation|useTimeoutFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(885)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTimeoutFn
\n
Calls given function after specified amount of milliseconds.
\n
Several thing about it's work:
\n
    \n
  • does not re-render component;
    • \n
  • automatically cancel timeout on cancel;
    • \n
  • automatically reset timeout on delay change;
    • \n
  • reset function call will cancel previous timeout;
    • \n
  • timeout will NOT be reset on function change. It will be called within the timeout, you have to reset it on your own when needed. 
    • \n
\n
Usage
\n
import * as React from 'react';\nimport { useTimeoutFn } from 'react-use';\n\nconst Demo = () => {\n  const [state, setState] = React.useState('Not called yet');\n\n  function fn() {\n    setState(`called at ${Date.now()}`);\n  }\n\n  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n  const cancelButtonClick = useCallback(() => {\n    if (isReady() === false) {\n      cancel();\n      setState(`cancelled`);\n    } else {\n      reset();\n      setState('Not called yet');\n    }\n  }, []);\n\n  const readyState = isReady();\n\n  return (\n    <div>\n      <div>{readyState !== null ? 'Function will be called in 5 seconds' : 'Timer cancelled'}</div>\n      <button onClick={cancelButtonClick}> {readyState === false ? 'cancel' : 'restart'} timeout</button>\n      <br />\n      <div>Function state: {readyState === false ? 'Pending' : readyState ? 'Called' : 'Cancelled'}</div>\n      <div>{state}</div>\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeoutFn(fn: Function, ms: number = 0);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • isReady: ()=>boolean|null - function returning current timeout state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the timeout
    • \n
  • reset: ()=>void - reset the timeout
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(297)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return __1.useTitle("Hello world!"),React.createElement(NewTabStory_1.default,null,'Title should be "Hello world!"')};react_1.storiesOf("Side effects|useTitle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(887)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTitle
\n
React side-effect hook that sets title of the page.
\n
Usage
\n
import {useTitle} from 'react-use';\n\nconst Demo = () => {\n  useTitle('Hello world!');\n\n  return null;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:toggle},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useToggle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(293)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var t=__1.useTween();return React.createElement("div",null,"Tween: ",t)};react_1.storiesOf("Animation|useTween",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(890)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTween
\n
React animation hook that tweens a number between 0 and 1.
\n
Usage
\n
import {useTween} from 'react-use';\n\nconst Demo = () => {\n  const t = useTween();\n\n  return (\n    <div>\n      Tween: {t}\n    </div>\n  );\n};
\n
Reference
\n
useTween(easing?: string, ms?: number, delay?: number): number
\n
Returns a number that begins with 0 and ends with 1 when animation ends.
\n
    \n
  • easing — one of the valid easing names, defaults to inCirc.
    • \n
  • ms — milliseconds for how long to keep re-rendering component, defaults to 200.
    • \n
  • delay — delay in milliseconds after which to start re-rendering component, defaults to 0.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return __1.useUnmount((function(){return alert("UNMOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useUnmount()")," hook can be used to perform side-effects when component unmounts. This component will alert you when it is un-mounted.")};react_1.storiesOf("Lifecycle|useUnmount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(892)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUnmount
\n
React lifecycle hook that calls a function when the component will unmount. Use useEffectOnce if you need both a mount and unmount function.
\n
Usage
\n
import {useUnmount} from 'react-use';\n\nconst Demo = () => {\n  useUnmount(() => alert('UNMOUNTED'));\n  return null;\n};
\n
Reference
\n
useUnmount(fn: () => void | undefined);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var update=__1.useUpdate();return React.createElement(React.Fragment,null,React.createElement("div",null,"Time: ",Date.now()),React.createElement("button",{onClick:update},"Update"))};react_1.storiesOf("Animation|useUpdate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(894)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpdate
\n
React utility hook that returns a function that forces component\nto re-render when called.
\n
Usage
\n
import {useUpdate} from 'react-use';\n\nconst Demo = () => {\n  const update = useUpdate();\n  return (\n    <>\n      <div>Time: {Date.now()}</div>\n      <button onClick={update}>Update</button>\n    </>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(!1),didUpdate=_b[0],setDidUpdate=_b[1];return __1.useUpdateEffect((function(){setDidUpdate(!0)}),[count]),React.createElement("div",null,React.createElement("button",{onClick:function(){return setCount((function(currentCount){return currentCount+1}))}},"Count: ",count),React.createElement("p",null,"Updated: ",didUpdate))};react_1.storiesOf("Lifecycle|useUpdateEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(896)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpdateEffect
\n
React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the useEffect hook.
\n
Usage
\n
import React from 'react'\nimport {useUpdateEffect} from 'react-use';\n\nconst Demo = () => {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setCount(count => count + 1)\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    console.log('count', count) // will only show 1 and beyond\n\n    return () => { // *OPTIONAL*\n      // do something on unmount\n    }\n  }) // you can include deps array if necessary\n\n  return <div>Count: {count}</div>\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),index_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function(){var _a=index_1.useUpsert((function(a,b){return a.id===b.id}),initialItems),list=_a[0],_b=_a[1],set=_b.set,upsert=_b.upsert,remove=_b.remove;return React.createElement("div",{style:{display:"inline-flex",flexDirection:"column"}},list.map((function(item,index){return React.createElement("div",{key:item.id},React.createElement("input",{value:item.text,onChange:function(e){return upsert(tslib_1.__assign(tslib_1.__assign({},item),{text:e.target.value}))}}),React.createElement("button",{onClick:function(){return remove(index)}},"Remove"))})),React.createElement("button",{onClick:function(){return upsert({id:(list.length+1).toString(),text:""})}},"Add item"),React.createElement("button",{onClick:function(){return set([])}},"Reset"))};react_1.storiesOf("State|useUpsert",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(898)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpsert
\n
\n
DEPRECATED!  \nUse useList hook's upsert action instead
\n
\n
Superset of useList. Provides an additional method to upsert (update or insert) an element into the list.
\n
Usage
\n
import {useUpsert} from 'react-use';\n\nconst Demo = () => {\n  const comparisonFunction = (a: DemoType, b: DemoType) => {\n    return a.id === b.id;\n  };\n  const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n  return (\n    <div style={{ display: 'inline-flex', flexDirection: 'column' }}>\n      {list.map((item: DemoType, index: number) => (\n        <div key={item.id}>\n          <input value={item.text} onChange={e => upsert({ ...item, text: e.target.value })} />\n          <button onClick={() => remove(index)}>Remove</button>\n        </div>\n      ))}\n      <button onClick={() => upsert({ id: (list.length + 1).toString(), text: '' })}>Add item</button>\n      <button onClick={() => set([])}>Reset</button>\n    </div>\n  );\n};
\n\n\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),vibrating=_a[0],toggleVibrating=_a[1];return __1.useVibrate(vibrating,[300,100,200,100,1e3,300]),React.createElement("div",null,React.createElement("button",{onClick:toggleVibrating},vibrating?"Stop":"Vibrate"))};react_1.storiesOf("UI|useVibrate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(900)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useVibrate
\n
React UI hook to provide physical feedback with device vibration hardware using the Vibration API.
\n
Usage
\n
import {useVibrate} from 'react-use';\n\nconst Demo = () => {\n  const [vibrating, toggleVibrating] = useToggle(false);\n\n  useVibrate(vibrating, [300, 100, 200, 100, 1000, 300], false);\n\n  return (\n    <div>\n      <button onClick={toggleVibrating}>{vibrating ? 'Stop' : 'Vibrate'}</button>\n    </div>\n  );\n};
\n
Reference
\n
useVibrate(\n  enabled: boolean = true,\n  pattern: number | number[] = [1000, 1000],\n  loop: boolean = true\n): void;
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(902)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useVideo
\n
Creates <video> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useVideo} from 'react-use';\n\nconst Demo = () => {\n  const [video, state, controls, ref] = useVideo(\n    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n  );\n\n  return (\n    <div>\n      {video}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(<video {...props}/>);
\n
video is React's <video> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{video}</div>
\n
state tracks the state of the video and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <video> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <video> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(904)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useWindowScroll
\n
React sensor hook that re-renders on window scroll.
\n
Usage
\n
import {useWindowScroll} from 'react-use';\n\nconst Demo = () => {\n  const {x, y} = useWindowScroll();\n\n  return (\n    <div>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(906)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useWindowSize
\n
React sensor hook that tracks dimensions of the browser window.
\n
Usage
\n
import {useWindowSize} from 'react-use';\n\nconst Demo = () => {\n  const {width, height} = useWindowSize();\n\n  return (\n    <div>\n      <div>width: {width}</div>\n      <div>height: {height}</div>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),UseKey_1=tslib_1.__importDefault(__webpack_require__(908));react_1.storiesOf("Components|",module).add("Demo",(function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function(){return alert("Q pressed!")}}))}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKey_1=tslib_1.__importDefault(__webpack_require__(180)),UseKey=tslib_1.__importDefault(__webpack_require__(909)).default(useKey_1.default,(function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,tslib_1.__rest(_a,["filter","fn","deps"]),deps]}));exports.default=UseKey},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function(props){return[props]};exports.default=function(hook,mapPropsToArgs){void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs);return function(props){var state=hook.apply(void 0,mapPropsToArgs(props)),children=props.children,_a=props.render,render=void 0===_a?children:_a;return render&&render(state)||null}}}],[[306,1,2]]]);
-//# sourceMappingURL=main.a2e70de30ebd93e2310b.bundle.js.map
\ No newline at end of file
diff --git a/main.a2e70de30ebd93e2310b.bundle.js.map b/main.a2e70de30ebd93e2310b.bundle.js.map
deleted file mode 100644
index a6b71999..00000000
--- a/main.a2e70de30ebd93e2310b.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.a2e70de30ebd93e2310b.bundle.js","sources":["webpack:///main.a2e70de30ebd93e2310b.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/main.f90781e5a319fd036327.bundle.js b/main.f90781e5a319fd036327.bundle.js
new file mode 100644
index 00000000..8588e55c
--- /dev/null
+++ b/main.f90781e5a319fd036327.bundle.js
@@ -0,0 +1,2 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(0).__importStar(__webpack_require__(1)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(612);exports.createMemo=createMemo_1.default;var createReducer_1=__webpack_require__(613);exports.createReducer=createReducer_1.default;var useAsync_1=__webpack_require__(277);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(178);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(614);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(615);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(617);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(618);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(619);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(620);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(621);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(281);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(624);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(630);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(631);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(632);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(633);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(634);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(128);exports.useEffectOnce=useEffectOnce_1.default;var useEnsuredForwardedRef_1=__webpack_require__(635);exports.useEnsuredForwardedRef=useEnsuredForwardedRef_1.default,exports.ensuredForwardRef=useEnsuredForwardedRef_1.ensuredForwardRef;var useEvent_1=__webpack_require__(283);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(636);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(637);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(639);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(282);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(640);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(641);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(643);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(284);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(644);exports.useIdle=useIdle_1.default;var useIntersection_1=__webpack_require__(646);exports.useIntersection=useIntersection_1.default;var useInterval_1=__webpack_require__(647);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(285);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(180);exports.useKey=useKey_1.default;var createBreakpoint_1=__webpack_require__(648);exports.createBreakpoint=createBreakpoint_1.default;var useKeyPress_1=__webpack_require__(286);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(649);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(650);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(287);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(651);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(652);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(653);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(654);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(655);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(656);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(657);exports.useMediaDevices=useMediaDevices_1.default;var useMediatedState_1=__webpack_require__(288);exports.useMediatedState=useMediatedState_1.useMediatedState;var useMotion_1=__webpack_require__(658);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(181);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(61);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(289);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(659);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(660);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(661);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(662);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(663);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(664);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(665);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(666);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(667);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(668);exports.usePromise=usePromise_1.default;var useQueue_1=__webpack_require__(669);exports.useQueue=useQueue_1.default;var useRaf_1=__webpack_require__(290);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(670);exports.useRafLoop=useRafLoop_1.default;var useRafState_1=__webpack_require__(94);exports.useRafState=useRafState_1.default;var useSearchParam_1=__webpack_require__(671);exports.useSearchParam=useSearchParam_1.default;var useScroll_1=__webpack_require__(672);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(673);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(674);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(126);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(675);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(676);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(677);exports.useStartTyping=useStartTyping_1.default;var useStateWithHistory_1=__webpack_require__(678);exports.useStateWithHistory=useStateWithHistory_1.useStateWithHistory;var useStateList_1=__webpack_require__(679);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(680);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(681);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(682);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(179);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(683);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(280);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(684);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(129);exports.useUnmount=useUnmount_1.default;var useUnmountPromise_1=__webpack_require__(686);exports.useUnmountPromise=useUnmountPromise_1.default;var useUpdate_1=__webpack_require__(54);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(92);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(687);exports.useUpsert=useUpsert_1.default;var useVibrate_1=__webpack_require__(688);exports.useVibrate=useVibrate_1.default;var useVideo_1=__webpack_require__(689);exports.useVideo=useVideo_1.default;var useStateValidator_1=__webpack_require__(291);exports.useStateValidator=useStateValidator_1.default;var useScrollbarWidth_1=__webpack_require__(690);exports.useScrollbarWidth=useScrollbarWidth_1.useScrollbarWidth;var useMultiStateValidator_1=__webpack_require__(692);exports.useMultiStateValidator=useMultiStateValidator_1.useMultiStateValidator;var useWindowScroll_1=__webpack_require__(693);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(694);exports.useWindowSize=useWindowSize_1.default;var useMeasure_1=__webpack_require__(695);exports.useMeasure=useMeasure_1.default;var useRendersCount_1=__webpack_require__(292);exports.useRendersCount=useRendersCount_1.useRendersCount;var useFirstMountState_1=__webpack_require__(93);exports.useFirstMountState=useFirstMountState_1.useFirstMountState;var useSet_1=__webpack_require__(697);exports.useSet=useSet_1.default},,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isClient="object"==typeof window,exports.on=function(obj){for(var args=[],_i=1;_iarr.length?arr[index]=item:arr.splice(index,0,item),arr}))},update:function(predicate,newItem){actions.set((function(curr){return curr.map((function(item){return predicate(item,newItem)?newItem:item}))}))},updateFirst:function(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0&&actions.updateAt(index,newItem)},upsert:function(predicate,newItem){var index=list.current.findIndex((function(item){return predicate(item,newItem)}));index>=0?actions.updateAt(index,newItem):actions.push(newItem)},sort:function(compareFn){actions.set((function(curr){return curr.slice().sort(compareFn)}))},filter:function(callbackFn,thisArg){actions.set((function(curr){return curr.slice().filter(callbackFn,thisArg)}))},removeAt:function(index){actions.set((function(curr){var arr=curr.slice();return arr.splice(index,1),arr}))},clear:function(){actions.set([])},reset:function(){actions.set(resolveHookState_1.resolveHookState(initialList).slice())}};return a.remove=a.removeAt,a}),[]);return[list.current,actions]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useMediatedState=function useMediatedState(mediator,initialState){var mediatorFn=react_1.useRef(mediator),_a=react_1.useState(initialState),state=_a[0],setMediatedState=_a[1];return[state,react_1.useCallback((function(newState){2===mediatorFn.current.length?mediatorFn.current(newState,setMediatedState):setMediatedState(mediatorFn.current(newState))}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useRafState_1=tslib_1.__importDefault(__webpack_require__(94));exports.default=function(ref){var _a=useRafState_1.default({docX:0,docY:0,posX:0,posY:0,elX:0,elY:0,elH:0,elW:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var moveHandler=function(event){if(ref&&ref.current){var _a=ref.current.getBoundingClientRect(),left=_a.left,top=_a.top,elW=_a.width,elH=_a.height,posX=left+window.pageXOffset,posY=top+window.pageYOffset,elX=event.pageX-posX,elY=event.pageY-posY;setState({docX:event.pageX,docY:event.pageY,posX:posX,posY:posY,elX:elX,elY:elY,elH:elH,elW:elW})}};return document.addEventListener("mousemove",moveHandler),function(){document.removeEventListener("mousemove",moveHandler)}}),[ref]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(ms,delay){void 0===ms&&(ms=1e12),void 0===delay&&(delay=0);var _a=react_1.useState(0),elapsed=_a[0],set=_a[1];return react_1.useLayoutEffect((function(){var raf,timerStop,start,onFrame=function(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout((function(){timerStop=setTimeout((function(){cancelAnimationFrame(raf),set(1)}),ms),start=Date.now(),loop()}),delay);return function(){clearTimeout(timerStop),clearTimeout(timerDelay),cancelAnimationFrame(raf)}}),[ms,delay]),elapsed}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function useStateValidator(state,validator,initialState){void 0===initialState&&(initialState=[void 0]);var validatorInner=react_1.useRef(validator),stateInner=react_1.useRef(state);validatorInner.current=validator,stateInner.current=state;var _a=react_1.useState(initialState),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(stateInner.current,setValidity):setValidity(validatorInner.current(stateInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),[state]),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useRendersCount=function useRendersCount(){return++react_1.useRef(0).current}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useToggle
\n
React state hook that tracks value of a boolean.
\n
useBoolean is an alias for useToggle.
\n
Usage
\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDrop and useDropArea
\n
Triggers on file, link drop and copy-paste.
\n
useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.
\n
Usage
\n
useDrop:
\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n
useDropArea:
\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(0).__importStar(__webpack_require__(1));exports.default=function(_a){var children=_a.children;return window.location===window.parent.location?children:React.createElement("p",null,"This story should be"," ",React.createElement("a",{href:window.location.href,target:"_blank",title:"Open in new tab"},"opened in a new tab"),".")}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useHover and useHoverDirty
\n
React UI sensor hooks that track if some element is being hovered\nby a mouse.
\n
    \n
  • useHover accepts a React element or a function that returns one,\nuseHoverDirty accepts React ref.
    • \n
  • useHover sets react onMouseEnter and onMouseLeave events,\nuseHoverDirty sets DOM onmouseover and onmouseout events.
    • \n
\n
Usage
\n
import {useHover} from 'react-use';\n\nconst Demo = () => {\n  const element = (hovered) =>\n    <div>\n      Hover me! {hovered && 'Thanks!'}\n    </div>;\n  const [hoverable, hovered] = useHover(element);\n\n  return (\n    <div>\n      {hoverable}\n      <div>{hovered ? 'HOVERED' : ''}</div>\n    </div>\n  );\n};
\n
Reference
\n
const [newReactElement, isHovering] = useHover(reactElement);\nconst [newReactElement, isHovering] = useHover((isHovering) => reactElement);\nconst isHovering = useHoverDirty(ref);
\n'},,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useMouse and useMouseHovered
\n
React sensor hooks that re-render on mouse position changes. useMouse simply tracks\nmouse position; useMouseHovered allows you to specify extra options:
\n
    \n
  • bound — to bind mouse coordinates within the element
    • \n
  • whenHovered — whether to attach mousemove event handler only when user hovers over the element
    • \n
\n
Usage
\n
import {useMouse} from 'react-use';\n\nconst Demo = () => {\n  const ref = React.useRef(null);\n  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);\n\n  return (\n    <div ref={ref}>\n      <div>Mouse position in document - x:{docX} y:{docY}</div>\n      <div>Mouse position in element - x:{elX} y:{elY}</div>\n      <div>Element position- x:{posX} y:{posY}</div>\n      <div>Element dimensions - {elW}x{elH}</div>\n    </div>\n  );\n};
\n
Reference
\n
useMouse(ref);\nuseMouseHovered(ref, {bound: false, whenHovered: false});
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useScroll
\n
React sensor hook that re-renders when the scroll position in a DOM element changes.
\n
Usage
\n
import {useScroll} from 'react-use';\n\nconst Demo = () => {\n  const scrollRef = React.useRef(null);\n  const {x, y} = useScroll(scrollRef);\n\n  return (\n    <div ref={scrollRef}>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n
Reference
\n
useScroll(ref: RefObject<HTMLElement>);
\n'},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useThrottle and useThrottleFn
\n
React hooks that throttle.
\n
Usage
\n
import React, { useState } from 'react';\nimport { useThrottle, useThrottleFn } from 'react-use';\n\nconst Demo = ({value}) => {\n  const throttledValue = useThrottle(value);\n  // const throttledValue = useThrottleFn(value => value, 200, [value]);\n\n  return (\n    <>\n      <div>Value: {value}</div>\n      <div>Throttled value: {throttledValue}</div>\n    </>\n  );\n};
\n
Reference
\n
useThrottle(value, ms?: number);\nuseThrottleFn(fn, ms, args);
\n'},,function(module,exports,__webpack_require__){__webpack_require__(307),__webpack_require__(420),module.exports=__webpack_require__(421)},,,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(25),__webpack_require__(22),__webpack_require__(18),__webpack_require__(26),__webpack_require__(27);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(3),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(305);Object(_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__.setOptions)({sortStoriesByKind:!1,showStoriesPanel:!0,showAddonPanel:!0,showSearchBox:!1,addonPanelInRight:!0,hierarchySeparator:/\//,hierarchyRootSeparator:/\|/,sidebarAnimations:!1});var req=__webpack_require__(601);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(422)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./__stories__/createBreakpoint.story.tsx":602,"./__stories__/createMemo.story.tsx":699,"./__stories__/createReducer.story.tsx":701,"./__stories__/useAsync.story.tsx":705,"./__stories__/useAsyncFn.story.tsx":707,"./__stories__/useAsyncRetry.story.tsx":709,"./__stories__/useAudio.story.tsx":711,"./__stories__/useBattery.story.tsx":713,"./__stories__/useBeforeUnload.story.tsx":715,"./__stories__/useBoolean.story.tsx":717,"./__stories__/useClickAway.story.tsx":718,"./__stories__/useCopyToClipboard.story.tsx":732,"./__stories__/useCounter.story.tsx":734,"./__stories__/useCss.story.tsx":736,"./__stories__/useDebounce.story.tsx":738,"./__stories__/useDeepCompareEffect.story.tsx":740,"./__stories__/useDefault.story.tsx":742,"./__stories__/useDrop.story.tsx":744,"./__stories__/useDropArea.story.tsx":745,"./__stories__/useEffectOnce.story.tsx":746,"./__stories__/useEnsuredForwardedRef.story.tsx":749,"./__stories__/useEvent.story.tsx":751,"./__stories__/useFavicon.story.tsx":753,"./__stories__/useFirstMountState.story.tsx":755,"./__stories__/useFullscreen.story.tsx":757,"./__stories__/useGeolocation.story.tsx":759,"./__stories__/useGetSet.story.tsx":761,"./__stories__/useGetSetState.story.tsx":763,"./__stories__/useHarmonicIntervalFn.story.tsx":765,"./__stories__/useHover.story.tsx":767,"./__stories__/useHoverDirty.story.tsx":768,"./__stories__/useIdle.story.tsx":769,"./__stories__/useIntersection.story.tsx":771,"./__stories__/useInterval.story.tsx":773,"./__stories__/useIsomorphicLayoutEffect.story.tsx":775,"./__stories__/useKey.story.tsx":777,"./__stories__/useKeyPress.story.tsx":779,"./__stories__/useKeyPressEvent.story.tsx":781,"./__stories__/useKeyboardJs.story.tsx":783,"./__stories__/useLifecycles.story.tsx":789,"./__stories__/useList.story.tsx":791,"./__stories__/useLocalStorage.story.tsx":793,"./__stories__/useLocation.story.tsx":795,"./__stories__/useLockBodyScroll.story.tsx":797,"./__stories__/useLogger.story.tsx":804,"./__stories__/useMap.story.tsx":806,"./__stories__/useMeasure.story.tsx":808,"./__stories__/useMedia.story.tsx":810,"./__stories__/useMediaDevices.story.tsx":812,"./__stories__/useMediatedState.story.tsx":814,"./__stories__/useMotion.story.tsx":816,"./__stories__/useMount.story.tsx":818,"./__stories__/useMountedState.story.tsx":820,"./__stories__/useMouse.story.tsx":822,"./__stories__/useMouseHovered.story.tsx":823,"./__stories__/useMultiStateValidator.story.tsx":824,"./__stories__/useNetwork.story.tsx":826,"./__stories__/useObservable.story.tsx":828,"./__stories__/useOrientation.story.tsx":830,"./__stories__/usePageLeave.story.tsx":832,"./__stories__/usePermission.story.tsx":834,"./__stories__/usePrevious.story.tsx":836,"./__stories__/usePreviousDistinct.story.tsx":838,"./__stories__/usePromise.story.tsx":840,"./__stories__/useQueue.story.tsx":842,"./__stories__/useRaf.story.tsx":844,"./__stories__/useRafLoop.story.tsx":846,"./__stories__/useRafState.story.tsx":848,"./__stories__/useRendersCount.story.tsx":850,"./__stories__/useScroll.story.tsx":852,"./__stories__/useScrollbarWidth.story.tsx":853,"./__stories__/useScrolling.story.tsx":854,"./__stories__/useSearchParam.story.tsx":856,"./__stories__/useSessionStorage.story.tsx":858,"./__stories__/useSet.story.tsx":860,"./__stories__/useSetState.story.tsx":862,"./__stories__/useSize.story.tsx":864,"./__stories__/useSpeech.story.tsx":866,"./__stories__/useSpring.story.tsx":868,"./__stories__/useStartTyping.story.tsx":872,"./__stories__/useStateList.story.tsx":874,"./__stories__/useStateValidator.story.tsx":876,"./__stories__/useStateWithHistory.story.tsx":878,"./__stories__/useThrottle.story.tsx":880,"./__stories__/useThrottleFn.story.tsx":881,"./__stories__/useTimeout.story.tsx":882,"./__stories__/useTimeoutFn.story.tsx":884,"./__stories__/useTitle.story.tsx":886,"./__stories__/useToggle.story.tsx":888,"./__stories__/useTween.story.tsx":889,"./__stories__/useUnmount.story.tsx":891,"./__stories__/useUpdate.story.tsx":893,"./__stories__/useUpdateEffect.story.tsx":895,"./__stories__/useUpsert.story.tsx":897,"./__stories__/useVibrate.story.tsx":899,"./__stories__/useVideo.story.tsx":901,"./__stories__/useWindowScroll.story.tsx":903,"./__stories__/useWindowSize.story.tsx":905,"./comps/__stories__/UseKey.story.tsx":907};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=601},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useBreakpointA=__1.createBreakpoint(),useBreakpointB=__1.createBreakpoint({mobileM:350,laptop:1024,tablet:768}),Demo=function(){var breakpointA=useBreakpointA(),breakpointB=useBreakpointB();return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"try resize your window"),react_2.default.createElement("p",null,"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"),react_2.default.createElement("p",null,breakpointA),react_2.default.createElement("p",null,"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"),react_2.default.createElement("p",null,breakpointB))};react_1.storiesOf("sensors|createBreakpoint",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(698)})})).add("Demo",(function(){return react_2.default.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(fn){return function(){for(var args=[],_i=0;_i=b[1]?1:-1}))}),[breakpoints]);return sortedBreakpoints.reduce((function(acc,_a){var name=_a[0],width=_a[1];return screen>=width?name:acc}),sortedBreakpoints[0][0])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(286)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);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__(1),util_1=__webpack_require__(16);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState((function(){try{var localStorageValue=localStorage.getItem(key);return"string"!=typeof localStorageValue?(localStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?localStorageValue:JSON.parse(localStorageValue||"null")}catch(_a){return initialValue}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){try{var serializedState=raw?String(state):JSON.stringify(state);localStorage.setItem(key,serializedState)}catch(_a){}}),[state]),[state,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(16),patchHistoryMethod=function(method){var original=history[method];history[method]=function(state){var result=original.apply(this,arguments),event=new Event(method.toLowerCase());return event.state=state,window.dispatchEvent(event),result}};util_1.isClient&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function(trigger){return{trigger:trigger,state:history.state,length:history.length,hash:location.hash,host:location.host,hostname:location.hostname,href:location.href,origin:location.origin,pathname:location.pathname,port:location.port,protocol:location.protocol,search:location.search}},hasEventConstructor="function"==typeof Event;exports.default=util_1.isClient&&hasEventConstructor?function(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var onPopstate=function(){return setState(buildState("popstate"))},onPushstate=function(){return setState(buildState("pushstate"))},onReplacestate=function(){return setState(buildState("replacestate"))};return util_1.on(window,"popstate",onPopstate),util_1.on(window,"pushstate",onPushstate),util_1.on(window,"replacestate",onReplacestate),function(){util_1.off(window,"popstate",onPopstate),util_1.off(window,"pushstate",onPushstate),util_1.off(window,"replacestate",onReplacestate)}}),[]),state}:function(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}exports.getClosestBody=getClosestBody;var bodies=new Map,doc="object"==typeof document?document:void 0;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body){var bodyInfo=bodies.get(body);locked?bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),body.style.overflow="hidden"):bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))}}),[locked,elementRef.current])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(128)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function(componentName){for(var rest=[],_i=1;_i=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),useFirstMountState_1=__webpack_require__(93),resolveHookState_1=__webpack_require__(127);exports.useStateWithHistory=function useStateWithHistory(initialState,capacity,initialHistory){if(void 0===capacity&&(capacity=10),capacity<1)throw new Error("Capacity has to be greater than 1, got '"+capacity+"'");var isFirstMount=useFirstMountState_1.useFirstMountState(),_a=react_1.useState(initialState),state=_a[0],innerSetState=_a[1],history=react_1.useRef(null!=initialHistory?initialHistory:[]),historyPosition=react_1.useRef(0);return isFirstMount&&(history.current.length?(history.current[history.current.length-1]!==initialState&&history.current.push(initialState),history.current.length>capacity&&(history.current=history.current.slice(history.current.length-capacity))):history.current.push(initialState),historyPosition.current=history.current.length&&history.current.length-1),[state,react_1.useCallback((function(newState){innerSetState((function(currentState){return(newState=resolveHookState_1.resolveHookState(newState))!==currentState&&(historyPosition.currentcapacity&&(history.current=history.current.slice(history.current.length-capacity))),newState}))}),[state,capacity]),react_1.useMemo((function(){return{history:history.current,position:historyPosition.current,capacity:capacity,back:function(amount){void 0===amount&&(amount=1),historyPosition.current&&innerSetState((function(){return historyPosition.current-=Math.min(amount,historyPosition.current),history.current[historyPosition.current]}))},forward:function(amount){void 0===amount&&(amount=1),historyPosition.current!==history.current.length-1&&innerSetState((function(){return historyPosition.current=Math.min(historyPosition.current+amount,history.current.length-1),history.current[historyPosition.current]}))},go:function(position){position!==historyPosition.current&&innerSetState((function(){return historyPosition.current=position<0?Math.max(history.current.length+position,0):Math.min(history.current.length-1,position),history.current[historyPosition.current]}))}}}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useMountedState_1=tslib_1.__importDefault(__webpack_require__(61)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(54)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(92));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var isMounted=useMountedState_1.default(),update=useUpdate_1.default(),index=react_1.useRef(0);useUpdateEffect_1.default((function(){stateSet.length<=index.current&&(index.current=stateSet.length-1,update())}),[stateSet.length]);var actions=react_1.useMemo((function(){return{next:function(){return actions.setStateAt(index.current+1)},prev:function(){return actions.setStateAt(index.current-1)},setStateAt:function(newIndex){isMounted()&&stateSet.length&&newIndex!==index.current&&(index.current=newIndex>=0?newIndex%stateSet.length:stateSet.length+newIndex%stateSet.length,update())},setState:function(state){if(isMounted()){var newIndex=stateSet.length?stateSet.indexOf(state):-1;if(-1===newIndex)throw new Error("State '"+state+"' is not a valid state (does not exist in state list)");index.current=newIndex,update()}}}}),[stateSet]);return tslib_1.__assign({state:stateSet[index.current],currentIndex:index.current},actions)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(129));exports.default=function(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextValue=react_1.useRef(null),hasNextValue=react_1.useRef(0);return react_1.useEffect((function(){if(timeout.current)nextValue.current=value,hasNextValue.current=!0;else{setState(value);var timeoutCallback_1=function(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),[value]),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(129));exports.default=function(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextArgs=react_1.useRef();return react_1.useEffect((function(){if(timeout.current)nextArgs.current=args;else{setState(fn.apply(void 0,args));var timeoutCallback_1=function(){nextArgs.current?(setState(fn.apply(void 0,nextArgs.current)),nextArgs.current=void 0,timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),args),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(179)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(54));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default="undefined"!=typeof document?function useTitle(title){var t=react_1.useRef();t.current!==title&&(document.title=t.current=title)}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),ts_easing_1=__webpack_require__(685),useRaf_1=tslib_1.__importDefault(__webpack_require__(290));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__(1);exports.default=function(){var refUnmounted=react_1.useRef(!1);return react_1.useEffect((function(){return function(){refUnmounted.current=!0}})),react_1.useMemo((function(){return function(promise,onError){return new Promise((function(resolve,reject){promise.then((function(result){refUnmounted.current||resolve(result)}),(function(error){refUnmounted.current?onError?onError(error):console.error("useUnmountPromise",error):reject(error)}))}))}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useList_1=tslib_1.__importDefault(__webpack_require__(287));exports.default=function useUpsert(predicate,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),list=_a[0],listActions=_a[1];return[list,tslib_1.__assign(tslib_1.__assign({},listActions),{upsert:function(newItem){listActions.upsert(predicate,newItem)}})]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),isVibrationApiSupported="object"==typeof navigator&&"vibrate"in navigator;exports.default=isVibrationApiSupported?function useVibrate(enabled,pattern,loop){void 0===enabled&&(enabled=!0),void 0===pattern&&(pattern=[1e3,1e3]),void 0===loop&&(loop=!0),react_1.useEffect((function(){var interval;if(enabled&&(navigator.vibrate(pattern),loop)){var duration=pattern instanceof Array?pattern.reduce((function(a,b){return a+b})):pattern;interval=setInterval((function(){navigator.vibrate(pattern)}),duration)}return function(){enabled&&(navigator.vibrate(0),loop&&clearInterval(interval))}}),[enabled])}:function(){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useVideo=__webpack_require__(0).__importDefault(__webpack_require__(278)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var scrollbar_width_1=__webpack_require__(691),react_1=__webpack_require__(1);exports.useScrollbarWidth=function useScrollbarWidth(){var _a=react_1.useState(scrollbar_width_1.scrollbarWidth()),sbw=_a[0],setSbw=_a[1];return react_1.useEffect((function(){if(void 0===sbw){var raf=requestAnimationFrame((function(){setSbw(scrollbar_width_1.scrollbarWidth())}));return function(){return cancelAnimationFrame(raf)}}}),[]),sbw}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.useMultiStateValidator=function useMultiStateValidator(states,validator,initialValidity){if(void 0===initialValidity&&(initialValidity=[void 0]),"object"!=typeof states)throw new Error("states expected to be an object or array, got "+typeof states);var validatorInner=react_1.useRef(validator),statesInner=react_1.useRef(states);validatorInner.current=validator,statesInner.current=states;var _a=react_1.useState(initialValidity),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(statesInner.current,setValidity):setValidity(validatorInner.current(statesInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),Object.values(states)),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),util_1=__webpack_require__(16),useRafState_1=tslib_1.__importDefault(__webpack_require__(94));exports.default=function(){var _a=useRafState_1.default({x:util_1.isClient?window.pageXOffset:0,y:util_1.isClient?window.pageYOffset:0}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var handler=function(){setState({x:window.pageXOffset,y:window.pageYOffset})};return window.addEventListener("scroll",handler,{capture:!1,passive:!0}),function(){window.removeEventListener("scroll",handler)}}),[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useRafState_1=tslib_1.__importDefault(__webpack_require__(94)),util_1=__webpack_require__(16);exports.default=function(initialWidth,initialHeight){void 0===initialWidth&&(initialWidth=1/0),void 0===initialHeight&&(initialHeight=1/0);var _a=useRafState_1.default({width:util_1.isClient?window.innerWidth:initialWidth,height:util_1.isClient?window.innerHeight:initialHeight}),state=_a[0],setState=_a[1];return react_1.useEffect((function(){if(util_1.isClient){var handler_1=function(){setState({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",handler_1),function(){window.removeEventListener("resize",handler_1)}}}),[]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),resize_observer_polyfill_1=tslib_1.__importDefault(__webpack_require__(696));exports.default=function(){var _a=react_1.useState({x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0}),rect=_a[0],set=_a[1],observer=react_1.useState((function(){return new resize_observer_polyfill_1.default((function(entries){var entry=entries[0];entry&&set(entry.contentRect)}))}))[0];return[react_1.useCallback((function(node){observer.disconnect(),node&&observer.observe(node)}),[observer]),rect]}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1);exports.default=function(initialSet){void 0===initialSet&&(initialSet=new Set);var _a=react_1.useState(initialSet),set=_a[0],setSet=_a[1],utils=react_1.useMemo((function(){return{has:function(item){return set.has(item)},add:function(item){return setSet((function(prevSet){return new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},remove:function(item){return setSet((function(prevSet){return new Set(Array.from(prevSet).filter((function(i){return i!==item})))}))},reset:function(){return setSet(initialSet)}}}),[setSet]);return[set,utils]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createBreakpoint
\n
Usage
\n
use default breakpoint
\n
laptopL: 1440, laptop: 1024, tablet: 768
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n
use custom breakpoint
\n
XL: 1280, L: 768, S: 350
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(700)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createMemo
\n
Hook factory, receives a function to be memoized, returns a memoized React hook,\nwhich receives the same arguments and returns the same result as the original function.
\n
Usage
\n
import {createMemo} from 'react-use';\n\nconst fibonacci = n => {\n  if (n === 0) return 0;\n  if (n === 1) return 1;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n};\n\nconst useMemoFibonacci = createMemo(fibonacci);\n\nconst Demo = () => {\n  const result = useMemoFibonacci(10);\n\n  return (\n    <div>\n      fib(10) = {result}\n    </div>\n  );\n};
\n
Reference
\n
const useMemoFn = createMemo(fn);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),redux_logger_1=tslib_1.__importDefault(__webpack_require__(702)),redux_thunk_1=tslib_1.__importDefault(__webpack_require__(703)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useThunkReducer=__1.createReducer(redux_thunk_1.default,redux_logger_1.default);function init(initialCount){return{count:initialCount}}function reducer(state,action){switch(action.type){case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};case"reset":return init(action.payload);default:throw new Error}}var Demo=function(_a){var _b=_a.initialCount,initialCount=void 0===_b?1:_b,addAndReset=React.useCallback((function(){return function(dispatch2){dispatch2({type:"increment"}),setTimeout((function(){dispatch2({type:"reset",payload:initialCount})}),1e3)}}),[initialCount]),_c=useThunkReducer(reducer,initialCount,init),state=_c[0],dispatch=_c[1];return React.createElement("div",null,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:function(){return dispatch(addAndReset())}},"Add and reset"),React.createElement("button",{onClick:function(){return dispatch({type:"reset",payload:initialCount})}},"Reset"),React.createElement("button",{onClick:function(){return dispatch({type:"increment"})}},"+"),React.createElement("button",{onClick:function(){return dispatch({type:"decrement"})}},"-"),React.createElement("p",null,"Open your developer console to see actions logged by middleware"))};react_1.storiesOf("State|createReducer",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(704)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createReducer
\n
Factory for reducer hooks with custom middleware with an identical API as React's useReducer. Compatible with Redux middlware.
\n
Usage
\n
An example with redux-thunk and redux-logger.
\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n
Reference
\n
const useMiddlewareReducer = createReducer(...middlewares);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsync((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(706)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsync
\n
React hook that resolves an async function or a function that returns\na promise;
\n
Usage
\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n
Reference
\n
useAsync(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return callback()}},"Start"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(708)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncFn
\n
React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.
\n
Usage
\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n
Reference
\n
useAsyncFn(fn, deps?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(60),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return state.retry()}},"Retry"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncRetry",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(710)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncRetry
\n
Uses useAsync with an additional retry method to easily retry/refresh the async function;
\n
Usage
\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n
Reference
\n
useAsyncRetry(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(712)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAudio
\n
Creates <audio> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n
audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{audio}</div>
\n
state tracks the state of the audio and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <audio> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=__1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(714)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBattery
\n
React sensor hook that tracks battery status.
\n
\n
Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.
\n
\n
Usage
\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n
Reference
\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return __1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),React.createElement("div",null,dirty&&React.createElement("p",null,"Try to reload or close tab"),React.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(716)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBeforeUnload
\n
React side-effect hook that shows browser alert when user try to reload or close the page.
\n
Usage
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(293)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_actions_1=__webpack_require__(130),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return __1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(731)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useClickAway
\n
React UI hook that triggers a callback when user\nclicks outside the target element.
\n
Usage
\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n
Reference
\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=__1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function(){return copyToClipboard(text)}},"copy text"),state.error?React.createElement("p",null,"Unable to copy value: ",state.error.message):state.value&&React.createElement(React.Fragment,null,React.createElement("p",null,"Copied ",state.value," ",state.noUserInteraction?"without":"with"," user interaction"),React.createElement("input",{type:"text",placeholder:"Paste it in here to check"})))};react_1.storiesOf("Side-effects|useCopyToClipboard",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(733)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCopyToClipboard
\n
Copy text to a user's clipboard.
\n
Usage
\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n
Reference
\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — catched error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(5),initialValue=_a[0],setInitialValue=_a[1],_b=__1.useCounter(1),min=_b[0],_c=_b[1],incMin=_c.inc,decMin=_c.dec,_d=__1.useCounter(10),max=_d[0],_e=_d[1],incMax=_e.inc,decMax=_e.dec,_f=__1.useCounter(initialValue,max,min),value=_f[0],_g=_f[1],inc=_g.inc,dec=_g.dec,set=_g.set,reset=_g.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){return inc()}},"Increment"),React.createElement("button",{onClick:function(){return dec()}},"Decrement"),React.createElement("button",{onClick:function(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function(){return reset()}},"Reset"),React.createElement("button",{onClick:function(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function(){return incMin()}},"Increment"),React.createElement("button",{onClick:function(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function(){return incMax()}},"Increment"),React.createElement("button",{onClick:function(){return decMax()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Initial value: ",initialValue,React.createElement("button",{onClick:function(){return setInitialValue((function(v){return++v}))}},"Increment"),React.createElement("button",{onClick:function(){return setInitialValue((function(v){return--v}))}},"Decrement"))};react_1.storiesOf("State|useCounter",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(735)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCounter
\n
React state hook that tracks a numeric value.
\n
useNumber is an alias for useCounter.
\n
Usage
\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\n  const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n  const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n  return (\n    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n
Reference
\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, 20: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(737)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCss
\n
React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.
\n
Usage
\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n
Examples
\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1],cancel=__1.useDebounce((function(){setState("Typing stopped"),setDebouncedValue(val)}),2e3,[val])[1];return React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue,React.createElement("button",{onClick:cancel},"Cancel debounce")))};react_1.storiesOf("Side effects|useDebounce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(739)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDebounce
\n
React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
\n
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.
\n
Usage
\n
const Demo = () => {\n  const [state, setState] = React.useState('Typing stopped');\n  const [val, setVal] = React.useState('');\n  const [debouncedValue, setDebouncedValue] = React.useState('');\n\n  const [, cancel] = useDebounce(\n    () => {\n      setState('Typing stopped');\n      setDebouncedValue(val);\n    },\n    2000,\n    [val]\n  );\n\n  return (\n    <div>\n      <input\n        type="text"\n        value={val}\n        placeholder="Debounced input"\n        onChange={({ currentTarget }) => {\n          setState('Waiting for typing to stop...');\n          setVal(currentTarget.value);\n        }}\n      />\n      <div>{state}</div>\n      <div>\n        Debounced value: {debouncedValue}\n        <button onClick={cancel}>Cancel debounce</button>\n      </div>\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • deps: DependencyList - array of values that the debounce depends on, in the same manner as useEffect;
    • \n
  • isReady: ()=>boolean|null - function returning current debounce state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the debounce
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=__1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal=history.history.length-1},"Forward >"),"  Step size: ",React.createElement("input",{type:"number",value:stepSize,min:1,max:3,onChange:handleStepSizeChange})),React.createElement("div",{style:{marginTop:8}},React.createElement("div",null,"Current history"),React.createElement("div",{dangerouslySetInnerHTML:{__html:JSON.stringify(history.history,null,2).replace(/\n/g,"
").replace(/ /g," ")}})))};react_1.storiesOf("State|useStateWithHistory",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(879)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useStateHistory
\n
Stores defined amount of previous state values and provides handles to travel through them.
\n
Usage
\n
Reference
\n
const [state, setState, stateHistory] = useStateWithHistory<S = undefined>(\n  initialState?: S | (()=>S),\n  historyCapacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • historyCapacity - amount of history entries that hold by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equals [ initialState ].  \nInitial state will not be pushed to initial history.
    If entries amount is greater than historyCapacity parameter it wont be modified on init but will be trimmed on next setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. I will have the same ref all the time so pe careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState invoke and component re-render.
      If first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState invoke and component re-render.
      If last element of history reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects|useThrottle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(304)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),value=_a[0],setValue=_a[1],throttledValue=__1.useThrottleFn((function(defaultValue){return defaultValue}),2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=__1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_a){var currentTarget=_a.currentTarget;setValue(currentTarget.value)}}),React.createElement("br",null),React.createElement("br",null),React.createElement("div",null,"Throttled value: ",throttledValue),React.createElement("div",null,"Times updated: ",count))};react_1.storiesOf("Side effects|useThrottleFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(304)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4));function TestComponent(props){void 0===props&&(props={});var ms=props.ms||5e3,_a=__1.useTimeout(ms),isReady=_a[0],cancel=_a[1];return React.createElement("div",null,isReady()?"I'm reloaded after timeout":"I will be reloaded after "+ms/1e3+"s",!1===isReady()?React.createElement("button",{onClick:cancel},"Cancel"):"")}var Demo=function(){return React.createElement("div",null,React.createElement(TestComponent,null),React.createElement(TestComponent,{ms:1e4}))};react_1.storiesOf("Animation|useTimeout",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(883)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTimeout
\n
Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.
\n
Usage
\n
import { useTimeout } from 'react-use';\n\nfunction TestComponent(props: { ms?: number } = {}) {\n  const ms = props.ms || 5000;\n  const [isReady, cancel] = useTimeout(ms);\n\n  return (\n    <div>\n      { isReady() ? 'I\\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }\n      { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }\n    </div>\n  );\n}\n\nconst Demo = () => {\n  return (\n    <div>\n      <TestComponent />\n      <TestComponent ms={ 10000 } />\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeout(ms: number = 0);
\n
    \n
  • isReady:()=>boolean|null - function returning current timeout state:
      \n
    • false - pending re-render
      • \n
    • true - re-render performed
      • \n
    • null - re-render cancelled
      • \n
    \n
    • \n
  • cancel:()=>void - cancel the timeout (component will not be re-rendered)
    • \n
  • reset:()=>void - reset the timeout
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),index_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Not called yet"),state=_a[0],setState=_a[1];var _b=index_1.useTimeoutFn((function fn(){setState("called at "+Date.now())}),5e3),isReady=_b[0],cancel=_b[1],reset=_b[2],cancelButtonClick=react_2.useCallback((function(){!1===isReady()?(cancel(),setState("cancelled")):(reset(),setState("Not called yet"))}),[]),readyState=isReady();return React.createElement("div",null,React.createElement("div",null,null!==readyState?"Function will be called in 5 seconds":"Timer cancelled"),React.createElement("button",{onClick:cancelButtonClick}," ",!1===readyState?"cancel":"restart"," timeout"),React.createElement("br",null),React.createElement("div",null,"Function state: ",!1===readyState?"Pending":readyState?"Called":"Cancelled"),React.createElement("div",null,state))};react_1.storiesOf("Animation|useTimeoutFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(885)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTimeoutFn
\n
Calls given function after specified amount of milliseconds.
\n
Several thing about it's work:
\n
    \n
  • does not re-render component;
    • \n
  • automatically cancel timeout on cancel;
    • \n
  • automatically reset timeout on delay change;
    • \n
  • reset function call will cancel previous timeout;
    • \n
  • timeout will NOT be reset on function change. It will be called within the timeout, you have to reset it on your own when needed. 
    • \n
\n
Usage
\n
import * as React from 'react';\nimport { useTimeoutFn } from 'react-use';\n\nconst Demo = () => {\n  const [state, setState] = React.useState('Not called yet');\n\n  function fn() {\n    setState(`called at ${Date.now()}`);\n  }\n\n  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);\n  const cancelButtonClick = useCallback(() => {\n    if (isReady() === false) {\n      cancel();\n      setState(`cancelled`);\n    } else {\n      reset();\n      setState('Not called yet');\n    }\n  }, []);\n\n  const readyState = isReady();\n\n  return (\n    <div>\n      <div>{readyState !== null ? 'Function will be called in 5 seconds' : 'Timer cancelled'}</div>\n      <button onClick={cancelButtonClick}> {readyState === false ? 'cancel' : 'restart'} timeout</button>\n      <br />\n      <div>Function state: {readyState === false ? 'Pending' : readyState ? 'Called' : 'Cancelled'}</div>\n      <div>{state}</div>\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n    reset: () => void,\n] = useTimeoutFn(fn: Function, ms: number = 0);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • isReady: ()=>boolean|null - function returning current timeout state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the timeout
    • \n
  • reset: ()=>void - reset the timeout
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(297)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return __1.useTitle("Hello world!"),React.createElement(NewTabStory_1.default,null,'Title should be "Hello world!"')};react_1.storiesOf("Side effects|useTitle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(887)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTitle
\n
React side-effect hook that sets title of the page.
\n
Usage
\n
import {useTitle} from 'react-use';\n\nconst Demo = () => {\n  useTitle('Hello world!');\n\n  return null;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:toggle},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useToggle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(293)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var t=__1.useTween();return React.createElement("div",null,"Tween: ",t)};react_1.storiesOf("Animation|useTween",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(890)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useTween
\n
React animation hook that tweens a number between 0 and 1.
\n
Usage
\n
import {useTween} from 'react-use';\n\nconst Demo = () => {\n  const t = useTween();\n\n  return (\n    <div>\n      Tween: {t}\n    </div>\n  );\n};
\n
Reference
\n
useTween(easing?: string, ms?: number, delay?: number): number
\n
Returns a number that begins with 0 and ends with 1 when animation ends.
\n
    \n
  • easing — one of the valid easing names, defaults to inCirc.
    • \n
  • ms — milliseconds for how long to keep re-rendering component, defaults to 200.
    • \n
  • delay — delay in milliseconds after which to start re-rendering component, defaults to 0.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return __1.useUnmount((function(){return alert("UNMOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useUnmount()")," hook can be used to perform side-effects when component unmounts. This component will alert you when it is un-mounted.")};react_1.storiesOf("Lifecycle|useUnmount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(892)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUnmount
\n
React lifecycle hook that calls a function when the component will unmount. Use useEffectOnce if you need both a mount and unmount function.
\n
Usage
\n
import {useUnmount} from 'react-use';\n\nconst Demo = () => {\n  useUnmount(() => alert('UNMOUNTED'));\n  return null;\n};
\n
Reference
\n
useUnmount(fn: () => void | undefined);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var update=__1.useUpdate();return React.createElement(React.Fragment,null,React.createElement("div",null,"Time: ",Date.now()),React.createElement("button",{onClick:update},"Update"))};react_1.storiesOf("Animation|useUpdate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(894)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpdate
\n
React utility hook that returns a function that forces component\nto re-render when called.
\n
Usage
\n
import {useUpdate} from 'react-use';\n\nconst Demo = () => {\n  const update = useUpdate();\n  return (\n    <>\n      <div>Time: {Date.now()}</div>\n      <button onClick={update}>Update</button>\n    </>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(0),count=_a[0],setCount=_a[1],_b=React.useState(!1),didUpdate=_b[0],setDidUpdate=_b[1];return __1.useUpdateEffect((function(){setDidUpdate(!0)}),[count]),React.createElement("div",null,React.createElement("button",{onClick:function(){return setCount((function(currentCount){return currentCount+1}))}},"Count: ",count),React.createElement("p",null,"Updated: ",didUpdate))};react_1.storiesOf("Lifecycle|useUpdateEffect",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(896)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpdateEffect
\n
React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the useEffect hook.
\n
Usage
\n
import React from 'react'\nimport {useUpdateEffect} from 'react-use';\n\nconst Demo = () => {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setCount(count => count + 1)\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    console.log('count', count) // will only show 1 and beyond\n\n    return () => { // *OPTIONAL*\n      // do something on unmount\n    }\n  }) // you can include deps array if necessary\n\n  return <div>Count: {count}</div>\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),index_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function(){var _a=index_1.useUpsert((function(a,b){return a.id===b.id}),initialItems),list=_a[0],_b=_a[1],set=_b.set,upsert=_b.upsert,remove=_b.remove;return React.createElement("div",{style:{display:"inline-flex",flexDirection:"column"}},list.map((function(item,index){return React.createElement("div",{key:item.id},React.createElement("input",{value:item.text,onChange:function(e){return upsert(tslib_1.__assign(tslib_1.__assign({},item),{text:e.target.value}))}}),React.createElement("button",{onClick:function(){return remove(index)}},"Remove"))})),React.createElement("button",{onClick:function(){return upsert({id:(list.length+1).toString(),text:""})}},"Add item"),React.createElement("button",{onClick:function(){return set([])}},"Reset"))};react_1.storiesOf("State|useUpsert",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(898)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useUpsert
\n
\n
DEPRECATED!  \nUse useList hook's upsert action instead
\n
\n
Superset of useList. Provides an additional method to upsert (update or insert) an element into the list.
\n
Usage
\n
import {useUpsert} from 'react-use';\n\nconst Demo = () => {\n  const comparisonFunction = (a: DemoType, b: DemoType) => {\n    return a.id === b.id;\n  };\n  const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);\n\n  return (\n    <div style={{ display: 'inline-flex', flexDirection: 'column' }}>\n      {list.map((item: DemoType, index: number) => (\n        <div key={item.id}>\n          <input value={item.text} onChange={e => upsert({ ...item, text: e.target.value })} />\n          <button onClick={() => remove(index)}>Remove</button>\n        </div>\n      ))}\n      <button onClick={() => upsert({ id: (list.length + 1).toString(), text: '' })}>Add item</button>\n      <button onClick={() => set([])}>Reset</button>\n    </div>\n  );\n};
\n\n\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),vibrating=_a[0],toggleVibrating=_a[1];return __1.useVibrate(vibrating,[300,100,200,100,1e3,300]),React.createElement("div",null,React.createElement("button",{onClick:toggleVibrating},vibrating?"Stop":"Vibrate"))};react_1.storiesOf("UI|useVibrate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(900)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useVibrate
\n
React UI hook to provide physical feedback with device vibration hardware using the Vibration API.
\n
Usage
\n
import {useVibrate} from 'react-use';\n\nconst Demo = () => {\n  const [vibrating, toggleVibrating] = useToggle(false);\n\n  useVibrate(vibrating, [300, 100, 200, 100, 1000, 300], false);\n\n  return (\n    <div>\n      <button onClick={toggleVibrating}>{vibrating ? 'Stop' : 'Vibrate'}</button>\n    </div>\n  );\n};
\n
Reference
\n
useVibrate(\n  enabled: boolean = true,\n  pattern: number | number[] = [1000, 1000],\n  loop: boolean = true\n): void;
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(902)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useVideo
\n
Creates <video> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useVideo} from 'react-use';\n\nconst Demo = () => {\n  const [video, state, controls, ref] = useVideo(\n    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />\n  );\n\n  return (\n    <div>\n      {video}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [video, state, controls, ref] = useVideo(props);\nconst [video, state, controls, ref] = useVideo(<video {...props}/>);
\n
video is React's <video> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{video}</div>
\n
state tracks the state of the video and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the video, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <video> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <video> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(904)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useWindowScroll
\n
React sensor hook that re-renders on window scroll.
\n
Usage
\n
import {useWindowScroll} from 'react-use';\n\nconst Demo = () => {\n  const {x, y} = useWindowScroll();\n\n  return (\n    <div>\n      <div>x: {x}</div>\n      <div>y: {y}</div>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__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__(906)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useWindowSize
\n
React sensor hook that tracks dimensions of the browser window.
\n
Usage
\n
import {useWindowSize} from 'react-use';\n\nconst Demo = () => {\n  const {width, height} = useWindowSize();\n\n  return (\n    <div>\n      <div>width: {width}</div>\n      <div>height: {height}</div>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),UseKey_1=tslib_1.__importDefault(__webpack_require__(908));react_1.storiesOf("Components|",module).add("Demo",(function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function(){return alert("Q pressed!")}}))}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKey_1=tslib_1.__importDefault(__webpack_require__(180)),UseKey=tslib_1.__importDefault(__webpack_require__(909)).default(useKey_1.default,(function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,tslib_1.__rest(_a,["filter","fn","deps"]),deps]}));exports.default=UseKey},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function(props){return[props]};exports.default=function(hook,mapPropsToArgs){void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs);return function(props){var state=hook.apply(void 0,mapPropsToArgs(props)),children=props.children,_a=props.render,render=void 0===_a?children:_a;return render&&render(state)||null}}}],[[306,1,2]]]);
+//# sourceMappingURL=main.f90781e5a319fd036327.bundle.js.map
\ No newline at end of file
diff --git a/main.f90781e5a319fd036327.bundle.js.map b/main.f90781e5a319fd036327.bundle.js.map
new file mode 100644
index 00000000..0381309f
--- /dev/null
+++ b/main.f90781e5a319fd036327.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.f90781e5a319fd036327.bundle.js","sources":["webpack:///main.f90781e5a319fd036327.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.a2e70de30ebd93e2310b.bundle.js.map b/runtime~main.a2e70de30ebd93e2310b.bundle.js.map
deleted file mode 100644
index f3ae6bfd..00000000
--- a/runtime~main.a2e70de30ebd93e2310b.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"runtime~main.a2e70de30ebd93e2310b.bundle.js","sources":["webpack:///runtime~main.a2e70de30ebd93e2310b.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.a2e70de30ebd93e2310b.bundle.js b/runtime~main.f90781e5a319fd036327.bundle.js
similarity index 97%
rename from runtime~main.a2e70de30ebd93e2310b.bundle.js
rename to runtime~main.f90781e5a319fd036327.bundle.js
index 6826d886..e8f2292c 100644
--- a/runtime~main.a2e70de30ebd93e2310b.bundle.js
+++ b/runtime~main.f90781e5a319fd036327.bundle.js
@@ -1,2 +1,2 @@
 !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i