diff --git a/iframe.html b/iframe.html index cf322c8e..c9ff0335 100644 --- a/iframe.html +++ b/iframe.html @@ -71,4 +71,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.046f3e9486f27bc49c21.bundle.js b/main.046f3e9486f27bc49c21.bundle.js
new file mode 100644
index 00000000..fa7386b1
--- /dev/null
+++ b/main.046f3e9486f27bc49c21.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__(1).__importStar(__webpack_require__(0)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(688);Object.defineProperty(exports,"createMemo",{enumerable:!0,get:function(){return createMemo_1.default}});var createReducerContext_1=__webpack_require__(689);Object.defineProperty(exports,"createReducerContext",{enumerable:!0,get:function(){return createReducerContext_1.default}});var createReducer_1=__webpack_require__(690);Object.defineProperty(exports,"createReducer",{enumerable:!0,get:function(){return createReducer_1.default}});var createStateContext_1=__webpack_require__(691);Object.defineProperty(exports,"createStateContext",{enumerable:!0,get:function(){return createStateContext_1.default}});var useAsync_1=__webpack_require__(305);Object.defineProperty(exports,"useAsync",{enumerable:!0,get:function(){return useAsync_1.default}});var useAsyncFn_1=__webpack_require__(187);Object.defineProperty(exports,"useAsyncFn",{enumerable:!0,get:function(){return useAsyncFn_1.default}});var useAsyncRetry_1=__webpack_require__(692);Object.defineProperty(exports,"useAsyncRetry",{enumerable:!0,get:function(){return useAsyncRetry_1.default}});var useAudio_1=__webpack_require__(693);Object.defineProperty(exports,"useAudio",{enumerable:!0,get:function(){return useAudio_1.default}});var useBattery_1=__webpack_require__(695);Object.defineProperty(exports,"useBattery",{enumerable:!0,get:function(){return useBattery_1.default}});var useBeforeUnload_1=__webpack_require__(696);Object.defineProperty(exports,"useBeforeUnload",{enumerable:!0,get:function(){return useBeforeUnload_1.default}});var useBoolean_1=__webpack_require__(697);Object.defineProperty(exports,"useBoolean",{enumerable:!0,get:function(){return useBoolean_1.default}});var useClickAway_1=__webpack_require__(698);Object.defineProperty(exports,"useClickAway",{enumerable:!0,get:function(){return useClickAway_1.default}});var useCookie_1=__webpack_require__(699);Object.defineProperty(exports,"useCookie",{enumerable:!0,get:function(){return useCookie_1.default}});var useCopyToClipboard_1=__webpack_require__(701);Object.defineProperty(exports,"useCopyToClipboard",{enumerable:!0,get:function(){return useCopyToClipboard_1.default}});var useCounter_1=__webpack_require__(308);Object.defineProperty(exports,"useCounter",{enumerable:!0,get:function(){return useCounter_1.default}});var useCss_1=__webpack_require__(704);Object.defineProperty(exports,"useCss",{enumerable:!0,get:function(){return useCss_1.default}});var useCustomCompareEffect_1=__webpack_require__(188);Object.defineProperty(exports,"useCustomCompareEffect",{enumerable:!0,get:function(){return useCustomCompareEffect_1.default}});var useDebounce_1=__webpack_require__(710);Object.defineProperty(exports,"useDebounce",{enumerable:!0,get:function(){return useDebounce_1.default}});var useDeepCompareEffect_1=__webpack_require__(711);Object.defineProperty(exports,"useDeepCompareEffect",{enumerable:!0,get:function(){return useDeepCompareEffect_1.default}});var useDefault_1=__webpack_require__(712);Object.defineProperty(exports,"useDefault",{enumerable:!0,get:function(){return useDefault_1.default}});var useDrop_1=__webpack_require__(713);Object.defineProperty(exports,"useDrop",{enumerable:!0,get:function(){return useDrop_1.default}});var useDropArea_1=__webpack_require__(714);Object.defineProperty(exports,"useDropArea",{enumerable:!0,get:function(){return useDropArea_1.default}});var useEffectOnce_1=__webpack_require__(98);Object.defineProperty(exports,"useEffectOnce",{enumerable:!0,get:function(){return useEffectOnce_1.default}});var useEnsuredForwardedRef_1=__webpack_require__(715);Object.defineProperty(exports,"useEnsuredForwardedRef",{enumerable:!0,get:function(){return useEnsuredForwardedRef_1.default}}),Object.defineProperty(exports,"ensuredForwardRef",{enumerable:!0,get:function(){return useEnsuredForwardedRef_1.ensuredForwardRef}});var useEvent_1=__webpack_require__(304);Object.defineProperty(exports,"useEvent",{enumerable:!0,get:function(){return useEvent_1.default}});var useError_1=__webpack_require__(716);Object.defineProperty(exports,"useError",{enumerable:!0,get:function(){return useError_1.default}});var useFavicon_1=__webpack_require__(717);Object.defineProperty(exports,"useFavicon",{enumerable:!0,get:function(){return useFavicon_1.default}});var useFullscreen_1=__webpack_require__(718);Object.defineProperty(exports,"useFullscreen",{enumerable:!0,get:function(){return useFullscreen_1.default}});var useGeolocation_1=__webpack_require__(720);Object.defineProperty(exports,"useGeolocation",{enumerable:!0,get:function(){return useGeolocation_1.default}});var useGetSet_1=__webpack_require__(309);Object.defineProperty(exports,"useGetSet",{enumerable:!0,get:function(){return useGetSet_1.default}});var useGetSetState_1=__webpack_require__(721);Object.defineProperty(exports,"useGetSetState",{enumerable:!0,get:function(){return useGetSetState_1.default}});var useHarmonicIntervalFn_1=__webpack_require__(722);Object.defineProperty(exports,"useHarmonicIntervalFn",{enumerable:!0,get:function(){return useHarmonicIntervalFn_1.default}});var useHover_1=__webpack_require__(724);Object.defineProperty(exports,"useHover",{enumerable:!0,get:function(){return useHover_1.default}});var useHoverDirty_1=__webpack_require__(310);Object.defineProperty(exports,"useHoverDirty",{enumerable:!0,get:function(){return useHoverDirty_1.default}});var useIdle_1=__webpack_require__(725);Object.defineProperty(exports,"useIdle",{enumerable:!0,get:function(){return useIdle_1.default}});var useIntersection_1=__webpack_require__(727);Object.defineProperty(exports,"useIntersection",{enumerable:!0,get:function(){return useIntersection_1.default}});var useInterval_1=__webpack_require__(728);Object.defineProperty(exports,"useInterval",{enumerable:!0,get:function(){return useInterval_1.default}});var useIsomorphicLayoutEffect_1=__webpack_require__(57);Object.defineProperty(exports,"useIsomorphicLayoutEffect",{enumerable:!0,get:function(){return useIsomorphicLayoutEffect_1.default}});var useKey_1=__webpack_require__(185);Object.defineProperty(exports,"useKey",{enumerable:!0,get:function(){return useKey_1.default}});var createBreakpoint_1=__webpack_require__(729);Object.defineProperty(exports,"createBreakpoint",{enumerable:!0,get:function(){return createBreakpoint_1.default}});var useKeyPress_1=__webpack_require__(311);Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function(){return useKeyPress_1.default}});var useKeyPressEvent_1=__webpack_require__(730);Object.defineProperty(exports,"useKeyPressEvent",{enumerable:!0,get:function(){return useKeyPressEvent_1.default}});var useLatest_1=__webpack_require__(312);Object.defineProperty(exports,"useLatest",{enumerable:!0,get:function(){return useLatest_1.default}});var useLifecycles_1=__webpack_require__(313);Object.defineProperty(exports,"useLifecycles",{enumerable:!0,get:function(){return useLifecycles_1.default}});var useList_1=__webpack_require__(314);Object.defineProperty(exports,"useList",{enumerable:!0,get:function(){return useList_1.default}});var useLocalStorage_1=__webpack_require__(731);Object.defineProperty(exports,"useLocalStorage",{enumerable:!0,get:function(){return useLocalStorage_1.default}});var useLocation_1=__webpack_require__(732);Object.defineProperty(exports,"useLocation",{enumerable:!0,get:function(){return useLocation_1.default}});var useLockBodyScroll_1=__webpack_require__(733);Object.defineProperty(exports,"useLockBodyScroll",{enumerable:!0,get:function(){return useLockBodyScroll_1.default}});var useLogger_1=__webpack_require__(734);Object.defineProperty(exports,"useLogger",{enumerable:!0,get:function(){return useLogger_1.default}});var useLongPress_1=__webpack_require__(735);Object.defineProperty(exports,"useLongPress",{enumerable:!0,get:function(){return useLongPress_1.default}});var useMap_1=__webpack_require__(736);Object.defineProperty(exports,"useMap",{enumerable:!0,get:function(){return useMap_1.default}});var useMedia_1=__webpack_require__(737);Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function(){return useMedia_1.default}});var useMediaDevices_1=__webpack_require__(738);Object.defineProperty(exports,"useMediaDevices",{enumerable:!0,get:function(){return useMediaDevices_1.default}});var useMediatedState_1=__webpack_require__(315);Object.defineProperty(exports,"useMediatedState",{enumerable:!0,get:function(){return useMediatedState_1.useMediatedState}});var useMethods_1=__webpack_require__(739);Object.defineProperty(exports,"useMethods",{enumerable:!0,get:function(){return useMethods_1.default}});var useMotion_1=__webpack_require__(740);Object.defineProperty(exports,"useMotion",{enumerable:!0,get:function(){return useMotion_1.default}});var useMount_1=__webpack_require__(190);Object.defineProperty(exports,"useMount",{enumerable:!0,get:function(){return useMount_1.default}});var useMountedState_1=__webpack_require__(65);Object.defineProperty(exports,"useMountedState",{enumerable:!0,get:function(){return useMountedState_1.default}});var useMouse_1=__webpack_require__(316);Object.defineProperty(exports,"useMouse",{enumerable:!0,get:function(){return useMouse_1.default}});var useMouseHovered_1=__webpack_require__(741);Object.defineProperty(exports,"useMouseHovered",{enumerable:!0,get:function(){return useMouseHovered_1.default}});var useMouseWheel_1=__webpack_require__(742);Object.defineProperty(exports,"useMouseWheel",{enumerable:!0,get:function(){return useMouseWheel_1.default}});var useNetwork_1=__webpack_require__(743);Object.defineProperty(exports,"useNetwork",{enumerable:!0,get:function(){return useNetwork_1.default}});var useNumber_1=__webpack_require__(744);Object.defineProperty(exports,"useNumber",{enumerable:!0,get:function(){return useNumber_1.default}});var useObservable_1=__webpack_require__(745);Object.defineProperty(exports,"useObservable",{enumerable:!0,get:function(){return useObservable_1.default}});var useOrientation_1=__webpack_require__(746);Object.defineProperty(exports,"useOrientation",{enumerable:!0,get:function(){return useOrientation_1.default}});var usePageLeave_1=__webpack_require__(747);Object.defineProperty(exports,"usePageLeave",{enumerable:!0,get:function(){return usePageLeave_1.default}});var usePermission_1=__webpack_require__(748);Object.defineProperty(exports,"usePermission",{enumerable:!0,get:function(){return usePermission_1.default}});var usePrevious_1=__webpack_require__(749);Object.defineProperty(exports,"usePrevious",{enumerable:!0,get:function(){return usePrevious_1.default}});var usePreviousDistinct_1=__webpack_require__(750);Object.defineProperty(exports,"usePreviousDistinct",{enumerable:!0,get:function(){return usePreviousDistinct_1.default}});var usePromise_1=__webpack_require__(751);Object.defineProperty(exports,"usePromise",{enumerable:!0,get:function(){return usePromise_1.default}});var useQueue_1=__webpack_require__(752);Object.defineProperty(exports,"useQueue",{enumerable:!0,get:function(){return useQueue_1.default}});var useRaf_1=__webpack_require__(317);Object.defineProperty(exports,"useRaf",{enumerable:!0,get:function(){return useRaf_1.default}});var useRafLoop_1=__webpack_require__(753);Object.defineProperty(exports,"useRafLoop",{enumerable:!0,get:function(){return useRafLoop_1.default}});var useRafState_1=__webpack_require__(99);Object.defineProperty(exports,"useRafState",{enumerable:!0,get:function(){return useRafState_1.default}});var useSearchParam_1=__webpack_require__(754);Object.defineProperty(exports,"useSearchParam",{enumerable:!0,get:function(){return useSearchParam_1.default}});var useScratch_1=__webpack_require__(755);Object.defineProperty(exports,"useScratch",{enumerable:!0,get:function(){return useScratch_1.default}});var useScroll_1=__webpack_require__(761);Object.defineProperty(exports,"useScroll",{enumerable:!0,get:function(){return useScroll_1.default}});var useScrolling_1=__webpack_require__(762);Object.defineProperty(exports,"useScrolling",{enumerable:!0,get:function(){return useScrolling_1.default}});var useSessionStorage_1=__webpack_require__(763);Object.defineProperty(exports,"useSessionStorage",{enumerable:!0,get:function(){return useSessionStorage_1.default}});var useSetState_1=__webpack_require__(97);Object.defineProperty(exports,"useSetState",{enumerable:!0,get:function(){return useSetState_1.default}});var useShallowCompareEffect_1=__webpack_require__(764);Object.defineProperty(exports,"useShallowCompareEffect",{enumerable:!0,get:function(){return useShallowCompareEffect_1.default}});var useSize_1=__webpack_require__(766);Object.defineProperty(exports,"useSize",{enumerable:!0,get:function(){return useSize_1.default}});var useSlider_1=__webpack_require__(767);Object.defineProperty(exports,"useSlider",{enumerable:!0,get:function(){return useSlider_1.default}});var useSpeech_1=__webpack_require__(768);Object.defineProperty(exports,"useSpeech",{enumerable:!0,get:function(){return useSpeech_1.default}});var useStartTyping_1=__webpack_require__(769);Object.defineProperty(exports,"useStartTyping",{enumerable:!0,get:function(){return useStartTyping_1.default}});var useStateWithHistory_1=__webpack_require__(770);Object.defineProperty(exports,"useStateWithHistory",{enumerable:!0,get:function(){return useStateWithHistory_1.useStateWithHistory}});var useStateList_1=__webpack_require__(771);Object.defineProperty(exports,"useStateList",{enumerable:!0,get:function(){return useStateList_1.default}});var useThrottle_1=__webpack_require__(772);Object.defineProperty(exports,"useThrottle",{enumerable:!0,get:function(){return useThrottle_1.default}});var useThrottleFn_1=__webpack_require__(773);Object.defineProperty(exports,"useThrottleFn",{enumerable:!0,get:function(){return useThrottleFn_1.default}});var useTimeout_1=__webpack_require__(774);Object.defineProperty(exports,"useTimeout",{enumerable:!0,get:function(){return useTimeout_1.default}});var useTimeoutFn_1=__webpack_require__(189);Object.defineProperty(exports,"useTimeoutFn",{enumerable:!0,get:function(){return useTimeoutFn_1.default}});var useTitle_1=__webpack_require__(775);Object.defineProperty(exports,"useTitle",{enumerable:!0,get:function(){return useTitle_1.default}});var useToggle_1=__webpack_require__(307);Object.defineProperty(exports,"useToggle",{enumerable:!0,get:function(){return useToggle_1.default}});var useTween_1=__webpack_require__(776);Object.defineProperty(exports,"useTween",{enumerable:!0,get:function(){return useTween_1.default}});var useUnmount_1=__webpack_require__(134);Object.defineProperty(exports,"useUnmount",{enumerable:!0,get:function(){return useUnmount_1.default}});var useUnmountPromise_1=__webpack_require__(778);Object.defineProperty(exports,"useUnmountPromise",{enumerable:!0,get:function(){return useUnmountPromise_1.default}});var useUpdate_1=__webpack_require__(56);Object.defineProperty(exports,"useUpdate",{enumerable:!0,get:function(){return useUpdate_1.default}});var useUpdateEffect_1=__webpack_require__(95);Object.defineProperty(exports,"useUpdateEffect",{enumerable:!0,get:function(){return useUpdateEffect_1.default}});var useUpsert_1=__webpack_require__(779);Object.defineProperty(exports,"useUpsert",{enumerable:!0,get:function(){return useUpsert_1.default}});var useVibrate_1=__webpack_require__(780);Object.defineProperty(exports,"useVibrate",{enumerable:!0,get:function(){return useVibrate_1.default}});var useVideo_1=__webpack_require__(781);Object.defineProperty(exports,"useVideo",{enumerable:!0,get:function(){return useVideo_1.default}});var useStateValidator_1=__webpack_require__(319);Object.defineProperty(exports,"useStateValidator",{enumerable:!0,get:function(){return useStateValidator_1.default}});var useScrollbarWidth_1=__webpack_require__(782);Object.defineProperty(exports,"useScrollbarWidth",{enumerable:!0,get:function(){return useScrollbarWidth_1.useScrollbarWidth}});var useMultiStateValidator_1=__webpack_require__(784);Object.defineProperty(exports,"useMultiStateValidator",{enumerable:!0,get:function(){return useMultiStateValidator_1.useMultiStateValidator}});var useWindowScroll_1=__webpack_require__(785);Object.defineProperty(exports,"useWindowScroll",{enumerable:!0,get:function(){return useWindowScroll_1.default}});var useWindowSize_1=__webpack_require__(786);Object.defineProperty(exports,"useWindowSize",{enumerable:!0,get:function(){return useWindowSize_1.default}});var useMeasure_1=__webpack_require__(787);Object.defineProperty(exports,"useMeasure",{enumerable:!0,get:function(){return useMeasure_1.default}});var useRendersCount_1=__webpack_require__(320);Object.defineProperty(exports,"useRendersCount",{enumerable:!0,get:function(){return useRendersCount_1.useRendersCount}});var useFirstMountState_1=__webpack_require__(96);Object.defineProperty(exports,"useFirstMountState",{enumerable:!0,get:function(){return useFirstMountState_1.useFirstMountState}});var useSet_1=__webpack_require__(788);Object.defineProperty(exports,"useSet",{enumerable:!0,get:function(){return useSet_1.default}});var createGlobalState_1=__webpack_require__(789);Object.defineProperty(exports,"createGlobalState",{enumerable:!0,get:function(){return createGlobalState_1.createGlobalState}});var useHash_1=__webpack_require__(790);Object.defineProperty(exports,"useHash",{enumerable:!0,get:function(){return useHash_1.useHash}})},,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isDeepEqual=exports.off=exports.on=exports.isClient=void 0;var react_1=__webpack_require__(1).__importDefault(__webpack_require__(676));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}),exports.useMediatedState=void 0;var react_1=__webpack_require__(0);exports.useMediatedState=function useMediatedState(mediator,initialState){var mediatorFn=react_1.useRef(mediator),_a=react_1.useState(initialState),state=_a[0],setMediatedState=_a[1];return[state,react_1.useCallback((function(newState){2===mediatorFn.current.length?mediatorFn.current(newState,setMediatedState):setMediatedState(mediatorFn.current(newState))}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(99));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 tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57));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 useIsomorphicLayoutEffect_1.default((function(){var raf,timerStop,start,onFrame=function(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout((function(){timerStop=setTimeout((function(){cancelAnimationFrame(raf),set(1)}),ms),start=Date.now(),loop()}),delay);return function(){clearTimeout(timerStop),clearTimeout(timerDelay),cancelAnimationFrame(raf)}}),[ms,delay]),elapsed}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function 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}),exports.useRendersCount=void 0;var react_1=__webpack_require__(0);exports.useRendersCount=function useRendersCount(){return++react_1.useRef(0).current}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useToggle
\n
React state hook that tracks value of a boolean.
\n
useBoolean is an alias for useToggle.
\n
Usage
\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDrop and useDropArea
\n
Triggers on file, link drop and copy-paste.
\n
useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.
\n
Usage
\n
useDrop:
\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n
useDropArea:
\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(1).__importStar(__webpack_require__(0));exports.default=function(_a){var children=_a.children;return window.location===window.parent.location?children:React.createElement("p",null,"This story should be"," ",React.createElement("a",{href:window.location.href,target:"_blank",title:"Open in new tab"},"opened in a new tab"),".")}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
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__(334),__webpack_require__(492),module.exports=__webpack_require__(493)},,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(25),__webpack_require__(26),__webpack_require__(23),__webpack_require__(27),__webpack_require__(31);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(3),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(332);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__(673);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(494)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./comps/UseKey.story.tsx":674,"./createBreakpoint.story.tsx":678,"./createGlobalState.story.tsx":792,"./createMemo.story.tsx":794,"./createReducer.story.tsx":796,"./createReducerContext.story.tsx":800,"./createStateContext.story.tsx":802,"./useAsync.story.tsx":804,"./useAsyncFn.story.tsx":806,"./useAsyncRetry.story.tsx":808,"./useAudio.story.tsx":810,"./useBattery.story.tsx":812,"./useBeforeUnload.story.tsx":814,"./useBoolean.story.tsx":816,"./useClickAway.story.tsx":817,"./useCookie.story.tsx":831,"./useCopyToClipboard.story.tsx":833,"./useCounter.story.tsx":835,"./useCss.story.tsx":837,"./useCustomCompareEffect.story.tsx":839,"./useDebounce.story.tsx":841,"./useDeepCompareEffect.story.tsx":843,"./useDefault.story.tsx":845,"./useDrop.story.tsx":847,"./useDropArea.story.tsx":848,"./useEffectOnce.story.tsx":849,"./useEnsuredForwardedRef.story.tsx":852,"./useError.story.tsx":854,"./useEvent.story.tsx":856,"./useFavicon.story.tsx":858,"./useFirstMountState.story.tsx":860,"./useFullscreen.story.tsx":862,"./useGeolocation.story.tsx":864,"./useGetSet.story.tsx":866,"./useGetSetState.story.tsx":868,"./useHarmonicIntervalFn.story.tsx":870,"./useHash.story.tsx":872,"./useHover.story.tsx":874,"./useHoverDirty.story.tsx":875,"./useIdle.story.tsx":876,"./useIntersection.story.tsx":878,"./useInterval.story.tsx":880,"./useIsomorphicLayoutEffect.story.tsx":882,"./useKey.story.tsx":884,"./useKeyPress.story.tsx":886,"./useKeyPressEvent.story.tsx":888,"./useKeyboardJs.story.tsx":890,"./useLatest.story.tsx":893,"./useLifecycles.story.tsx":895,"./useList.story.tsx":897,"./useLocalStorage.story.tsx":899,"./useLocation.story.tsx":901,"./useLockBodyScroll.story.tsx":903,"./useLogger.story.tsx":910,"./useLongPress.story.tsx":912,"./useMap.story.tsx":914,"./useMeasure.story.tsx":916,"./useMedia.story.tsx":918,"./useMediaDevices.story.tsx":920,"./useMediatedState.story.tsx":922,"./useMethods.story.tsx":924,"./useMotion.story.tsx":926,"./useMount.story.tsx":928,"./useMountedState.story.tsx":930,"./useMouse.story.tsx":932,"./useMouseHovered.story.tsx":933,"./useMouseWheel.story.tsx":934,"./useMultiStateValidator.story.tsx":936,"./useNetwork.story.tsx":938,"./useObservable.story.tsx":940,"./useOrientation.story.tsx":942,"./usePageLeave.story.tsx":944,"./usePermission.story.tsx":946,"./usePrevious.story.tsx":948,"./usePreviousDistinct.story.tsx":950,"./usePromise.story.tsx":952,"./useQueue.story.tsx":954,"./useRaf.story.tsx":956,"./useRafLoop.story.tsx":958,"./useRafState.story.tsx":960,"./useRendersCount.story.tsx":962,"./useScratch.story.tsx":964,"./useScroll.story.tsx":966,"./useScrollbarWidth.story.tsx":967,"./useScrolling.story.tsx":968,"./useSearchParam.story.tsx":970,"./useSessionStorage.story.tsx":972,"./useSet.story.tsx":974,"./useSetState.story.tsx":976,"./useShallowCompareEffect.story.tsx":978,"./useSize.story.tsx":980,"./useSlider.story.tsx":982,"./useSpeech.story.tsx":984,"./useSpring.story.tsx":986,"./useStartTyping.story.tsx":990,"./useStateList.story.tsx":992,"./useStateValidator.story.tsx":994,"./useStateWithHistory.story.tsx":996,"./useThrottle.story.tsx":998,"./useThrottleFn.story.tsx":999,"./useTimeout.story.tsx":1e3,"./useTimeoutFn.story.tsx":1002,"./useTitle.story.tsx":1004,"./useToggle.story.tsx":1006,"./useTween.story.tsx":1007,"./useUnmount.story.tsx":1009,"./useUpdate.story.tsx":1011,"./useUpdateEffect.story.tsx":1013,"./useUpsert.story.tsx":1015,"./useVibrate.story.tsx":1017,"./useVideo.story.tsx":1019,"./useWindowScroll.story.tsx":1021,"./useWindowSize.story.tsx":1023};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=673},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),UseKey_1=tslib_1.__importDefault(__webpack_require__(675));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__(1),useKey_1=tslib_1.__importDefault(__webpack_require__(185)),UseKey=tslib_1.__importDefault(__webpack_require__(677)).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}}},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useBreakpointA=src_1.createBreakpoint(),useBreakpointB=src_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__(791)})})).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__(0);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__(1),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(311)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(14),noop=function(){};exports.default=function(key,initialValue,options){if(!util_1.isClient)return[initialValue,noop,noop];if(!key)throw new Error("useLocalStorage key may not be falsy");var deserializer=options?options.raw?function(value){return value}:options.deserializer:JSON.parse,_a=react_1.useState((function(){try{var serializer=options?options.raw?String:options.serializer:JSON.stringify,localStorageValue=localStorage.getItem(key);return null!==localStorageValue?deserializer(localStorageValue):(initialValue&&localStorage.setItem(key,serializer(initialValue)),initialValue)}catch(_a){return initialValue}})),state=_a[0],setState=_a[1],set=react_1.useCallback((function(valOrFunc){try{var newState="function"==typeof valOrFunc?valOrFunc(state):valOrFunc;if(void 0===newState)return;var value=void 0;value=options?options.raw?"string"==typeof newState?newState:JSON.stringify(newState):options.serializer?options.serializer(newState):JSON.stringify(newState):JSON.stringify(newState),localStorage.setItem(key,value),setState(deserializer(value))}catch(_a){}}),[key,setState]),remove=react_1.useCallback((function(){try{localStorage.removeItem(key),setState(void 0)}catch(_a){}}),[key,setState]);return[state,set,remove]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(14),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}),exports.getClosestBody=void 0;var react_1=__webpack_require__(0);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}function preventDefault(rawEvent){var e=rawEvent||window.event;return e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1)}exports.getClosestBody=getClosestBody;var isIosDevice="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&/iP(ad|hone|od)/.test(window.navigator.platform),bodies=new Map,doc="object"==typeof document?document:void 0,documentListenerAdded=!1;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body);var unlock=function(body){var bodyInfo=bodies.get(body);bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),isIosDevice?(body.ontouchmove=null,documentListenerAdded&&(document.removeEventListener("touchmove",preventDefault),documentListenerAdded=!1)):body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))};react_1.useEffect((function(){var body=getClosestBody(elementRef.current);body&&(locked?function(body){var bodyInfo=bodies.get(body);bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),isIosDevice?documentListenerAdded||(document.addEventListener("touchmove",preventDefault,{passive:!1}),documentListenerAdded=!0):body.style.overflow="hidden")}(body):unlock(body))}),[locked,elementRef.current]),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body)return function(){unlock(body)}}),[])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(98)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));exports.default=function(componentName){for(var rest=[],_i=1;_i1?value=1:value<0&&(value=0),reverse_1&&(value=1-value),setState({value:value}),(options.onScrub||noop)(value)}}))};return util_1.on(ref.current,"mousedown",onMouseDown_1),util_1.on(ref.current,"touchstart",onTouchStart_1),function(){util_1.off(ref.current,"mousedown",onMouseDown_1),util_1.off(ref.current,"touchstart",onTouchStart_1)}}}),[ref,options.vertical]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useMount_1=tslib_1.__importDefault(__webpack_require__(190)),useSetState_1=tslib_1.__importDefault(__webpack_require__(97)),voices="object"==typeof window&&"object"==typeof window.speechSynthesis?window.speechSynthesis.getVoices():[];exports.default=function(text,opts){void 0===opts&&(opts={});var _a=useSetState_1.default({isPlaying:!1,lang:opts.lang||"default",voice:opts.voice||voices[0],rate:opts.rate||1,pitch:opts.pitch||1,volume:opts.volume||1}),state=_a[0],setState=_a[1],uterranceRef=react_1.useRef(null);return useMount_1.default((function(){var utterance=new SpeechSynthesisUtterance(text);opts.lang&&(utterance.lang=opts.lang),opts.voice&&(utterance.voice=opts.voice),utterance.rate=opts.rate||1,utterance.pitch=opts.pitch||1,utterance.volume=opts.volume||1,utterance.onstart=function(){return setState({isPlaying:!0})},utterance.onresume=function(){return setState({isPlaying:!0})},utterance.onend=function(){return setState({isPlaying:!1})},utterance.onpause=function(){return setState({isPlaying:!1})},uterranceRef.current=utterance,window.speechSynthesis.speak(uterranceRef.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useIsomorphicLayoutEffect_1=__webpack_require__(1).__importDefault(__webpack_require__(57));exports.default=function(onStartTyping){useIsomorphicLayoutEffect_1.default((function(){var keydown=function(event){var _a,keyCode,metaKey,ctrlKey,altKey;!function(){var activeElement=document.activeElement,body=document.body;if(!activeElement)return!1;if(activeElement===body)return!1;switch(activeElement.tagName){case"INPUT":case"TEXTAREA":return!0}return activeElement.hasAttribute("contenteditable")}()&&(keyCode=(_a=event).keyCode,metaKey=_a.metaKey,ctrlKey=_a.ctrlKey,altKey=_a.altKey,!(metaKey||ctrlKey||altKey)&&(keyCode>=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useStateWithHistory=void 0;var react_1=__webpack_require__(0),useFirstMountState_1=__webpack_require__(96),resolveHookState_1=__webpack_require__(133);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__(1),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(65)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(56)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));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__(1),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(134));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__(1),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(134));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__(1),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(189)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(56));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),DEFAULT_USE_TITLE_OPTIONS={restoreOnUnmount:!1};exports.default="undefined"!=typeof document?function useTitle(title,options){void 0===options&&(options=DEFAULT_USE_TITLE_OPTIONS);var prevTitleRef=react_1.useRef(document.title);document.title=title,react_1.useEffect((function(){return options&&options.restoreOnUnmount?function(){document.title=prevTitleRef.current}:void 0}),[])}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),ts_easing_1=__webpack_require__(777),useRaf_1=tslib_1.__importDefault(__webpack_require__(317));exports.default=function(easingName,ms,delay){return void 0===easingName&&(easingName="inCirc"),void 0===ms&&(ms=200),void 0===delay&&(delay=0),(0,ts_easing_1.easing[easingName])(useRaf_1.default(ms,delay))}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(){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__(1),useList_1=tslib_1.__importDefault(__webpack_require__(314));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__(0),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__(1).__importDefault(__webpack_require__(306)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useScrollbarWidth=void 0;var scrollbar_width_1=__webpack_require__(783),react_1=__webpack_require__(0);exports.useScrollbarWidth=function useScrollbarWidth(){var _a=react_1.useState(scrollbar_width_1.scrollbarWidth()),sbw=_a[0],setSbw=_a[1];return react_1.useEffect((function(){if(void 0===sbw){var raf=requestAnimationFrame((function(){setSbw(scrollbar_width_1.scrollbarWidth())}));return function(){return cancelAnimationFrame(raf)}}}),[]),sbw}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useMultiStateValidator=void 0;var react_1=__webpack_require__(0);exports.useMultiStateValidator=function useMultiStateValidator(states,validator,initialValidity){if(void 0===initialValidity&&(initialValidity=[void 0]),"object"!=typeof states)throw new Error("states expected to be an object or array, got "+typeof states);var validatorInner=react_1.useRef(validator),statesInner=react_1.useRef(states);validatorInner.current=validator,statesInner.current=states;var _a=react_1.useState(initialValidity),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(statesInner.current,setValidity):setValidity(validatorInner.current(statesInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),Object.values(states)),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),util_1=__webpack_require__(14),useRafState_1=tslib_1.__importDefault(__webpack_require__(99));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__(1),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(99)),util_1=__webpack_require__(14);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__(1),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57)),util_1=__webpack_require__(14),defaultState={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};exports.default=util_1.isClient&&window.ResizeObserver?function(){var _a=react_1.useState(null),element=_a[0],ref=_a[1],_b=react_1.useState(defaultState),rect=_b[0],setRect=_b[1],observer=react_1.useMemo((function(){return new window.ResizeObserver((function(entries){if(entries[0]){var _a=entries[0].contentRect,x=_a.x,y=_a.y,width=_a.width,height=_a.height,top=_a.top,left=_a.left,bottom=_a.bottom,right=_a.right;setRect({x:x,y:y,width:width,height:height,top:top,left:left,bottom:bottom,right:right})}}))}),[]);return useIsomorphicLayoutEffect_1.default((function(){if(element)return observer.observe(element),function(){observer.disconnect()}}),[element]),[ref,rect]}:function(){return[function(){},defaultState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0);exports.default=function(initialSet){void 0===initialSet&&(initialSet=new Set);var _a=react_1.useState(initialSet),set=_a[0],setSet=_a[1],stableActions=react_1.useMemo((function(){return{add:function(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})))}))},toggle:function(item){return setSet((function(prevSet){return prevSet.has(item)?new Set(Array.from(prevSet).filter((function(i){return i!==item}))):new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},reset:function(){return setSet(initialSet)}}}),[setSet]),utils=tslib_1.__assign({has:react_1.useCallback((function(item){return set.has(item)}),[set])},stableActions);return[set,utils]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createGlobalState=void 0;var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(98)),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57));function createGlobalState(initialState){var store={state:initialState,setState:function(state){store.state=state,store.setters.forEach((function(setter){return setter(store.state)}))},setters:[]};return function(){var _a=react_1.useState(store.state),globalState=_a[0],stateSetter=_a[1];return useEffectOnce_1.default((function(){return function(){store.setters=store.setters.filter((function(setter){return setter!==stateSetter}))}})),useIsomorphicLayoutEffect_1.default((function(){store.setters.includes(stateSetter)||store.setters.push(stateSetter)})),[globalState,store.setState]}}exports.createGlobalState=createGlobalState,exports.default=createGlobalState},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useHash=void 0;var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useLifecycles_1=tslib_1.__importDefault(__webpack_require__(313));exports.useHash=function(){var _a=react_1.useState((function(){return window.location.hash})),hash=_a[0],setHash=_a[1],onHashChange=react_1.useCallback((function(){setHash(window.location.hash)}),[]);useLifecycles_1.default((function(){window.addEventListener("hashchange",onHashChange)}),(function(){window.removeEventListener("hashchange",onHashChange)}));var _setHash=react_1.useCallback((function(newHash){newHash!==hash&&(window.location.hash=newHash)}),[hash]);return[hash,_setHash]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createBreakpoint
\n
Usage
\n
use default breakpoint
\n
laptopL: 1440, laptop: 1024, tablet: 768
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n
use custom breakpoint
\n
XL: 1280, L: 768, S: 350
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useGlobalValue=src_1.createGlobalState(0),CompA=function(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function(){return setValue(value+1)}},"+")},CompB=function(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function(){return setValue(value-1)}},"-")},Demo=function(){var value=useGlobalValue()[0];return react_2.default.createElement("div",null,react_2.default.createElement("p",null,value),react_2.default.createElement(CompA,null),react_2.default.createElement(CompB,null))};react_1.storiesOf("State|createGlobalState",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(793)})})).add("Demo",(function(){return react_2.default.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='
useGlobalState
\n
A React hook which creates a globally shared state.
\n
Usage
\n
const useGlobalValue = createGlobalState<number>(0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_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__(795)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),redux_logger_1=tslib_1.__importDefault(__webpack_require__(797)),redux_thunk_1=tslib_1.__importDefault(__webpack_require__(798)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useThunkReducer=src_1.createReducer(redux_thunk_1.default,redux_logger_1.default);function init(initialCount){return{count:initialCount}}function reducer(state,action){switch(action.type){case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};case"reset":return init(action.payload);default:throw new Error}}var Demo=function(_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__(799)})})).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 middleware.
\n
Usage
\n
An example with redux-thunk and redux-logger.
\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n
Reference
\n
const useMiddlewareReducer = createReducer(...middlewares);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),_a=src_1.createReducerContext((function(state,action){switch(action){case"increment":return state+1;case"decrement":return state-1;default:throw new Error}}),0),useSharedCounter=_a[0],SharedCounterProvider=_a[1],ComponentA=function(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component A  ",React.createElement("button",{type:"button",onClick:function(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function(){return dispatch("increment")}},"+"))},ComponentB=function(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component B  ",React.createElement("button",{type:"button",onClick:function(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function(){return dispatch("increment")}},"+"))},Demo=function(){return React.createElement(SharedCounterProvider,null,React.createElement("p",null,"Those two counters share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State|createReducerContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(801)})})).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='
createReducerContext
\n
Factory for react context hooks that will behave just like React's useReducer except the state will be shared among all components in the provider.
\n
This allows you to have a shared state that any component can update easily.
\n
Usage
\n
An example with two counters that shared the same value.
\n
import { createReducerContext } from 'react-use';\n\ntype Action = 'increment' | 'decrement';\n\nconst reducer = (state: number, action: Action) => {\n  switch (action) {\n    case 'increment':\n      return state + 1;\n    case 'decrement':\n      return state - 1;\n    default:\n      throw new Error();\n  }\n};\n\nconst [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);\n\nconst ComponentA = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component A &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component B &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedCounterProvider>\n      <p>Those two counters share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedCounterProvider>\n  );\n};
\n
Reference
\n
const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial state for each Provider\n  <SharedStateProvider initialState={overrideInitialState}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, dispatch] = useSharedState();\n\n  // ...\n}
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),_a=src_1.createStateContext(""),useSharedText=_a[0],SharedTextProvider=_a[1],ComponentA=function(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component A:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function(ev){return setText(ev.currentTarget.value)}}))},ComponentB=function(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component B:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function(ev){return setText(ev.currentTarget.value)}}))},Demo=function(){return React.createElement(SharedTextProvider,null,React.createElement("p",null,"Those two fields share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State|createStateContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(803)})})).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='
createStateContext
\n
Factory for react context hooks that will behave just like React's useState except the state will be shared among all components in the provider.
\n
This allows you to have a shared state that any component can update easily.
\n
Usage
\n
An example with a shared text between two input fields.
\n
import { createStateContext } from 'react-use';\n\nconst [useSharedText, SharedTextProvider] = createStateContext('');\n\nconst ComponentA = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component A:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component B:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedTextProvider>\n      <p>Those two fields share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedTextProvider>\n  );\n};
\n
Reference
\n
const [useSharedState, SharedStateProvider] = createStateContext(initialValue);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial value for each Provider\n  <SharedStateProvider initialValue={overrideInitialValue}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, setSharedState] = useSharedState();\n\n  // ...\n}
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=src_1.useAsync((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(805)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){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__(807)})})).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<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=src_1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){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__(809)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useAudio({src:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",autoPlay:!0}),audio=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,audio,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){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__(811)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=src_1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(813)})})).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__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),DemoBool=function(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return src_1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))},DemoFunc=function(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1],dirtyFn=react_2.useCallback((function(){return dirty}),[dirty]);return src_1.useBeforeUnload(dirtyFn,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(815)})})).add("Demo (boolean)",(function(){return react_2.default.createElement(DemoBool,null)})).add("Demo (function)",(function(){return react_2.default.createElement(DemoFunc,null)}))}).call(this,__webpack_require__(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
Boolean check
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n
Function check
\n
Note: Since every dirtyFn change registers a new callback, you should use\nrefs\nif your test value changes often.
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  const dirtyFn = useCallback(() => {\n    return dirty;\n  }, [dirty]);\n  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useBoolean(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:function(){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__(321)})})).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__(1),addon_actions_1=__webpack_require__(191),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return src_1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(830)})})).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__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useCookie("my-cookie"),value=_a[0],updateCookie=_a[1],deleteCookie=_a[2],_b=react_2.useState(1),counter=_b[0],setCounter=_b[1];react_2.useEffect((function(){deleteCookie()}),[]);return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"Value: ",value),react_2.default.createElement("button",{onClick:function(){updateCookie("my-awesome-cookie-"+counter),setCounter((function(c){return c+1}))}},"Update Cookie"),react_2.default.createElement("br",null),react_2.default.createElement("button",{onClick:deleteCookie},"Delete Cookie"))};react_1.storiesOf("Side effects|useCookie",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(832)})})).add("Demo",(function(){return react_2.default.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='
useCookie
\n
React hook that returns the current value of a cookie, a callback to update the cookie\nand a callback to delete the cookie.
\n
Usage
\n
import { useCookie } from "react-use";\n\nconst Demo = () => {\n  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");\n  const [counter, setCounter] = useState(1);\n\n  useEffect(() => {\n    deleteCookie();\n  }, []);\n\n  const updateCookieHandler = () => {\n    updateCookie(`my-awesome-cookie-${counter}`);\n    setCounter(c => c + 1);\n  };\n\n  return (\n    <div>\n      <p>Value: {value}</p>\n      <button onClick={updateCookieHandler}>Update Cookie</button>\n      <br />\n      <button onClick={deleteCookie}>Delete Cookie</button>\n    </div>\n  );\n};
\n
Reference
\n
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_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__(834)})})).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 — caught error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useCounter(1),min=_b[0],_c=_b[1],incMin=_c.inc,decMin=_c.dec,_d=src_1.useCounter(10),max=_d[0],_e=_d[1],incMax=_e.inc,decMax=_e.dec,_f=src_1.useCounter(initialValue,max,min),value=_f[0],_g=_f[1],inc=_g.inc,dec=_g.dec,set=_g.set,reset=_g.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){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__(836)})})).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, min: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var className=src_1.useCss({color:"red",border:"1px solid red","&:hover":{color:"blue"}});return React.createElement("div",{className:className},"hello")};react_1.storiesOf("UI|useCss",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(838)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),util_1=__webpack_require__(14),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=src_1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal=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__(997)})})).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  capacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • capacity - amount of history entries held by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equal [ initialState ].  \nInitial state will not be pushed to initial history.
    If entries amount is greater than capacity parameter it won't be modified on init but will be trimmed on the next call to setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. It will have the same ref all the time so be careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState to be invoked and component re-render.\nIf first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState to be invoked and component re-render.
      If last element of history is reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_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__(331)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useThrottleFn((function(defaultValue){return defaultValue}),2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_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__(331)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useTimeout(ms),isReady=_a[0],cancel=_a[1];return React.createElement("div",null,isReady()?"I'm reloaded after timeout":"I will be reloaded after "+ms/1e3+"s",!1===isReady()?React.createElement("button",{onClick:cancel},"Cancel"):"")}var Demo=function(){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__(1001)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_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=src_1.useTimeoutFn((function fn(){setState("called at "+Date.now())}),5e3),isReady=_b[0],cancel=_b[1],reset=_b[2],cancelButtonClick=react_2.useCallback((function(){!1===isReady()?(cancel(),setState("cancelled")):(reset(),setState("Not called yet"))}),[]),readyState=isReady();return React.createElement("div",null,React.createElement("div",null,null!==readyState?"Function will be called in 5 seconds":"Timer cancelled"),React.createElement("button",{onClick:cancelButtonClick}," ",!1===readyState?"cancel":"restart"," timeout"),React.createElement("br",null),React.createElement("div",null,"Function state: ",!1===readyState?"Pending":readyState?"Called":"Cancelled"),React.createElement("div",null,state))};react_1.storiesOf("Animation|useTimeoutFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1003)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(325)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return src_1.useTitle("Hello world!"),React.createElement(NewTabStory_1.default,null,'Title should be "Hello world!"')};react_1.storiesOf("Side effects|useTitle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1005)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useToggle(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:toggle},"Toggle"),React.createElement("button",{onClick:function(){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__(321)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var t=src_1.useTween();return React.createElement("div",null,"Tween: ",t)};react_1.storiesOf("Animation|useTween",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1008)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return src_1.useUnmount((function(){return alert("UNMOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useUnmount()")," hook can be used to perform side-effects when component unmounts. This component will alert you when it is un-mounted.")};react_1.storiesOf("Lifecycle|useUnmount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1010)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var update=src_1.useUpdate();return React.createElement(React.Fragment,null,React.createElement("div",null,"Time: ",Date.now()),React.createElement("button",{onClick:update},"Update"))};react_1.storiesOf("Animation|useUpdate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1012)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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 src_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__(1014)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function(){var _a=src_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__(1016)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useToggle(!1),vibrating=_a[0],toggleVibrating=_a[1];return src_1.useVibrate(vibrating,[300,100,200,100,1e3,300]),React.createElement("div",null,React.createElement("button",{onClick:toggleVibrating},vibrating?"Stop":"Vibrate"))};react_1.storiesOf("UI|useVibrate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1018)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useVideo(React.createElement("video",{src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",autoPlay:!0})),video=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,video,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){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__(1020)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useWindowScroll(),x=_a.x,y=_a.y;return React.createElement("div",{style:{width:"200vw",height:"200vh"}},React.createElement("div",{style:{position:"fixed",left:0,right:0}},React.createElement("div",null,"x: ",x),React.createElement("div",null,"y: ",y)))};react_1.storiesOf("Sensors/useWindowScroll",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1022)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useWindowSize(),width=_a.width,height=_a.height;return React.createElement("div",null,React.createElement("div",null,"width: ",width),React.createElement("div",null,"height: ",height))};react_1.storiesOf("Sensors|useWindowSize",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1024)})})).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'}],[[333,1,2]]]);
+//# sourceMappingURL=main.046f3e9486f27bc49c21.bundle.js.map
\ No newline at end of file
diff --git a/main.046f3e9486f27bc49c21.bundle.js.map b/main.046f3e9486f27bc49c21.bundle.js.map
new file mode 100644
index 00000000..9c33884f
--- /dev/null
+++ b/main.046f3e9486f27bc49c21.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.046f3e9486f27bc49c21.bundle.js","sources":["webpack:///main.046f3e9486f27bc49c21.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/main.17d3186abe5348197895.bundle.js b/main.17d3186abe5348197895.bundle.js
deleted file mode 100644
index c18cb4a5..00000000
--- a/main.17d3186abe5348197895.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__(1).__importStar(__webpack_require__(0)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(688);exports.createMemo=createMemo_1.default;var createReducerContext_1=__webpack_require__(689);exports.createReducerContext=createReducerContext_1.default;var createReducer_1=__webpack_require__(690);exports.createReducer=createReducer_1.default;var createStateContext_1=__webpack_require__(691);exports.createStateContext=createStateContext_1.default;var useAsync_1=__webpack_require__(305);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(187);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(692);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(693);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(695);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(696);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(697);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(698);exports.useClickAway=useClickAway_1.default;var useCookie_1=__webpack_require__(699);exports.useCookie=useCookie_1.default;var useCopyToClipboard_1=__webpack_require__(701);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(308);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(704);exports.useCss=useCss_1.default;var useCustomCompareEffect_1=__webpack_require__(188);exports.useCustomCompareEffect=useCustomCompareEffect_1.default;var useDebounce_1=__webpack_require__(710);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(711);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(712);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(713);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(714);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(98);exports.useEffectOnce=useEffectOnce_1.default;var useEnsuredForwardedRef_1=__webpack_require__(715);exports.useEnsuredForwardedRef=useEnsuredForwardedRef_1.default,exports.ensuredForwardRef=useEnsuredForwardedRef_1.ensuredForwardRef;var useEvent_1=__webpack_require__(304);exports.useEvent=useEvent_1.default;var useError_1=__webpack_require__(716);exports.useError=useError_1.default;var useFavicon_1=__webpack_require__(717);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(718);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(720);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(309);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(721);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(722);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(724);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(310);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(725);exports.useIdle=useIdle_1.default;var useIntersection_1=__webpack_require__(727);exports.useIntersection=useIntersection_1.default;var useInterval_1=__webpack_require__(728);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(57);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(185);exports.useKey=useKey_1.default;var createBreakpoint_1=__webpack_require__(729);exports.createBreakpoint=createBreakpoint_1.default;var useKeyPress_1=__webpack_require__(311);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(730);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLatest_1=__webpack_require__(312);exports.useLatest=useLatest_1.default;var useLifecycles_1=__webpack_require__(313);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(314);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(731);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(732);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(733);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(734);exports.useLogger=useLogger_1.default;var useLongPress_1=__webpack_require__(735);exports.useLongPress=useLongPress_1.default;var useMap_1=__webpack_require__(736);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(737);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(738);exports.useMediaDevices=useMediaDevices_1.default;var useMediatedState_1=__webpack_require__(315);exports.useMediatedState=useMediatedState_1.useMediatedState;var useMethods_1=__webpack_require__(739);exports.useMethods=useMethods_1.default;var useMotion_1=__webpack_require__(740);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(190);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(65);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(316);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(741);exports.useMouseHovered=useMouseHovered_1.default;var useMouseWheel_1=__webpack_require__(742);exports.useMouseWheel=useMouseWheel_1.default;var useNetwork_1=__webpack_require__(743);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(744);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(745);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(746);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(747);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(748);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(749);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(750);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(751);exports.usePromise=usePromise_1.default;var useQueue_1=__webpack_require__(752);exports.useQueue=useQueue_1.default;var useRaf_1=__webpack_require__(317);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(753);exports.useRafLoop=useRafLoop_1.default;var useRafState_1=__webpack_require__(99);exports.useRafState=useRafState_1.default;var useSearchParam_1=__webpack_require__(754);exports.useSearchParam=useSearchParam_1.default;var useScratch_1=__webpack_require__(755);exports.useScratch=useScratch_1.default;var useScroll_1=__webpack_require__(761);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(762);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(763);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(97);exports.useSetState=useSetState_1.default;var useShallowCompareEffect_1=__webpack_require__(764);exports.useShallowCompareEffect=useShallowCompareEffect_1.default;var useSize_1=__webpack_require__(766);exports.useSize=useSize_1.default;var useSlider_1=__webpack_require__(767);exports.useSlider=useSlider_1.default;var useSpeech_1=__webpack_require__(768);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(769);exports.useStartTyping=useStartTyping_1.default;var useStateWithHistory_1=__webpack_require__(770);exports.useStateWithHistory=useStateWithHistory_1.useStateWithHistory;var useStateList_1=__webpack_require__(771);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(772);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(773);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(774);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(189);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(775);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(307);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(776);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(134);exports.useUnmount=useUnmount_1.default;var useUnmountPromise_1=__webpack_require__(778);exports.useUnmountPromise=useUnmountPromise_1.default;var useUpdate_1=__webpack_require__(56);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(95);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(779);exports.useUpsert=useUpsert_1.default;var useVibrate_1=__webpack_require__(780);exports.useVibrate=useVibrate_1.default;var useVideo_1=__webpack_require__(781);exports.useVideo=useVideo_1.default;var useStateValidator_1=__webpack_require__(319);exports.useStateValidator=useStateValidator_1.default;var useScrollbarWidth_1=__webpack_require__(782);exports.useScrollbarWidth=useScrollbarWidth_1.useScrollbarWidth;var useMultiStateValidator_1=__webpack_require__(784);exports.useMultiStateValidator=useMultiStateValidator_1.useMultiStateValidator;var useWindowScroll_1=__webpack_require__(785);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(786);exports.useWindowSize=useWindowSize_1.default;var useMeasure_1=__webpack_require__(787);exports.useMeasure=useMeasure_1.default;var useRendersCount_1=__webpack_require__(320);exports.useRendersCount=useRendersCount_1.useRendersCount;var useFirstMountState_1=__webpack_require__(96);exports.useFirstMountState=useFirstMountState_1.useFirstMountState;var useSet_1=__webpack_require__(788);exports.useSet=useSet_1.default;var createGlobalState_1=__webpack_require__(789);exports.createGlobalState=createGlobalState_1.createGlobalState;var useHash_1=__webpack_require__(790);exports.useHash=useHash_1.useHash},,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1).__importDefault(__webpack_require__(676));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__(0);exports.useMediatedState=function useMediatedState(mediator,initialState){var mediatorFn=react_1.useRef(mediator),_a=react_1.useState(initialState),state=_a[0],setMediatedState=_a[1];return[state,react_1.useCallback((function(newState){2===mediatorFn.current.length?mediatorFn.current(newState,setMediatedState):setMediatedState(mediatorFn.current(newState))}),[state])]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(99));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 tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57));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 useIsomorphicLayoutEffect_1.default((function(){var raf,timerStop,start,onFrame=function(){var time=Math.min(1,(Date.now()-start)/ms);set(time),loop()},loop=function(){raf=requestAnimationFrame(onFrame)},timerDelay=setTimeout((function(){timerStop=setTimeout((function(){cancelAnimationFrame(raf),set(1)}),ms),start=Date.now(),loop()}),delay);return function(){clearTimeout(timerStop),clearTimeout(timerDelay),cancelAnimationFrame(raf)}}),[ms,delay]),elapsed}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function 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__(0);exports.useRendersCount=function useRendersCount(){return++react_1.useRef(0).current}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useToggle
\n
React state hook that tracks value of a boolean.
\n
useBoolean is an alias for useToggle.
\n
Usage
\n
import {useToggle} from 'react-use';\n\nconst Demo = () => {\n  const [on, toggle] = useToggle(true);\n\n  return (\n    <div>\n      <div>{on ? 'ON' : 'OFF'}</div>\n      <button onClick={toggle}>Toggle</button>\n      <button onClick={() => toggle(true)}>set ON</button>\n      <button onClick={() => toggle(false)}>set OFF</button>\n    </div>\n  );\n};
\n'},,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDrop and useDropArea
\n
Triggers on file, link drop and copy-paste.
\n
useDrop tracks events for the whole page, useDropArea tracks drop events\nfor a specific element.
\n
Usage
\n
useDrop:
\n
import {useDrop} from 'react-use';\n\nconst Demo = () => {\n  const state = useDrop({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div>\n      Drop something on the page.\n    </div>\n  );\n};
\n
useDropArea:
\n
import {useDropArea} from 'react-use';\n\nconst Demo = () => {\n  const [bond, state] = useDropArea({\n    onFiles: files => console.log('files', files),\n    onUri: uri => console.log('uri', uri),\n    onText: text => console.log('text', text),\n  });\n\n  return (\n    <div {...bond}>\n      Drop something here.\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=__webpack_require__(1).__importStar(__webpack_require__(0));exports.default=function(_a){var children=_a.children;return window.location===window.parent.location?children:React.createElement("p",null,"This story should be"," ",React.createElement("a",{href:window.location.href,target:"_blank",title:"Open in new tab"},"opened in a new tab"),".")}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
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__(334),__webpack_require__(492),module.exports=__webpack_require__(493)},,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports){},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__(25),__webpack_require__(26),__webpack_require__(23),__webpack_require__(27),__webpack_require__(31);var _storybook_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(3),_storybook_addon_options__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(332);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__(673);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_5__.configure)((function(){req.keys().forEach((function(filename){return req(filename)}))}),module)}.call(this,__webpack_require__(494)(module))},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){var map={"./comps/UseKey.story.tsx":674,"./createBreakpoint.story.tsx":678,"./createGlobalState.story.tsx":792,"./createMemo.story.tsx":794,"./createReducer.story.tsx":796,"./createReducerContext.story.tsx":800,"./createStateContext.story.tsx":802,"./useAsync.story.tsx":804,"./useAsyncFn.story.tsx":806,"./useAsyncRetry.story.tsx":808,"./useAudio.story.tsx":810,"./useBattery.story.tsx":812,"./useBeforeUnload.story.tsx":814,"./useBoolean.story.tsx":816,"./useClickAway.story.tsx":817,"./useCookie.story.tsx":831,"./useCopyToClipboard.story.tsx":833,"./useCounter.story.tsx":835,"./useCss.story.tsx":837,"./useCustomCompareEffect.story.tsx":839,"./useDebounce.story.tsx":841,"./useDeepCompareEffect.story.tsx":843,"./useDefault.story.tsx":845,"./useDrop.story.tsx":847,"./useDropArea.story.tsx":848,"./useEffectOnce.story.tsx":849,"./useEnsuredForwardedRef.story.tsx":852,"./useError.story.tsx":854,"./useEvent.story.tsx":856,"./useFavicon.story.tsx":858,"./useFirstMountState.story.tsx":860,"./useFullscreen.story.tsx":862,"./useGeolocation.story.tsx":864,"./useGetSet.story.tsx":866,"./useGetSetState.story.tsx":868,"./useHarmonicIntervalFn.story.tsx":870,"./useHash.story.tsx":872,"./useHover.story.tsx":874,"./useHoverDirty.story.tsx":875,"./useIdle.story.tsx":876,"./useIntersection.story.tsx":878,"./useInterval.story.tsx":880,"./useIsomorphicLayoutEffect.story.tsx":882,"./useKey.story.tsx":884,"./useKeyPress.story.tsx":886,"./useKeyPressEvent.story.tsx":888,"./useKeyboardJs.story.tsx":890,"./useLatest.story.tsx":893,"./useLifecycles.story.tsx":895,"./useList.story.tsx":897,"./useLocalStorage.story.tsx":899,"./useLocation.story.tsx":901,"./useLockBodyScroll.story.tsx":903,"./useLogger.story.tsx":910,"./useLongPress.story.tsx":912,"./useMap.story.tsx":914,"./useMeasure.story.tsx":916,"./useMedia.story.tsx":918,"./useMediaDevices.story.tsx":920,"./useMediatedState.story.tsx":922,"./useMethods.story.tsx":924,"./useMotion.story.tsx":926,"./useMount.story.tsx":928,"./useMountedState.story.tsx":930,"./useMouse.story.tsx":932,"./useMouseHovered.story.tsx":933,"./useMouseWheel.story.tsx":934,"./useMultiStateValidator.story.tsx":936,"./useNetwork.story.tsx":938,"./useObservable.story.tsx":940,"./useOrientation.story.tsx":942,"./usePageLeave.story.tsx":944,"./usePermission.story.tsx":946,"./usePrevious.story.tsx":948,"./usePreviousDistinct.story.tsx":950,"./usePromise.story.tsx":952,"./useQueue.story.tsx":954,"./useRaf.story.tsx":956,"./useRafLoop.story.tsx":958,"./useRafState.story.tsx":960,"./useRendersCount.story.tsx":962,"./useScratch.story.tsx":964,"./useScroll.story.tsx":966,"./useScrollbarWidth.story.tsx":967,"./useScrolling.story.tsx":968,"./useSearchParam.story.tsx":970,"./useSessionStorage.story.tsx":972,"./useSet.story.tsx":974,"./useSetState.story.tsx":976,"./useShallowCompareEffect.story.tsx":978,"./useSize.story.tsx":980,"./useSlider.story.tsx":982,"./useSpeech.story.tsx":984,"./useSpring.story.tsx":986,"./useStartTyping.story.tsx":990,"./useStateList.story.tsx":992,"./useStateValidator.story.tsx":994,"./useStateWithHistory.story.tsx":996,"./useThrottle.story.tsx":998,"./useThrottleFn.story.tsx":999,"./useTimeout.story.tsx":1e3,"./useTimeoutFn.story.tsx":1002,"./useTitle.story.tsx":1004,"./useToggle.story.tsx":1006,"./useTween.story.tsx":1007,"./useUnmount.story.tsx":1009,"./useUpdate.story.tsx":1011,"./useUpdateEffect.story.tsx":1013,"./useUpsert.story.tsx":1015,"./useVibrate.story.tsx":1017,"./useVideo.story.tsx":1019,"./useWindowScroll.story.tsx":1021,"./useWindowSize.story.tsx":1023};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=673},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),UseKey_1=tslib_1.__importDefault(__webpack_require__(675));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__(1),useKey_1=tslib_1.__importDefault(__webpack_require__(185)),UseKey=tslib_1.__importDefault(__webpack_require__(677)).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}}},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useBreakpointA=src_1.createBreakpoint(),useBreakpointB=src_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__(791)})})).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__(0);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__(1),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(311)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(14),noop=function(){};exports.default=function(key,initialValue,options){if(!util_1.isClient)return[initialValue,noop,noop];if(!key)throw new Error("useLocalStorage key may not be falsy");var deserializer=options?options.raw?function(value){return value}:options.deserializer:JSON.parse,_a=react_1.useState((function(){try{var serializer=options?options.raw?String:options.serializer:JSON.stringify,localStorageValue=localStorage.getItem(key);return null!==localStorageValue?deserializer(localStorageValue):(initialValue&&localStorage.setItem(key,serializer(initialValue)),initialValue)}catch(_a){return initialValue}})),state=_a[0],setState=_a[1],set=react_1.useCallback((function(valOrFunc){try{var newState="function"==typeof valOrFunc?valOrFunc(state):valOrFunc;if(void 0===newState)return;var value=void 0;value=options?options.raw?"string"==typeof newState?newState:JSON.stringify(newState):options.serializer?options.serializer(newState):JSON.stringify(newState):JSON.stringify(newState),localStorage.setItem(key,value),setState(deserializer(value))}catch(_a){}}),[key,setState]),remove=react_1.useCallback((function(){try{localStorage.removeItem(key),setState(void 0)}catch(_a){}}),[key,setState]);return[state,set,remove]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),util_1=__webpack_require__(14),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__(0);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}function preventDefault(rawEvent){var e=rawEvent||window.event;return e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1)}exports.getClosestBody=getClosestBody;var isIosDevice="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&/iP(ad|hone|od)/.test(window.navigator.platform),bodies=new Map,doc="object"==typeof document?document:void 0,documentListenerAdded=!1;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body);var unlock=function(body){var bodyInfo=bodies.get(body);bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),isIosDevice?(body.ontouchmove=null,documentListenerAdded&&(document.removeEventListener("touchmove",preventDefault),documentListenerAdded=!1)):body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))};react_1.useEffect((function(){var body=getClosestBody(elementRef.current);body&&(locked?function(body){var bodyInfo=bodies.get(body);bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),isIosDevice?documentListenerAdded||(document.addEventListener("touchmove",preventDefault,{passive:!1}),documentListenerAdded=!0):body.style.overflow="hidden")}(body):unlock(body))}),[locked,elementRef.current]),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body)return function(){unlock(body)}}),[])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(98)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));exports.default=function(componentName){for(var rest=[],_i=1;_i1?value=1:value<0&&(value=0),reverse_1&&(value=1-value),setState({value:value}),(options.onScrub||noop)(value)}}))};return util_1.on(ref.current,"mousedown",onMouseDown_1),util_1.on(ref.current,"touchstart",onTouchStart_1),function(){util_1.off(ref.current,"mousedown",onMouseDown_1),util_1.off(ref.current,"touchstart",onTouchStart_1)}}}),[ref,options.vertical]),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useMount_1=tslib_1.__importDefault(__webpack_require__(190)),useSetState_1=tslib_1.__importDefault(__webpack_require__(97)),voices="object"==typeof window&&"object"==typeof window.speechSynthesis?window.speechSynthesis.getVoices():[];exports.default=function(text,opts){void 0===opts&&(opts={});var _a=useSetState_1.default({isPlaying:!1,lang:opts.lang||"default",voice:opts.voice||voices[0],rate:opts.rate||1,pitch:opts.pitch||1,volume:opts.volume||1}),state=_a[0],setState=_a[1],uterranceRef=react_1.useRef(null);return useMount_1.default((function(){var utterance=new SpeechSynthesisUtterance(text);opts.lang&&(utterance.lang=opts.lang),opts.voice&&(utterance.voice=opts.voice),utterance.rate=opts.rate||1,utterance.pitch=opts.pitch||1,utterance.volume=opts.volume||1,utterance.onstart=function(){return setState({isPlaying:!0})},utterance.onresume=function(){return setState({isPlaying:!0})},utterance.onend=function(){return setState({isPlaying:!1})},utterance.onpause=function(){return setState({isPlaying:!1})},uterranceRef.current=utterance,window.speechSynthesis.speak(uterranceRef.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var useIsomorphicLayoutEffect_1=__webpack_require__(1).__importDefault(__webpack_require__(57));exports.default=function(onStartTyping){useIsomorphicLayoutEffect_1.default((function(){var keydown=function(event){var _a,keyCode,metaKey,ctrlKey,altKey;!function(){var activeElement=document.activeElement,body=document.body;if(!activeElement)return!1;if(activeElement===body)return!1;switch(activeElement.tagName){case"INPUT":case"TEXTAREA":return!0}return activeElement.hasAttribute("contenteditable")}()&&(keyCode=(_a=event).keyCode,metaKey=_a.metaKey,ctrlKey=_a.ctrlKey,altKey=_a.altKey,!(metaKey||ctrlKey||altKey)&&(keyCode>=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),useFirstMountState_1=__webpack_require__(96),resolveHookState_1=__webpack_require__(133);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__(1),react_1=__webpack_require__(0),useMountedState_1=tslib_1.__importDefault(__webpack_require__(65)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(56)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(95));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__(1),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(134));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__(1),react_1=__webpack_require__(0),useUnmount_1=tslib_1.__importDefault(__webpack_require__(134));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__(1),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(189)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(56));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0),DEFAULT_USE_TITLE_OPTIONS={restoreOnUnmount:!1};exports.default="undefined"!=typeof document?function useTitle(title,options){void 0===options&&(options=DEFAULT_USE_TITLE_OPTIONS);var prevTitleRef=react_1.useRef(document.title);document.title=title,react_1.useEffect((function(){return options&&options.restoreOnUnmount?function(){document.title=prevTitleRef.current}:void 0}),[])}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),ts_easing_1=__webpack_require__(777),useRaf_1=tslib_1.__importDefault(__webpack_require__(317));exports.default=function(easingName,ms,delay){return void 0===easingName&&(easingName="inCirc"),void 0===ms&&(ms=200),void 0===delay&&(delay=0),(0,ts_easing_1.easing[easingName])(useRaf_1.default(ms,delay))}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.default=function(){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__(1),useList_1=tslib_1.__importDefault(__webpack_require__(314));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__(0),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__(1).__importDefault(__webpack_require__(306)).default("video");exports.default=useVideo},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var scrollbar_width_1=__webpack_require__(783),react_1=__webpack_require__(0);exports.useScrollbarWidth=function useScrollbarWidth(){var _a=react_1.useState(scrollbar_width_1.scrollbarWidth()),sbw=_a[0],setSbw=_a[1];return react_1.useEffect((function(){if(void 0===sbw){var raf=requestAnimationFrame((function(){setSbw(scrollbar_width_1.scrollbarWidth())}));return function(){return cancelAnimationFrame(raf)}}}),[]),sbw}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(0);exports.useMultiStateValidator=function useMultiStateValidator(states,validator,initialValidity){if(void 0===initialValidity&&(initialValidity=[void 0]),"object"!=typeof states)throw new Error("states expected to be an object or array, got "+typeof states);var validatorInner=react_1.useRef(validator),statesInner=react_1.useRef(states);validatorInner.current=validator,statesInner.current=states;var _a=react_1.useState(initialValidity),validity=_a[0],setValidity=_a[1],validate=react_1.useCallback((function(){validatorInner.current.length>=2?validatorInner.current(statesInner.current,setValidity):setValidity(validatorInner.current(statesInner.current))}),[setValidity]);return react_1.useEffect((function(){validate()}),Object.values(states)),[validity,validate]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),util_1=__webpack_require__(14),useRafState_1=tslib_1.__importDefault(__webpack_require__(99));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__(1),react_1=__webpack_require__(0),useRafState_1=tslib_1.__importDefault(__webpack_require__(99)),util_1=__webpack_require__(14);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__(1),react_1=__webpack_require__(0),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57)),util_1=__webpack_require__(14),defaultState={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};exports.default=util_1.isClient&&window.ResizeObserver?function(){var _a=react_1.useState(null),element=_a[0],ref=_a[1],_b=react_1.useState(defaultState),rect=_b[0],setRect=_b[1],observer=react_1.useMemo((function(){return new window.ResizeObserver((function(entries){if(entries[0]){var _a=entries[0].contentRect,x=_a.x,y=_a.y,width=_a.width,height=_a.height,top=_a.top,left=_a.left,bottom=_a.bottom,right=_a.right;setRect({x:x,y:y,width:width,height:height,top:top,left:left,bottom:bottom,right:right})}}))}),[]);return useIsomorphicLayoutEffect_1.default((function(){if(element)return observer.observe(element),function(){observer.disconnect()}}),[element]),[ref,rect]}:function(){return[function(){},defaultState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0);exports.default=function(initialSet){void 0===initialSet&&(initialSet=new Set);var _a=react_1.useState(initialSet),set=_a[0],setSet=_a[1],stableActions=react_1.useMemo((function(){return{add:function(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})))}))},toggle:function(item){return setSet((function(prevSet){return prevSet.has(item)?new Set(Array.from(prevSet).filter((function(i){return i!==item}))):new Set(tslib_1.__spreadArrays(Array.from(prevSet),[item]))}))},reset:function(){return setSet(initialSet)}}}),[setSet]),utils=tslib_1.__assign({has:react_1.useCallback((function(item){return set.has(item)}),[set])},stableActions);return[set,utils]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(98)),useIsomorphicLayoutEffect_1=tslib_1.__importDefault(__webpack_require__(57));function createGlobalState(initialState){var store={state:initialState,setState:function(state){store.state=state,store.setters.forEach((function(setter){return setter(store.state)}))},setters:[]};return function(){var _a=react_1.useState(store.state),globalState=_a[0],stateSetter=_a[1];return useEffectOnce_1.default((function(){return function(){store.setters=store.setters.filter((function(setter){return setter!==stateSetter}))}})),useIsomorphicLayoutEffect_1.default((function(){store.setters.includes(stateSetter)||store.setters.push(stateSetter)})),[globalState,store.setState]}}exports.createGlobalState=createGlobalState,exports.default=createGlobalState},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(0),useLifecycles_1=tslib_1.__importDefault(__webpack_require__(313));exports.useHash=function(){var _a=react_1.useState((function(){return window.location.hash})),hash=_a[0],setHash=_a[1],onHashChange=react_1.useCallback((function(){setHash(window.location.hash)}),[]);useLifecycles_1.default((function(){window.addEventListener("hashchange",onHashChange)}),(function(){window.removeEventListener("hashchange",onHashChange)}));var _setHash=react_1.useCallback((function(newHash){newHash!==hash&&(window.location.hash=newHash)}),[hash]);return[hash,_setHash]}},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
createBreakpoint
\n
Usage
\n
use default breakpoint
\n
laptopL: 1440, laptop: 1024, tablet: 768
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint();\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;\n  else if (breakpoint == "laptop") return <div> This is Laptop</div>;\n  else if (breakpoint == "tablet") return <div> This is Tablet</div>;\n  else return <div> Too small!</div>;\n};
\n
use custom breakpoint
\n
XL: 1280, L: 768, S: 350
\n
import React from "react";\nimport { createBreakpoint } from "react-use";\n\nconst useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });\n\nconst Demo = () => {\n  const breakpoint = useBreakpoint();\n\n  if (breakpoint === "XL") return <div> XL </div>;\n  else if (breakpoint == "L") return <div> LoL</div>;\n  else if (breakpoint == "S") return <div> Sexyy</div>;\n  else return <div> Wth</div>;\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importDefault(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useGlobalValue=src_1.createGlobalState(0),CompA=function(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function(){return setValue(value+1)}},"+")},CompB=function(){var _a=useGlobalValue(),value=_a[0],setValue=_a[1];return react_2.default.createElement("button",{onClick:function(){return setValue(value-1)}},"-")},Demo=function(){var value=useGlobalValue()[0];return react_2.default.createElement("div",null,react_2.default.createElement("p",null,value),react_2.default.createElement(CompA,null),react_2.default.createElement(CompB,null))};react_1.storiesOf("State|createGlobalState",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(793)})})).add("Demo",(function(){return react_2.default.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='
useGlobalState
\n
A React hook which creates a globally shared state.
\n
Usage
\n
const useGlobalValue = createGlobalState<number>(0);\n\nconst CompA: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value + 1)}>+</button>;\n};\n\nconst CompB: FC = () => {\n  const [value, setValue] = useGlobalValue();\n\n  return <button onClick={() => setValue(value - 1)}>-</button>;\n};\n\nconst Demo: FC = () => {\n  const [value] = useGlobalValue();\n  return (\n    <div>\n      <p>{value}</p>\n      <CompA />\n      <CompB />\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_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__(795)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),redux_logger_1=tslib_1.__importDefault(__webpack_require__(797)),redux_thunk_1=tslib_1.__importDefault(__webpack_require__(798)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),useThunkReducer=src_1.createReducer(redux_thunk_1.default,redux_logger_1.default);function init(initialCount){return{count:initialCount}}function reducer(state,action){switch(action.type){case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};case"reset":return init(action.payload);default:throw new Error}}var Demo=function(_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__(799)})})).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 middleware.
\n
Usage
\n
An example with redux-thunk and redux-logger.
\n
import { createReducer } from 'react-use';\nimport logger from 'redux-logger';\nimport thunk from 'redux-thunk';\n\nconst useThunkReducer = createReducer(thunk, logger);\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    case 'reset':\n      return { count: action.payload };\n    default:\n      throw new Error();\n  }\n}\n\nconst Demo = ({ initialCount = 1 }) => {\n  // Action creator to increment count, wait a second and then reset\n  const addAndReset = React.useCallback(() => {\n    return dispatch => {\n      dispatch({ type: 'increment' });\n\n      setTimeout(() => {\n        dispatch({ type: 'reset', payload: initialCount });\n      }, 1000);\n    };\n  }, [initialCount]);\n\n  const [state, dispatch] = useThunkReducer(reducer, initialCount);\n\n  return (\n    <div>\n      <p>count: {state.count}</p>\n      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>\n      <button\n        onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}\n      >\n        Reset\n      </button>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n};
\n
Reference
\n
const useMiddlewareReducer = createReducer(...middlewares);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),_a=src_1.createReducerContext((function(state,action){switch(action){case"increment":return state+1;case"decrement":return state-1;default:throw new Error}}),0),useSharedCounter=_a[0],SharedCounterProvider=_a[1],ComponentA=function(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component A  ",React.createElement("button",{type:"button",onClick:function(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function(){return dispatch("increment")}},"+"))},ComponentB=function(){var _a=useSharedCounter(),count=_a[0],dispatch=_a[1];return React.createElement("p",null,"Component B  ",React.createElement("button",{type:"button",onClick:function(){return dispatch("decrement")}},"-")," ",count," ",React.createElement("button",{type:"button",onClick:function(){return dispatch("increment")}},"+"))},Demo=function(){return React.createElement(SharedCounterProvider,null,React.createElement("p",null,"Those two counters share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State|createReducerContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(801)})})).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='
createReducerContext
\n
Factory for react context hooks that will behave just like React's useReducer except the state will be shared among all components in the provider.
\n
This allows you to have a shared state that any component can update easily.
\n
Usage
\n
An example with two counters that shared the same value.
\n
import { createReducerContext } from 'react-use';\n\ntype Action = 'increment' | 'decrement';\n\nconst reducer = (state: number, action: Action) => {\n  switch (action) {\n    case 'increment':\n      return state + 1;\n    case 'decrement':\n      return state - 1;\n    default:\n      throw new Error();\n  }\n};\n\nconst [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);\n\nconst ComponentA = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component A &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [count, dispatch] = useSharedCounter();\n  return (\n    <p>\n      Component B &nbsp;\n      <button type="button" onClick={() => dispatch('decrement')}>\n        -\n      </button>\n      &nbsp;{count}&nbsp;\n      <button type="button" onClick={() => dispatch('increment')}>\n        +\n      </button>\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedCounterProvider>\n      <p>Those two counters share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedCounterProvider>\n  );\n};
\n
Reference
\n
const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial state for each Provider\n  <SharedStateProvider initialState={overrideInitialState}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, dispatch] = useSharedState();\n\n  // ...\n}
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),_a=src_1.createStateContext(""),useSharedText=_a[0],SharedTextProvider=_a[1],ComponentA=function(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component A:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function(ev){return setText(ev.currentTarget.value)}}))},ComponentB=function(){var _a=useSharedText(),text=_a[0],setText=_a[1];return React.createElement("p",null,"Component B:",React.createElement("br",null),React.createElement("input",{type:"text",value:text,onInput:function(ev){return setText(ev.currentTarget.value)}}))},Demo=function(){return React.createElement(SharedTextProvider,null,React.createElement("p",null,"Those two fields share the same value."),React.createElement(ComponentA,null),React.createElement(ComponentB,null))};react_1.storiesOf("State|createStateContext",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(803)})})).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='
createStateContext
\n
Factory for react context hooks that will behave just like React's useState except the state will be shared among all components in the provider.
\n
This allows you to have a shared state that any component can update easily.
\n
Usage
\n
An example with a shared text between two input fields.
\n
import { createStateContext } from 'react-use';\n\nconst [useSharedText, SharedTextProvider] = createStateContext('');\n\nconst ComponentA = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component A:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst ComponentB = () => {\n  const [text, setText] = useSharedText();\n  return (\n    <p>\n      Component B:\n      <br />\n      <input type="text" value={text} onInput={ev => setText(ev.target.value)} />\n    </p>\n  );\n};\n\nconst Demo = () => {\n  return (\n    <SharedTextProvider>\n      <p>Those two fields share the same value.</p>\n      <ComponentA />\n      <ComponentB />\n    </SharedTextProvider>\n  );\n};
\n
Reference
\n
const [useSharedState, SharedStateProvider] = createStateContext(initialValue);\n\n// In wrapper\nconst Wrapper = ({ children }) => (\n  // You can override the initial value for each Provider\n  <SharedStateProvider initialValue={overrideInitialValue}>\n    { children }\n  </SharedStateProvider>\n)\n\n// In a component\nconst Component = () => {\n  const [sharedState, setSharedState] = useSharedState();\n\n  // ...\n}
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=src_1.useAsync((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(805)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){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__(807)})})).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<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),addon_knobs_1=__webpack_require__(64),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=src_1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){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__(809)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useAudio({src:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",autoPlay:!0}),audio=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,audio,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){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__(811)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=src_1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(813)})})).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__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),DemoBool=function(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return src_1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))},DemoFunc=function(){var _a=src_1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1],dirtyFn=react_2.useCallback((function(){return dirty}),[dirty]);return src_1.useBeforeUnload(dirtyFn,"You have unsaved changes, are you sure?"),react_2.default.createElement("div",null,dirty&&react_2.default.createElement("p",null,"Try to reload or close tab"),react_2.default.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(815)})})).add("Demo (boolean)",(function(){return react_2.default.createElement(DemoBool,null)})).add("Demo (function)",(function(){return react_2.default.createElement(DemoFunc,null)}))}).call(this,__webpack_require__(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
Boolean check
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n
Function check
\n
Note: Since every dirtyFn change registers a new callback, you should use\nrefs\nif your test value changes often.
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  const dirtyFn = useCallback(() => {\n    return dirty;\n  }, [dirty]);\n  useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useBoolean(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:function(){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__(321)})})).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__(1),addon_actions_1=__webpack_require__(191),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return src_1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(830)})})).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__(1),react_1=__webpack_require__(3),react_2=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useCookie("my-cookie"),value=_a[0],updateCookie=_a[1],deleteCookie=_a[2],_b=react_2.useState(1),counter=_b[0],setCounter=_b[1];react_2.useEffect((function(){deleteCookie()}),[]);return react_2.default.createElement("div",null,react_2.default.createElement("p",null,"Value: ",value),react_2.default.createElement("button",{onClick:function(){updateCookie("my-awesome-cookie-"+counter),setCounter((function(c){return c+1}))}},"Update Cookie"),react_2.default.createElement("br",null),react_2.default.createElement("button",{onClick:deleteCookie},"Delete Cookie"))};react_1.storiesOf("Side effects|useCookie",module).add("Docs",(function(){return react_2.default.createElement(ShowDocs_1.default,{md:__webpack_require__(832)})})).add("Demo",(function(){return react_2.default.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='
useCookie
\n
React hook that returns the current value of a cookie, a callback to update the cookie\nand a callback to delete the cookie.
\n
Usage
\n
import { useCookie } from "react-use";\n\nconst Demo = () => {\n  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");\n  const [counter, setCounter] = useState(1);\n\n  useEffect(() => {\n    deleteCookie();\n  }, []);\n\n  const updateCookieHandler = () => {\n    updateCookie(`my-awesome-cookie-${counter}`);\n    setCounter(c => c + 1);\n  };\n\n  return (\n    <div>\n      <p>Value: {value}</p>\n      <button onClick={updateCookieHandler}>Update Cookie</button>\n      <br />\n      <button onClick={deleteCookie}>Delete Cookie</button>\n    </div>\n  );\n};
\n
Reference
\n
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_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__(834)})})).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 — caught error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useCounter(1),min=_b[0],_c=_b[1],incMin=_c.inc,decMin=_c.dec,_d=src_1.useCounter(10),max=_d[0],_e=_d[1],incMax=_e.inc,decMax=_e.dec,_f=src_1.useCounter(initialValue,max,min),value=_f[0],_g=_f[1],inc=_g.inc,dec=_g.dec,set=_g.set,reset=_g.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){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__(836)})})).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, min: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var className=src_1.useCss({color:"red",border:"1px solid red","&:hover":{color:"blue"}});return React.createElement("div",{className:className},"hello")};react_1.storiesOf("UI|useCss",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(838)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),util_1=__webpack_require__(14),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=src_1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal=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__(997)})})).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  capacity?: number = 10,\n  initialHistory?: S\n);
\n
    \n
  • state, setState and initialState are exactly the same with native React's useState hook;
    • \n
  • capacity - amount of history entries held by storage;
    • \n
  • initialHistory - if defined it will be used as initial history value, otherwise history will equal [ initialState ].  \nInitial state will not be pushed to initial history.
    If entries amount is greater than capacity parameter it won't be modified on init but will be trimmed on the next call to setState;
    • \n
  • stateHistory - an object containing history state:
      \n
    • history: S[] - an array holding history entries. It will have the same ref all the time so be careful with that one!;
      • \n
    • position: number - current position index in history;
      • \n
    • capacity: number = 10 - maximum amount of history entries;
      • \n
    • back: (amount?: number) => void - go back in state history, it will cause setState to be invoked and component re-render.\nIf first element of history reached, the call will have no effect;
      • \n
    • forward: (amount?: number) => void - go forward in state history, it will cause setState to be invoked and component re-render.
      If last element of history is reached, the call will have no effect;
      • \n
    • go: (position: number) => void - go to arbitrary position in history.
      In case position is non-negative ot will count elements from beginning.\nNegative position will cause elements counting from the end, so go(-2) equals go(history.length - 1);
      • \n
    \n
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useThrottle(value,2e3),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_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__(331)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useThrottleFn((function(defaultValue){return defaultValue}),2e3,[value]),_b=React.useState(throttledValue),lastThrottledValue=_b[0],setLastThrottledValue=_b[1],_c=src_1.useCounter(),count=_c[0],inc=_c[1].inc;return React.useEffect((function(){lastThrottledValue!==throttledValue&&(setLastThrottledValue(throttledValue),inc())})),React.createElement("div",{style:{width:300,margin:"40px auto"}},React.createElement("input",{type:"text",value:value,placeholder:"Throttled input",style:{width:"100%"},onChange:function(_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__(331)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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=src_1.useTimeout(ms),isReady=_a[0],cancel=_a[1];return React.createElement("div",null,isReady()?"I'm reloaded after timeout":"I will be reloaded after "+ms/1e3+"s",!1===isReady()?React.createElement("button",{onClick:cancel},"Cancel"):"")}var Demo=function(){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__(1001)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),react_2=__webpack_require__(0),src_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=src_1.useTimeoutFn((function fn(){setState("called at "+Date.now())}),5e3),isReady=_b[0],cancel=_b[1],reset=_b[2],cancelButtonClick=react_2.useCallback((function(){!1===isReady()?(cancel(),setState("cancelled")):(reset(),setState("Not called yet"))}),[]),readyState=isReady();return React.createElement("div",null,React.createElement("div",null,null!==readyState?"Function will be called in 5 seconds":"Timer cancelled"),React.createElement("button",{onClick:cancelButtonClick}," ",!1===readyState?"cancel":"restart"," timeout"),React.createElement("br",null),React.createElement("div",null,"Function state: ",!1===readyState?"Pending":readyState?"Called":"Cancelled"),React.createElement("div",null,state))};react_1.storiesOf("Animation|useTimeoutFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1003)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),NewTabStory_1=tslib_1.__importDefault(__webpack_require__(325)),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return src_1.useTitle("Hello world!"),React.createElement(NewTabStory_1.default,null,'Title should be "Hello world!"')};react_1.storiesOf("Side effects|useTitle",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1005)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useToggle(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:toggle},"Toggle"),React.createElement("button",{onClick:function(){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__(321)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var t=src_1.useTween();return React.createElement("div",null,"Tween: ",t)};react_1.storiesOf("Animation|useTween",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1008)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){return src_1.useUnmount((function(){return alert("UNMOUNTED")})),React.createElement("div",null,React.createElement("code",null,"useUnmount()")," hook can be used to perform side-effects when component unmounts. This component will alert you when it is un-mounted.")};react_1.storiesOf("Lifecycle|useUnmount",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1010)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var update=src_1.useUpdate();return React.createElement(React.Fragment,null,React.createElement("div",null,"Time: ",Date.now()),React.createElement("button",{onClick:update},"Update"))};react_1.storiesOf("Animation|useUpdate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1012)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_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 src_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__(1014)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),initialItems=[{id:"1",text:"Sample"},{id:"2",text:""}],Demo=function(){var _a=src_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__(1016)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useToggle(!1),vibrating=_a[0],toggleVibrating=_a[1];return src_1.useVibrate(vibrating,[300,100,200,100,1e3,300]),React.createElement("div",null,React.createElement("button",{onClick:toggleVibrating},vibrating?"Stop":"Vibrate"))};react_1.storiesOf("UI|useVibrate",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1018)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useVideo(React.createElement("video",{src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",autoPlay:!0})),video=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,video,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){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__(1020)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useWindowScroll(),x=_a.x,y=_a.y;return React.createElement("div",{style:{width:"200vw",height:"200vh"}},React.createElement("div",{style:{position:"fixed",left:0,right:0}},React.createElement("div",null,"x: ",x),React.createElement("div",null,"y: ",y)))};react_1.storiesOf("Sensors/useWindowScroll",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1022)})})).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__(1),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(0)),src_1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=src_1.useWindowSize(),width=_a.width,height=_a.height;return React.createElement("div",null,React.createElement("div",null,"width: ",width),React.createElement("div",null,"height: ",height))};react_1.storiesOf("Sensors|useWindowSize",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(1024)})})).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'}],[[333,1,2]]]);
-//# sourceMappingURL=main.17d3186abe5348197895.bundle.js.map
\ No newline at end of file
diff --git a/main.17d3186abe5348197895.bundle.js.map b/main.17d3186abe5348197895.bundle.js.map
deleted file mode 100644
index 7b78f782..00000000
--- a/main.17d3186abe5348197895.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.17d3186abe5348197895.bundle.js","sources":["webpack:///main.17d3186abe5348197895.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.17d3186abe5348197895.bundle.js b/runtime~main.046f3e9486f27bc49c21.bundle.js
similarity index 97%
rename from runtime~main.17d3186abe5348197895.bundle.js
rename to runtime~main.046f3e9486f27bc49c21.bundle.js
index 69a69da0..6668843b 100644
--- a/runtime~main.17d3186abe5348197895.bundle.js
+++ b/runtime~main.046f3e9486f27bc49c21.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=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}function __param(paramIndex,decorator){return function(target,key){decorator(target,key,paramIndex)}}function __metadata(metadataKey,metadataValue){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(metadataKey,metadataValue)}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){result.done?resolve(result.value):function adopt(value){return value instanceof P?value:new P((function(resolve){resolve(value)}))}(result.value).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}function __generator(thisArg,body){var f,y,t,g,_={label:0,sent:function(){if(1&t[0])throw t[1];return t[1]},trys:[],ops:[]};return g={next:verb(0),throw:verb(1),return:verb(2)},"function"==typeof Symbol&&(g[Symbol.iterator]=function(){return this}),g;function verb(n){return function(v){return function step(op){if(f)throw new TypeError("Generator is already executing.");for(;_;)try{if(f=1,y&&(t=2&op[0]?y.return:op[0]?y.throw||((t=y.return)&&t.call(y),0):y.next)&&!(t=t.call(y,op[1])).done)return t;switch(y=0,t&&(op=[2&op[0],t.value]),op[0]){case 0:case 1:t=op;break;case 4:return _.label++,{value:op[1],done:!1};case 5:_.label++,y=op[1],op=[0];continue;case 7:op=_.ops.pop(),_.trys.pop();continue;default:if(!(t=(t=_.trys).length>0&&t[t.length-1])&&(6===op[0]||2===op[0])){_=0;continue}if(3===op[0]&&(!t||op[1]>t[0]&&op[1]=o.length&&(o=void 0),{value:o&&o[i++],done:!o}}};throw new TypeError(s?"Object is not iterable.":"Symbol.iterator is not defined.")}function __read(o,n){var m="function"==typeof Symbol&&o[Symbol.iterator];if(!m)return o;var r,e,i=m.call(o),ar=[];try{for(;(void 0===n||n-- >0)&&!(r=i.next()).done;)ar.push(r.value)}catch(error){e={error:error}}finally{try{r&&!r.done&&(m=i.return)&&m.call(i)}finally{if(e)throw e.error}}return ar}function __spread(){for(var ar=[],i=0;i1||resume(n,v)}))})}function resume(n,v){try{!function step(r){r.value instanceof __await?Promise.resolve(r.value.v).then(fulfill,reject):settle(q[0][2],r)}(g[n](v))}catch(e){settle(q[0][3],e)}}function fulfill(value){resume("next",value)}function reject(value){resume("throw",value)}function settle(f,v){f(v),q.shift(),q.length&&resume(q[0][0],q[0][1])}}function __asyncDelegator(o){var i,p;return i={},verb("next"),verb("throw",(function(e){throw e})),verb("return"),i[Symbol.iterator]=function(){return this},i;function verb(n,f){i[n]=o[n]?function(v){return(p=!p)?{value:__await(o[n](v)),done:"return"===n}:f?f(v):v}:f}}function __asyncValues(o){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var i,m=o[Symbol.asyncIterator];return m?m.call(o):(o=__values(o),i={},verb("next"),verb("throw"),verb("return"),i[Symbol.asyncIterator]=function(){return this},i);function verb(n){i[n]=o[n]&&function(v){return new Promise((function(resolve,reject){(function settle(resolve,reject,d,v){Promise.resolve(v).then((function(v){resolve({value:v,done:d})}),reject)})(resolve,reject,(v=o[n](v)).done,v.value)}))}}}function __makeTemplateObject(cooked,raw){return Object.defineProperty?Object.defineProperty(cooked,"raw",{value:raw}):cooked.raw=raw,cooked}var __setModuleDefault=Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v};function __importStar(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result}function __importDefault(mod){return mod&&mod.__esModule?mod:{default:mod}}function __classPrivateFieldGet(receiver,privateMap){if(!privateMap.has(receiver))throw new TypeError("attempted to get private field on non-instance");return privateMap.get(receiver)}function __classPrivateFieldSet(receiver,privateMap,value){if(!privateMap.has(receiver))throw new TypeError("attempted to set private field on non-instance");return privateMap.set(receiver,value),value}},function(module,exports){module.exports=function(module){return module.webpackPolyfill||(module.deprecate=function(){},module.paths=[],module.children||(module.children=[]),Object.defineProperty(module,"loaded",{enumerable:!0,get:function(){return module.l}}),Object.defineProperty(module,"id",{enumerable:!0,get:function(){return module.i}}),module.webpackPolyfill=1),module}},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"storiesOf",{enumerable:!0,get:function get(){return _preview.storiesOf}}),Object.defineProperty(exports,"setAddon",{enumerable:!0,get:function get(){return _preview.setAddon}}),Object.defineProperty(exports,"addDecorator",{enumerable:!0,get:function get(){return _preview.addDecorator}}),Object.defineProperty(exports,"DecoratorFn",{enumerable:!0,get:function get(){return _preview.DecoratorFn}}),Object.defineProperty(exports,"addParameters",{enumerable:!0,get:function get(){return _preview.addParameters}}),Object.defineProperty(exports,"configure",{enumerable:!0,get:function get(){return _preview.configure}}),Object.defineProperty(exports,"getStorybook",{enumerable:!0,get:function get(){return _preview.getStorybook}}),Object.defineProperty(exports,"raw",{enumerable:!0,get:function get(){return _preview.raw}}),Object.defineProperty(exports,"forceReRender",{enumerable:!0,get:function get(){return _preview.forceReRender}});var _preview=__webpack_require__(497);module&&module.hot&&module.hot.decline&&module.hot.decline()}).call(this,__webpack_require__(2)(module))},,,function(module,exports,__webpack_require__){var global=__webpack_require__(7),getOwnPropertyDescriptor=__webpack_require__(76).f,createNonEnumerableProperty=__webpack_require__(34),redefine=__webpack_require__(35),setGlobal=__webpack_require__(155),copyConstructorProperties=__webpack_require__(237),isForced=__webpack_require__(110);module.exports=function(options,source){var target,key,targetProperty,sourceProperty,descriptor,TARGET=options.target,GLOBAL=options.global,STATIC=options.stat;if(target=GLOBAL?global:STATIC?global[TARGET]||setGlobal(TARGET,{}):(global[TARGET]||{}).prototype)for(key in source){if(sourceProperty=source[key],targetProperty=options.noTargetGet?(descriptor=getOwnPropertyDescriptor(target,key))&&descriptor.value:target[key],!isForced(GLOBAL?key:TARGET+(STATIC?".":"#")+key,options.forced)&&void 0!==targetProperty){if(typeof sourceProperty==typeof targetProperty)continue;copyConstructorProperties(sourceProperty,targetProperty)}(options.sham||targetProperty&&targetProperty.sham)&&createNonEnumerableProperty(sourceProperty,"sham",!0),redefine(target,key,sourceProperty,options)}}},function(module,exports,__webpack_require__){(function(global){var check=function(it){return it&&it.Math==Math&&it};module.exports=check("object"==typeof globalThis&&globalThis)||check("object"==typeof window&&window)||check("object"==typeof self&&self)||check("object"==typeof global&&global)||Function("return this")()}).call(this,__webpack_require__(20))},function(module,exports,__webpack_require__){"use strict";var keys=__webpack_require__(139),hasSymbols="function"==typeof Symbol&&"symbol"==typeof Symbol("foo"),toStr=Object.prototype.toString,concat=Array.prototype.concat,origDefineProperty=Object.defineProperty,supportsDescriptors=origDefineProperty&&function(){var obj={};try{for(var _ in origDefineProperty(obj,"x",{enumerable:!1,value:obj}),obj)return!1;return obj.x===obj}catch(e){return!1}}(),defineProperty=function(object,name,value,predicate){var fn;name in object&&("function"!=typeof(fn=predicate)||"[object Function]"!==toStr.call(fn)||!predicate())||(supportsDescriptors?origDefineProperty(object,name,{configurable:!0,enumerable:!1,value:value,writable:!0}):object[name]=value)},defineProperties=function(object,map){var predicates=arguments.length>2?arguments[2]:{},props=keys(map);hasSymbols&&(props=concat.call(props,Object.getOwnPropertySymbols(map)));for(var i=0;i1&&"boolean"!=typeof allowMissing)throw new TypeError('"allowMissing" argument must be a boolean');for(var parts=stringToPath(name),value=getBaseIntrinsic("%"+(parts.length>0?parts[0]:"")+"%",allowMissing),i=1;i=parts.length){var desc=$gOPD(value,parts[i]);value=desc?desc.get||desc.value:value[parts[i]]}else value=value[parts[i]];return value}},function(module,exports){module.exports=function(exec){try{return!!exec()}catch(error){return!0}}},function(module,exports,__webpack_require__){var global=__webpack_require__(7),shared=__webpack_require__(79),uid=__webpack_require__(108),NATIVE_SYMBOL=__webpack_require__(239),Symbol=global.Symbol,store=shared("wks");module.exports=function(name){return store[name]||(store[name]=NATIVE_SYMBOL&&Symbol[name]||(NATIVE_SYMBOL?Symbol:uid)("Symbol."+name))}},function(module,exports){module.exports=function(it){return"object"==typeof it?null!==it:"function"==typeof it}},,function(module,exports,__webpack_require__){var path=__webpack_require__(156),has=__webpack_require__(21),wrappedWellKnownSymbolModule=__webpack_require__(243),defineProperty=__webpack_require__(22).f;module.exports=function(NAME){var Symbol=path.Symbol||(path.Symbol={});has(Symbol,NAME)||defineProperty(Symbol,NAME,{value:wrappedWellKnownSymbolModule.f(NAME)})}},function(module,exports,__webpack_require__){"use strict";var $TypeError=TypeError,ThrowTypeError=Object.getOwnPropertyDescriptor?function(){return Object.getOwnPropertyDescriptor(arguments,"callee").get}():function(){throw new $TypeError},hasSymbols=__webpack_require__(19)(),getProto=Object.getPrototypeOf||function(x){return x.__proto__},asyncGenIterator=void 0,TypedArray="undefined"==typeof Uint8Array?void 0:getProto(Uint8Array),INTRINSICS={"$ %Array%":Array,"$ %ArrayBuffer%":"undefined"==typeof ArrayBuffer?void 0:ArrayBuffer,"$ %ArrayBufferPrototype%":"undefined"==typeof ArrayBuffer?void 0:ArrayBuffer.prototype,"$ %ArrayIteratorPrototype%":hasSymbols?getProto([][Symbol.iterator]()):void 0,"$ %ArrayPrototype%":Array.prototype,"$ %ArrayProto_entries%":Array.prototype.entries,"$ %ArrayProto_forEach%":Array.prototype.forEach,"$ %ArrayProto_keys%":Array.prototype.keys,"$ %ArrayProto_values%":Array.prototype.values,"$ %AsyncFromSyncIteratorPrototype%":void 0,"$ %AsyncFunction%":void 0,"$ %AsyncFunctionPrototype%":void 0,"$ %AsyncGenerator%":void 0,"$ %AsyncGeneratorFunction%":void 0,"$ %AsyncGeneratorPrototype%":void 0,"$ %AsyncIteratorPrototype%":asyncGenIterator&&hasSymbols&&Symbol.asyncIterator?asyncGenIterator[Symbol.asyncIterator]():void 0,"$ %Atomics%":"undefined"==typeof Atomics?void 0:Atomics,"$ %Boolean%":Boolean,"$ %BooleanPrototype%":Boolean.prototype,"$ %DataView%":"undefined"==typeof DataView?void 0:DataView,"$ %DataViewPrototype%":"undefined"==typeof DataView?void 0:DataView.prototype,"$ %Date%":Date,"$ %DatePrototype%":Date.prototype,"$ %decodeURI%":decodeURI,"$ %decodeURIComponent%":decodeURIComponent,"$ %encodeURI%":encodeURI,"$ %encodeURIComponent%":encodeURIComponent,"$ %Error%":Error,"$ %ErrorPrototype%":Error.prototype,"$ %eval%":eval,"$ %EvalError%":EvalError,"$ %EvalErrorPrototype%":EvalError.prototype,"$ %Float32Array%":"undefined"==typeof Float32Array?void 0:Float32Array,"$ %Float32ArrayPrototype%":"undefined"==typeof Float32Array?void 0:Float32Array.prototype,"$ %Float64Array%":"undefined"==typeof Float64Array?void 0:Float64Array,"$ %Float64ArrayPrototype%":"undefined"==typeof Float64Array?void 0:Float64Array.prototype,"$ %Function%":Function,"$ %FunctionPrototype%":Function.prototype,"$ %Generator%":void 0,"$ %GeneratorFunction%":void 0,"$ %GeneratorPrototype%":void 0,"$ %Int8Array%":"undefined"==typeof Int8Array?void 0:Int8Array,"$ %Int8ArrayPrototype%":"undefined"==typeof Int8Array?void 0:Int8Array.prototype,"$ %Int16Array%":"undefined"==typeof Int16Array?void 0:Int16Array,"$ %Int16ArrayPrototype%":"undefined"==typeof Int16Array?void 0:Int8Array.prototype,"$ %Int32Array%":"undefined"==typeof Int32Array?void 0:Int32Array,"$ %Int32ArrayPrototype%":"undefined"==typeof Int32Array?void 0:Int32Array.prototype,"$ %isFinite%":isFinite,"$ %isNaN%":isNaN,"$ %IteratorPrototype%":hasSymbols?getProto(getProto([][Symbol.iterator]())):void 0,"$ %JSON%":JSON,"$ %JSONParse%":JSON.parse,"$ %Map%":"undefined"==typeof Map?void 0:Map,"$ %MapIteratorPrototype%":"undefined"!=typeof Map&&hasSymbols?getProto((new Map)[Symbol.iterator]()):void 0,"$ %MapPrototype%":"undefined"==typeof Map?void 0:Map.prototype,"$ %Math%":Math,"$ %Number%":Number,"$ %NumberPrototype%":Number.prototype,"$ %Object%":Object,"$ %ObjectPrototype%":Object.prototype,"$ %ObjProto_toString%":Object.prototype.toString,"$ %ObjProto_valueOf%":Object.prototype.valueOf,"$ %parseFloat%":parseFloat,"$ %parseInt%":parseInt,"$ %Promise%":"undefined"==typeof Promise?void 0:Promise,"$ %PromisePrototype%":"undefined"==typeof Promise?void 0:Promise.prototype,"$ %PromiseProto_then%":"undefined"==typeof Promise?void 0:Promise.prototype.then,"$ %Promise_all%":"undefined"==typeof Promise?void 0:Promise.all,"$ %Promise_reject%":"undefined"==typeof Promise?void 0:Promise.reject,"$ %Promise_resolve%":"undefined"==typeof Promise?void 0:Promise.resolve,"$ %Proxy%":"undefined"==typeof Proxy?void 0:Proxy,"$ %RangeError%":RangeError,"$ %RangeErrorPrototype%":RangeError.prototype,"$ %ReferenceError%":ReferenceError,"$ %ReferenceErrorPrototype%":ReferenceError.prototype,"$ %Reflect%":"undefined"==typeof Reflect?void 0:Reflect,"$ %RegExp%":RegExp,"$ %RegExpPrototype%":RegExp.prototype,"$ %Set%":"undefined"==typeof Set?void 0:Set,"$ %SetIteratorPrototype%":"undefined"!=typeof Set&&hasSymbols?getProto((new Set)[Symbol.iterator]()):void 0,"$ %SetPrototype%":"undefined"==typeof Set?void 0:Set.prototype,"$ %SharedArrayBuffer%":"undefined"==typeof SharedArrayBuffer?void 0:SharedArrayBuffer,"$ %SharedArrayBufferPrototype%":"undefined"==typeof SharedArrayBuffer?void 0:SharedArrayBuffer.prototype,"$ %String%":String,"$ %StringIteratorPrototype%":hasSymbols?getProto(""[Symbol.iterator]()):void 0,"$ %StringPrototype%":String.prototype,"$ %Symbol%":hasSymbols?Symbol:void 0,"$ %SymbolPrototype%":hasSymbols?Symbol.prototype:void 0,"$ %SyntaxError%":SyntaxError,"$ %SyntaxErrorPrototype%":SyntaxError.prototype,"$ %ThrowTypeError%":ThrowTypeError,"$ %TypedArray%":TypedArray,"$ %TypedArrayPrototype%":TypedArray?TypedArray.prototype:void 0,"$ %TypeError%":$TypeError,"$ %TypeErrorPrototype%":$TypeError.prototype,"$ %Uint8Array%":"undefined"==typeof Uint8Array?void 0:Uint8Array,"$ %Uint8ArrayPrototype%":"undefined"==typeof Uint8Array?void 0:Uint8Array.prototype,"$ %Uint8ClampedArray%":"undefined"==typeof Uint8ClampedArray?void 0:Uint8ClampedArray,"$ %Uint8ClampedArrayPrototype%":"undefined"==typeof Uint8ClampedArray?void 0:Uint8ClampedArray.prototype,"$ %Uint16Array%":"undefined"==typeof Uint16Array?void 0:Uint16Array,"$ %Uint16ArrayPrototype%":"undefined"==typeof Uint16Array?void 0:Uint16Array.prototype,"$ %Uint32Array%":"undefined"==typeof Uint32Array?void 0:Uint32Array,"$ %Uint32ArrayPrototype%":"undefined"==typeof Uint32Array?void 0:Uint32Array.prototype,"$ %URIError%":URIError,"$ %URIErrorPrototype%":URIError.prototype,"$ %WeakMap%":"undefined"==typeof WeakMap?void 0:WeakMap,"$ %WeakMapPrototype%":"undefined"==typeof WeakMap?void 0:WeakMap.prototype,"$ %WeakSet%":"undefined"==typeof WeakSet?void 0:WeakSet,"$ %WeakSetPrototype%":"undefined"==typeof WeakSet?void 0:WeakSet.prototype},$replace=__webpack_require__(9).call(Function.call,String.prototype.replace),rePropName=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,reEscapeChar=/\\(\\)?/g,stringToPath=function stringToPath(string){var result=[];return $replace(string,rePropName,(function(match,number,quote,subString){result[result.length]=quote?$replace(subString,reEscapeChar,"$1"):number||match})),result},getBaseIntrinsic=function getBaseIntrinsic(name,allowMissing){var key="$ "+name;if(!(key in INTRINSICS))throw new SyntaxError("intrinsic "+name+" does not exist!");if(void 0===INTRINSICS[key]&&!allowMissing)throw new $TypeError("intrinsic "+name+" exists, but is not available. Please file an issue!");return INTRINSICS[key]};module.exports=function GetIntrinsic(name,allowMissing){if(arguments.length>1&&"boolean"!=typeof allowMissing)throw new TypeError('"allowMissing" argument must be a boolean');var parts=stringToPath(name);if(0===parts.length)return getBaseIntrinsic(name,allowMissing);for(var value=getBaseIntrinsic("%"+parts[0]+"%",allowMissing),i=1;iindex;)args.push(arguments[index++]);if($replacer=replacer=args[1],(isObject(replacer)||void 0!==it)&&!isSymbol(it))return isArray(replacer)||(replacer=function(key,value){if("function"==typeof $replacer&&(value=$replacer.call(this,key,value)),!isSymbol(value))return value}),args[1]=replacer,nativeJSONStringify.apply(JSON,args)}}),$Symbol.prototype[TO_PRIMITIVE]||createNonEnumerableProperty($Symbol.prototype,TO_PRIMITIVE,$Symbol.prototype.valueOf),setToStringTag($Symbol,"Symbol"),hiddenKeys[HIDDEN]=!0},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(6),forEach=__webpack_require__(244);$({target:"Array",proto:!0,forced:[].forEach!=forEach},{forEach:forEach})},function(module,exports,__webpack_require__){"use strict";var toIndexedObject=__webpack_require__(51),addToUnscopables=__webpack_require__(163),Iterators=__webpack_require__(88),InternalStateModule=__webpack_require__(52),defineIterator=__webpack_require__(164),setInternalState=InternalStateModule.set,getInternalState=InternalStateModule.getterFor("Array Iterator");module.exports=defineIterator(Array,"Array",(function(iterated,kind){setInternalState(this,{type:"Array Iterator",target:toIndexedObject(iterated),index:0,kind:kind})}),(function(){var state=getInternalState(this),target=state.target,kind=state.kind,index=state.index++;return!target||index>=target.length?(state.target=void 0,{value:void 0,done:!0}):"keys"==kind?{value:index,done:!1}:"values"==kind?{value:target[index],done:!1}:{value:[index,target[index]],done:!1}}),"values"),Iterators.Arguments=Iterators.Array,addToUnscopables("keys"),addToUnscopables("values"),addToUnscopables("entries")},function(module,exports,__webpack_require__){var global=__webpack_require__(7),DOMIterables=__webpack_require__(247),forEach=__webpack_require__(244),createNonEnumerableProperty=__webpack_require__(34);for(var COLLECTION_NAME in DOMIterables){var Collection=global[COLLECTION_NAME],CollectionPrototype=Collection&&Collection.prototype;if(CollectionPrototype&&CollectionPrototype.forEach!==forEach)try{createNonEnumerableProperty(CollectionPrototype,"forEach",forEach)}catch(error){CollectionPrototype.forEach=forEach}}},function(module,exports,__webpack_require__){"use strict";var bind=__webpack_require__(9);module.exports=bind.call(Function.call,Object.prototype.hasOwnProperty)},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(6),fails=__webpack_require__(11),isArray=__webpack_require__(84),isObject=__webpack_require__(13),toObject=__webpack_require__(30),toLength=__webpack_require__(36),createProperty=__webpack_require__(111),arraySpeciesCreate=__webpack_require__(161),arrayMethodHasSpeciesSupport=__webpack_require__(85),wellKnownSymbol=__webpack_require__(12),V8_VERSION=__webpack_require__(162),IS_CONCAT_SPREADABLE=wellKnownSymbol("isConcatSpreadable"),IS_CONCAT_SPREADABLE_SUPPORT=V8_VERSION>=51||!fails((function(){var array=[];return array[IS_CONCAT_SPREADABLE]=!1,array.concat()[0]!==array})),SPECIES_SUPPORT=arrayMethodHasSpeciesSupport("concat"),isConcatSpreadable=function(O){if(!isObject(O))return!1;var spreadable=O[IS_CONCAT_SPREADABLE];return void 0!==spreadable?!!spreadable:isArray(O)};$({target:"Array",proto:!0,forced:!IS_CONCAT_SPREADABLE_SUPPORT||!SPECIES_SUPPORT},{concat:function concat(arg){var i,k,length,len,E,O=toObject(this),A=arraySpeciesCreate(O,0),n=0;for(i=-1,length=arguments.length;i9007199254740991)throw TypeError("Maximum allowed index exceeded");for(k=0;k=9007199254740991)throw TypeError("Maximum allowed index exceeded");createProperty(A,n++,E)}return A.length=n,A}})},function(module,exports,__webpack_require__){var requireObjectCoercible=__webpack_require__(46);module.exports=function(argument){return Object(requireObjectCoercible(argument))}},function(module,exports,__webpack_require__){var global=__webpack_require__(7),DOMIterables=__webpack_require__(247),ArrayIteratorMethods=__webpack_require__(26),createNonEnumerableProperty=__webpack_require__(34),wellKnownSymbol=__webpack_require__(12),ITERATOR=wellKnownSymbol("iterator"),TO_STRING_TAG=wellKnownSymbol("toStringTag"),ArrayValues=ArrayIteratorMethods.values;for(var COLLECTION_NAME in DOMIterables){var Collection=global[COLLECTION_NAME],CollectionPrototype=Collection&&Collection.prototype;if(CollectionPrototype){if(CollectionPrototype[ITERATOR]!==ArrayValues)try{createNonEnumerableProperty(CollectionPrototype,ITERATOR,ArrayValues)}catch(error){CollectionPrototype[ITERATOR]=ArrayValues}if(CollectionPrototype[TO_STRING_TAG]||createNonEnumerableProperty(CollectionPrototype,TO_STRING_TAG,COLLECTION_NAME),DOMIterables[COLLECTION_NAME])for(var METHOD_NAME in ArrayIteratorMethods)if(CollectionPrototype[METHOD_NAME]!==ArrayIteratorMethods[METHOD_NAME])try{createNonEnumerableProperty(CollectionPrototype,METHOD_NAME,ArrayIteratorMethods[METHOD_NAME])}catch(error){CollectionPrototype[METHOD_NAME]=ArrayIteratorMethods[METHOD_NAME]}}}},function(module,exports,__webpack_require__){var redefine=__webpack_require__(35),DatePrototype=Date.prototype,nativeDateToString=DatePrototype.toString,getTime=DatePrototype.getTime;new Date(NaN)+""!="Invalid Date"&&redefine(DatePrototype,"toString",(function toString(){var value=getTime.call(this);return value==value?nativeDateToString.call(this):"Invalid Date"}))},function(module,exports,__webpack_require__){var $=__webpack_require__(6),assign=__webpack_require__(504);$({target:"Object",stat:!0,forced:Object.assign!==assign},{assign:assign})},function(module,exports,__webpack_require__){var DESCRIPTORS=__webpack_require__(18),definePropertyModule=__webpack_require__(22),createPropertyDescriptor=__webpack_require__(77);module.exports=DESCRIPTORS?function(object,key,value){return definePropertyModule.f(object,key,createPropertyDescriptor(1,value))}:function(object,key,value){return object[key]=value,object}},function(module,exports,__webpack_require__){var global=__webpack_require__(7),shared=__webpack_require__(79),createNonEnumerableProperty=__webpack_require__(34),has=__webpack_require__(21),setGlobal=__webpack_require__(155),nativeFunctionToString=__webpack_require__(235),InternalStateModule=__webpack_require__(52),getInternalState=InternalStateModule.get,enforceInternalState=InternalStateModule.enforce,TEMPLATE=String(nativeFunctionToString).split("toString");shared("inspectSource",(function(it){return nativeFunctionToString.call(it)})),(module.exports=function(O,key,value,options){var unsafe=!!options&&!!options.unsafe,simple=!!options&&!!options.enumerable,noTargetGet=!!options&&!!options.noTargetGet;"function"==typeof value&&("string"!=typeof key||has(value,"name")||createNonEnumerableProperty(value,"name",key),enforceInternalState(value).source=TEMPLATE.join("string"==typeof key?key:"")),O!==global?(unsafe?!noTargetGet&&O[key]&&(simple=!0):delete O[key],simple?O[key]=value:createNonEnumerableProperty(O,key,value)):simple?O[key]=value:setGlobal(key,value)})(Function.prototype,"toString",(function toString(){return"function"==typeof this&&getInternalState(this).source||nativeFunctionToString.call(this)}))},function(module,exports,__webpack_require__){var toInteger=__webpack_require__(83),min=Math.min;module.exports=function(argument){return argument>0?min(toInteger(argument),9007199254740991):0}},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(6),DESCRIPTORS=__webpack_require__(18),global=__webpack_require__(7),has=__webpack_require__(21),isObject=__webpack_require__(13),defineProperty=__webpack_require__(22).f,copyConstructorProperties=__webpack_require__(237),NativeSymbol=global.Symbol;if(DESCRIPTORS&&"function"==typeof NativeSymbol&&(!("description"in NativeSymbol.prototype)||void 0!==NativeSymbol().description)){var EmptyStringDescriptionStore={},SymbolWrapper=function Symbol(){var description=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),result=this instanceof SymbolWrapper?new NativeSymbol(description):void 0===description?NativeSymbol():NativeSymbol(description);return""===description&&(EmptyStringDescriptionStore[result]=!0),result};copyConstructorProperties(SymbolWrapper,NativeSymbol);var symbolPrototype=SymbolWrapper.prototype=NativeSymbol.prototype;symbolPrototype.constructor=SymbolWrapper;var symbolToString=symbolPrototype.toString,native="Symbol(test)"==String(NativeSymbol("test")),regexp=/^Symbol\((.*)\)[^)]+$/;defineProperty(symbolPrototype,"description",{configurable:!0,get:function description(){var symbol=isObject(this)?this.valueOf():this,string=symbolToString.call(symbol);if(has(EmptyStringDescriptionStore,symbol))return"";var desc=native?string.slice(7,-1):string.replace(regexp,"$1");return""===desc?void 0:desc}}),$({global:!0,forced:!0},{Symbol:SymbolWrapper})}},function(module,exports,__webpack_require__){__webpack_require__(15)("iterator")},function(module,exports,__webpack_require__){(function(global){var win;win="undefined"!=typeof window?window:void 0!==global?global:"undefined"!=typeof self?self:{},module.exports=win}).call(this,__webpack_require__(20))},function(module,exports,__webpack_require__){var $=__webpack_require__(6),toObject=__webpack_require__(30),nativeKeys=__webpack_require__(86);$({target:"Object",stat:!0,forced:__webpack_require__(11)((function(){nativeKeys(1)}))},{keys:function keys(it){return nativeKeys(toObject(it))}})},function(module,exports,__webpack_require__){"use strict";var charAt=__webpack_require__(254).charAt,InternalStateModule=__webpack_require__(52),defineIterator=__webpack_require__(164),setInternalState=InternalStateModule.set,getInternalState=InternalStateModule.getterFor("String Iterator");defineIterator(String,"String",(function(iterated){setInternalState(this,{type:"String Iterator",string:String(iterated),index:0})}),(function next(){var point,state=getInternalState(this),string=state.string,index=state.index;return index>=string.length?{value:void 0,done:!0}:(point=charAt(string,index),state.index+=point.length,{value:point,done:!1})}))},function(module,exports,__webpack_require__){var freeGlobal=__webpack_require__(271),freeSelf="object"==typeof self&&self&&self.Object===Object&&self,root=freeGlobal||freeSelf||Function("return this")();module.exports=root},function(module,exports,__webpack_require__){__webpack_require__(6)({target:"Array",stat:!0},{isArray:__webpack_require__(84)})},function(module,exports,__webpack_require__){"use strict";var ES5Type=__webpack_require__(424);module.exports=function Type(x){return"symbol"==typeof x?"Symbol":ES5Type(x)}},function(module,exports){var toString={}.toString;module.exports=function(it){return toString.call(it).slice(8,-1)}},function(module,exports){module.exports=function(it){if(null==it)throw TypeError("Can't call method on "+it);return it}},function(module,exports,__webpack_require__){"use strict";var redefine=__webpack_require__(35),anObject=__webpack_require__(17),fails=__webpack_require__(11),flags=__webpack_require__(253),RegExpPrototype=RegExp.prototype,nativeToString=RegExpPrototype.toString,NOT_GENERIC=fails((function(){return"/a/b"!=nativeToString.call({source:"a",flags:"b"})})),INCORRECT_NAME="toString"!=nativeToString.name;(NOT_GENERIC||INCORRECT_NAME)&&redefine(RegExp.prototype,"toString",(function toString(){var R=anObject(this),p=String(R.source),rf=R.flags;return"/"+p+"/"+String(void 0===rf&&R instanceof RegExp&&!("flags"in RegExpPrototype)?flags.call(R):rf)}),{unsafe:!0})},function(module,exports){module.exports=function isObject(value){var type=typeof value;return null!=value&&("object"==type||"function"==type)}},function(module,exports,__webpack_require__){"use strict";var GetIntrinsic=__webpack_require__(16),callBind=__webpack_require__(100),$indexOf=callBind(GetIntrinsic("String.prototype.indexOf"));module.exports=function callBoundIntrinsic(name,allowMissing){var intrinsic=GetIntrinsic(name,!!allowMissing);return"function"==typeof intrinsic&&$indexOf(name,".prototype.")?callBind(intrinsic):intrinsic}},function(module,exports,__webpack_require__){"use strict";var $TypeError=TypeError,$gOPD=Object.getOwnPropertyDescriptor,throwTypeError=function(){throw new $TypeError},ThrowTypeError=$gOPD?function(){try{return arguments.callee,throwTypeError}catch(calleeThrows){try{return $gOPD(arguments,"callee").get}catch(gOPDthrows){return throwTypeError}}}():throwTypeError,hasSymbols=__webpack_require__(19)(),getProto=Object.getPrototypeOf||function(x){return x.__proto__},asyncGenIterator=void 0,TypedArray="undefined"==typeof Uint8Array?void 0:getProto(Uint8Array),INTRINSICS={"$ %Array%":Array,"$ %ArrayBuffer%":"undefined"==typeof ArrayBuffer?void 0:ArrayBuffer,"$ %ArrayBufferPrototype%":"undefined"==typeof ArrayBuffer?void 0:ArrayBuffer.prototype,"$ %ArrayIteratorPrototype%":hasSymbols?getProto([][Symbol.iterator]()):void 0,"$ %ArrayPrototype%":Array.prototype,"$ %ArrayProto_entries%":Array.prototype.entries,"$ %ArrayProto_forEach%":Array.prototype.forEach,"$ %ArrayProto_keys%":Array.prototype.keys,"$ %ArrayProto_values%":Array.prototype.values,"$ %AsyncFromSyncIteratorPrototype%":void 0,"$ %AsyncFunction%":void 0,"$ %AsyncFunctionPrototype%":void 0,"$ %AsyncGenerator%":void 0,"$ %AsyncGeneratorFunction%":void 0,"$ %AsyncGeneratorPrototype%":void 0,"$ %AsyncIteratorPrototype%":asyncGenIterator&&hasSymbols&&Symbol.asyncIterator?asyncGenIterator[Symbol.asyncIterator]():void 0,"$ %Atomics%":"undefined"==typeof Atomics?void 0:Atomics,"$ %Boolean%":Boolean,"$ %BooleanPrototype%":Boolean.prototype,"$ %DataView%":"undefined"==typeof DataView?void 0:DataView,"$ %DataViewPrototype%":"undefined"==typeof DataView?void 0:DataView.prototype,"$ %Date%":Date,"$ %DatePrototype%":Date.prototype,"$ %decodeURI%":decodeURI,"$ %decodeURIComponent%":decodeURIComponent,"$ %encodeURI%":encodeURI,"$ %encodeURIComponent%":encodeURIComponent,"$ %Error%":Error,"$ %ErrorPrototype%":Error.prototype,"$ %eval%":eval,"$ %EvalError%":EvalError,"$ %EvalErrorPrototype%":EvalError.prototype,"$ %Float32Array%":"undefined"==typeof Float32Array?void 0:Float32Array,"$ %Float32ArrayPrototype%":"undefined"==typeof Float32Array?void 0:Float32Array.prototype,"$ %Float64Array%":"undefined"==typeof Float64Array?void 0:Float64Array,"$ %Float64ArrayPrototype%":"undefined"==typeof Float64Array?void 0:Float64Array.prototype,"$ %Function%":Function,"$ %FunctionPrototype%":Function.prototype,"$ %Generator%":void 0,"$ %GeneratorFunction%":void 0,"$ %GeneratorPrototype%":void 0,"$ %Int8Array%":"undefined"==typeof Int8Array?void 0:Int8Array,"$ %Int8ArrayPrototype%":"undefined"==typeof Int8Array?void 0:Int8Array.prototype,"$ %Int16Array%":"undefined"==typeof Int16Array?void 0:Int16Array,"$ %Int16ArrayPrototype%":"undefined"==typeof Int16Array?void 0:Int8Array.prototype,"$ %Int32Array%":"undefined"==typeof Int32Array?void 0:Int32Array,"$ %Int32ArrayPrototype%":"undefined"==typeof Int32Array?void 0:Int32Array.prototype,"$ %isFinite%":isFinite,"$ %isNaN%":isNaN,"$ %IteratorPrototype%":hasSymbols?getProto(getProto([][Symbol.iterator]())):void 0,"$ %JSON%":"object"==typeof JSON?JSON:void 0,"$ %JSONParse%":"object"==typeof JSON?JSON.parse:void 0,"$ %Map%":"undefined"==typeof Map?void 0:Map,"$ %MapIteratorPrototype%":"undefined"!=typeof Map&&hasSymbols?getProto((new Map)[Symbol.iterator]()):void 0,"$ %MapPrototype%":"undefined"==typeof Map?void 0:Map.prototype,"$ %Math%":Math,"$ %Number%":Number,"$ %NumberPrototype%":Number.prototype,"$ %Object%":Object,"$ %ObjectPrototype%":Object.prototype,"$ %ObjProto_toString%":Object.prototype.toString,"$ %ObjProto_valueOf%":Object.prototype.valueOf,"$ %parseFloat%":parseFloat,"$ %parseInt%":parseInt,"$ %Promise%":"undefined"==typeof Promise?void 0:Promise,"$ %PromisePrototype%":"undefined"==typeof Promise?void 0:Promise.prototype,"$ %PromiseProto_then%":"undefined"==typeof Promise?void 0:Promise.prototype.then,"$ %Promise_all%":"undefined"==typeof Promise?void 0:Promise.all,"$ %Promise_reject%":"undefined"==typeof Promise?void 0:Promise.reject,"$ %Promise_resolve%":"undefined"==typeof Promise?void 0:Promise.resolve,"$ %Proxy%":"undefined"==typeof Proxy?void 0:Proxy,"$ %RangeError%":RangeError,"$ %RangeErrorPrototype%":RangeError.prototype,"$ %ReferenceError%":ReferenceError,"$ %ReferenceErrorPrototype%":ReferenceError.prototype,"$ %Reflect%":"undefined"==typeof Reflect?void 0:Reflect,"$ %RegExp%":RegExp,"$ %RegExpPrototype%":RegExp.prototype,"$ %Set%":"undefined"==typeof Set?void 0:Set,"$ %SetIteratorPrototype%":"undefined"!=typeof Set&&hasSymbols?getProto((new Set)[Symbol.iterator]()):void 0,"$ %SetPrototype%":"undefined"==typeof Set?void 0:Set.prototype,"$ %SharedArrayBuffer%":"undefined"==typeof SharedArrayBuffer?void 0:SharedArrayBuffer,"$ %SharedArrayBufferPrototype%":"undefined"==typeof SharedArrayBuffer?void 0:SharedArrayBuffer.prototype,"$ %String%":String,"$ %StringIteratorPrototype%":hasSymbols?getProto(""[Symbol.iterator]()):void 0,"$ %StringPrototype%":String.prototype,"$ %Symbol%":hasSymbols?Symbol:void 0,"$ %SymbolPrototype%":hasSymbols?Symbol.prototype:void 0,"$ %SyntaxError%":SyntaxError,"$ %SyntaxErrorPrototype%":SyntaxError.prototype,"$ %ThrowTypeError%":ThrowTypeError,"$ %TypedArray%":TypedArray,"$ %TypedArrayPrototype%":TypedArray?TypedArray.prototype:void 0,"$ %TypeError%":$TypeError,"$ %TypeErrorPrototype%":$TypeError.prototype,"$ %Uint8Array%":"undefined"==typeof Uint8Array?void 0:Uint8Array,"$ %Uint8ArrayPrototype%":"undefined"==typeof Uint8Array?void 0:Uint8Array.prototype,"$ %Uint8ClampedArray%":"undefined"==typeof Uint8ClampedArray?void 0:Uint8ClampedArray,"$ %Uint8ClampedArrayPrototype%":"undefined"==typeof Uint8ClampedArray?void 0:Uint8ClampedArray.prototype,"$ %Uint16Array%":"undefined"==typeof Uint16Array?void 0:Uint16Array,"$ %Uint16ArrayPrototype%":"undefined"==typeof Uint16Array?void 0:Uint16Array.prototype,"$ %Uint32Array%":"undefined"==typeof Uint32Array?void 0:Uint32Array,"$ %Uint32ArrayPrototype%":"undefined"==typeof Uint32Array?void 0:Uint32Array.prototype,"$ %URIError%":URIError,"$ %URIErrorPrototype%":URIError.prototype,"$ %WeakMap%":"undefined"==typeof WeakMap?void 0:WeakMap,"$ %WeakMapPrototype%":"undefined"==typeof WeakMap?void 0:WeakMap.prototype,"$ %WeakSet%":"undefined"==typeof WeakSet?void 0:WeakSet,"$ %WeakSetPrototype%":"undefined"==typeof WeakSet?void 0:WeakSet.prototype},$replace=__webpack_require__(9).call(Function.call,String.prototype.replace),rePropName=/[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g,reEscapeChar=/\\(\\)?/g,stringToPath=function stringToPath(string){var result=[];return $replace(string,rePropName,(function(match,number,quote,subString){result[result.length]=quote?$replace(subString,reEscapeChar,"$1"):number||match})),result},getBaseIntrinsic=function getBaseIntrinsic(name,allowMissing){var key="$ "+name;if(!(key in INTRINSICS))throw new SyntaxError("intrinsic "+name+" does not exist!");if(void 0===INTRINSICS[key]&&!allowMissing)throw new $TypeError("intrinsic "+name+" exists, but is not available. Please file an issue!");return INTRINSICS[key]};module.exports=function GetIntrinsic(name,allowMissing){if(arguments.length>1&&"boolean"!=typeof allowMissing)throw new TypeError('"allowMissing" argument must be a boolean');var parts=stringToPath(name);if(0===parts.length)return getBaseIntrinsic(name,allowMissing);for(var value=getBaseIntrinsic("%"+parts[0]+"%",allowMissing),i=1;i=parts.length){var desc=$gOPD(value,parts[i]);value=desc?desc.get||desc.value:value[parts[i]]}else value=value[parts[i]];return value}},function(module,exports,__webpack_require__){var IndexedObject=__webpack_require__(106),requireObjectCoercible=__webpack_require__(46);module.exports=function(it){return IndexedObject(requireObjectCoercible(it))}},function(module,exports,__webpack_require__){var set,get,has,NATIVE_WEAK_MAP=__webpack_require__(236),global=__webpack_require__(7),isObject=__webpack_require__(13),createNonEnumerableProperty=__webpack_require__(34),objectHas=__webpack_require__(21),sharedKey=__webpack_require__(107),hiddenKeys=__webpack_require__(81),WeakMap=global.WeakMap;if(NATIVE_WEAK_MAP){var store=new WeakMap,wmget=store.get,wmhas=store.has,wmset=store.set;set=function(it,metadata){return wmset.call(store,it,metadata),metadata},get=function(it){return wmget.call(store,it)||{}},has=function(it){return wmhas.call(store,it)}}else{var STATE=sharedKey("state");hiddenKeys[STATE]=!0,set=function(it,metadata){return createNonEnumerableProperty(it,STATE,metadata),metadata},get=function(it){return objectHas(it,STATE)?it[STATE]:{}},has=function(it){return objectHas(it,STATE)}}module.exports={set:set,get:get,has:has,enforce:function(it){return has(it)?get(it):set(it,{})},getterFor:function(TYPE){return function(it){var state;if(!isObject(it)||(state=get(it)).type!==TYPE)throw TypeError("Incompatible receiver, "+TYPE+" required");return state}}}},function(module,exports,__webpack_require__){var bind=__webpack_require__(87),IndexedObject=__webpack_require__(106),toObject=__webpack_require__(30),toLength=__webpack_require__(36),arraySpeciesCreate=__webpack_require__(161),push=[].push,createMethod=function(TYPE){var IS_MAP=1==TYPE,IS_FILTER=2==TYPE,IS_SOME=3==TYPE,IS_EVERY=4==TYPE,IS_FIND_INDEX=6==TYPE,NO_HOLES=5==TYPE||IS_FIND_INDEX;return function($this,callbackfn,that,specificCreate){for(var value,result,O=toObject($this),self=IndexedObject(O),boundFunction=bind(callbackfn,that,3),length=toLength(self.length),index=0,create=specificCreate||arraySpeciesCreate,target=IS_MAP?create($this,length):IS_FILTER?create($this,0):void 0;length>index;index++)if((NO_HOLES||index in self)&&(result=boundFunction(value=self[index],index,O),TYPE))if(IS_MAP)target[index]=result;else if(result)switch(TYPE){case 3:return!0;case 5:return value;case 6:return index;case 2:push.call(target,value)}else if(IS_EVERY)return!1;return IS_FIND_INDEX?-1:IS_SOME||IS_EVERY?IS_EVERY:target}};module.exports={forEach:createMethod(0),map:createMethod(1),filter:createMethod(2),some:createMethod(3),every:createMethod(4),find:createMethod(5),findIndex:createMethod(6)}},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(6),exec=__webpack_require__(114);$({target:"RegExp",proto:!0,forced:/./.exec!==exec},{exec:exec})},function(module,exports,__webpack_require__){var $=__webpack_require__(6),DESCRIPTORS=__webpack_require__(18);$({target:"Object",stat:!0,forced:!DESCRIPTORS,sham:!DESCRIPTORS},{defineProperty:__webpack_require__(22).f})},,,function(module,exports,__webpack_require__){var defineProperty=__webpack_require__(22).f,has=__webpack_require__(21),TO_STRING_TAG=__webpack_require__(12)("toStringTag");module.exports=function(it,TAG,STATIC){it&&!has(it=STATIC?it:it.prototype,TO_STRING_TAG)&&defineProperty(it,TO_STRING_TAG,{configurable:!0,value:TAG})}},function(module,exports){module.exports=function(it){if("function"!=typeof it)throw TypeError(String(it)+" is not a function");return it}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={};exports.default=void 0;var _index=__webpack_require__(255);Object.keys(_index).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _index[key]}}))}));var _makeDecorator=__webpack_require__(510);Object.keys(_makeDecorator).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _makeDecorator[key]}}))}));var _types=__webpack_require__(259);Object.keys(_types).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _types[key]}}))}));var _storybookChannelMock=__webpack_require__(511);Object.keys(_storybookChannelMock).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _storybookChannelMock[key]}}))}));var _hooks=__webpack_require__(514);Object.keys(_hooks).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _hooks[key]}}))}));var _default=_index.addons;exports.default=_default},function(module,exports){var isArray=Array.isArray;module.exports=isArray},function(module,exports){module.exports=function isObjectLike(value){return null!=value&&"object"==typeof value}},function(module,exports,__webpack_require__){var baseIsNative=__webpack_require__(554),getValue=__webpack_require__(557);module.exports=function getNative(object,key){var value=getValue(object,key);return baseIsNative(value)?value:void 0}},function(module,exports,__webpack_require__){"use strict";(function(module){function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}__webpack_require__(32),__webpack_require__(33),Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={knob:!0,text:!0,boolean:!0,number:!0,color:!0,object:!0,select:!0,radios:!0,array:!0,date:!0,button:!0,files:!0,optionsKnob:!0,withKnobs:!0};exports.knob=function knob(name,options){return _registerKnobs.manager.knob(name,options)},exports.text=function text(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"text",value:value,groupId:groupId})},exports.boolean=function _boolean(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"boolean",value:value,groupId:groupId})},exports.number=function number(name,value){var options=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},groupId=arguments.length>3?arguments[3]:void 0,rangeDefaults={min:0,max:10,step:1},mergedOptions=options.range?Object.assign({},rangeDefaults,{},options):options,finalOptions=Object.assign({type:"number"},mergedOptions,{value:value,groupId:groupId});return _registerKnobs.manager.knob(name,finalOptions)},exports.color=function color(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"color",value:value,groupId:groupId})},exports.object=function object(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"object",value:value,groupId:groupId})},exports.select=function select(name,options,value,groupId){return _registerKnobs.manager.knob(name,{type:"select",selectV2:!0,options:options,value:value,groupId:groupId})},exports.radios=function radios(name,options,value,groupId){return _registerKnobs.manager.knob(name,{type:"radios",options:options,value:value,groupId:groupId})},exports.array=function array(name,value){var separator=arguments.length>2&&void 0!==arguments[2]?arguments[2]:",",groupId=arguments.length>3?arguments[3]:void 0;return _registerKnobs.manager.knob(name,{type:"array",value:value,separator:separator,groupId:groupId})},exports.date=function date(name){var value=arguments.length>1&&void 0!==arguments[1]?arguments[1]:new Date,groupId=arguments.length>2?arguments[2]:void 0,proxyValue=value?value.getTime():(new Date).getTime();return _registerKnobs.manager.knob(name,{type:"date",value:proxyValue,groupId:groupId})},exports.button=function button(name,callback,groupId){return _registerKnobs.manager.knob(name,{type:"button",callback:callback,hideLabel:!0,groupId:groupId})},exports.files=function files(name,accept){var value=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],groupId=arguments.length>3?arguments[3]:void 0;return _registerKnobs.manager.knob(name,{type:"files",accept:accept,value:value,groupId:groupId})},exports.optionsKnob=function optionsKnob(name,valuesObj,value,optionsObj,groupId){return _registerKnobs.manager.knob(name,{type:"options",options:valuesObj,value:value,optionsObj:optionsObj,groupId:groupId})},exports.withKnobs=void 0;var _addons=function _interopRequireWildcard(obj){if(obj&&obj.__esModule)return obj;if(null===obj||"object"!==_typeof(obj)&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache();if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(__webpack_require__(60)),_shared=__webpack_require__(186);Object.keys(_shared).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _shared[key]}}))}));var _registerKnobs=__webpack_require__(679);function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var cache=new WeakMap;return _getRequireWildcardCache=function _getRequireWildcardCache(){return cache},cache}var defaultOptions={escapeHTML:!0},withKnobs=(0,_addons.makeDecorator)({name:"withKnobs",parameterName:"knobs",skipIfNoParametersOrOptions:!1,allowDeprecatedUsage:!0,wrapper:function wrapper(getStory,context,_ref){var options=_ref.options,storyOptions=_ref.parameters||options,allOptions=Object.assign({},defaultOptions,{},storyOptions),channel=_addons.default.getChannel();return _registerKnobs.manager.setChannel(channel),_registerKnobs.manager.setOptions(allOptions),channel.emit(_shared.SET_OPTIONS,allOptions),(0,_registerKnobs.registerKnobs)(),getStory(context)}});exports.withKnobs=withKnobs,module&&module.hot&&module.hot.decline&&module.hot.decline()}).call(this,__webpack_require__(2)(module))},,function(module,exports,__webpack_require__){"use strict";var fnToStr=Function.prototype.toString,constructorRegex=/^\s*class\b/,isES6ClassFn=function isES6ClassFunction(value){try{var fnStr=fnToStr.call(value);return constructorRegex.test(fnStr)}catch(e){return!1}},toStr=Object.prototype.toString,hasToStringTag="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;module.exports=function isCallable(value){if(!value)return!1;if("function"!=typeof value&&"object"!=typeof value)return!1;if("function"==typeof value&&!value.prototype)return!0;if(hasToStringTag)return function tryFunctionToStr(value){try{return!isES6ClassFn(value)&&(fnToStr.call(value),!0)}catch(e){return!1}}(value);if(isES6ClassFn(value))return!1;var strClass=toStr.call(value);return"[object Function]"===strClass||"[object GeneratorFunction]"===strClass}},function(module,exports,__webpack_require__){var anObject=__webpack_require__(17),defineProperties=__webpack_require__(241),enumBugKeys=__webpack_require__(159),hiddenKeys=__webpack_require__(81),html=__webpack_require__(242),documentCreateElement=__webpack_require__(154),IE_PROTO=__webpack_require__(107)("IE_PROTO"),Empty=function(){},createDict=function(){var iframeDocument,iframe=documentCreateElement("iframe"),length=enumBugKeys.length;for(iframe.style.display="none",html.appendChild(iframe),iframe.src=String("javascript:"),(iframeDocument=iframe.contentWindow.document).open(),iframeDocument.write("