Showing preview only (767K chars total). Download the full file or copy to clipboard to get everything.
Repository: streamich/react-use
Branch: master
Commit: 9ef95352e459
Files: 465
Total size: 677.6 KB
Directory structure:
gitextract_fgngh5hz/
├── .editorconfig
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── check-codebase.yml
│ ├── mirror.yml
│ └── release.yml
├── .gitignore
├── .storybook/
│ ├── addons.js
│ ├── config.js
│ └── webpack.config.js
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── babel.config.js
├── docs/
│ ├── Animations.md
│ ├── Lifecycles.md
│ ├── Sensors.md
│ ├── Side-effects.md
│ ├── State.md
│ ├── UI.md
│ ├── Usage.md
│ ├── createBreakpoint.md
│ ├── createGlobalState.md
│ ├── createMemo.md
│ ├── createReducer.md
│ ├── createReducerContext.md
│ ├── createStateContext.md
│ ├── useAsync.md
│ ├── useAsyncFn.md
│ ├── useAsyncRetry.md
│ ├── useAudio.md
│ ├── useBattery.md
│ ├── useBeforeUnload.md
│ ├── useClickAway.md
│ ├── useCookie.md
│ ├── useCopyToClipboard.md
│ ├── useCounter.md
│ ├── useCss.md
│ ├── useCustomCompareEffect.md
│ ├── useDebounce.md
│ ├── useDeepCompareEffect.md
│ ├── useDefault.md
│ ├── useDrop.md
│ ├── useEffectOnce.md
│ ├── useEnsuredForwardedRef.md
│ ├── useError.md
│ ├── useEvent.md
│ ├── useFavicon.md
│ ├── useFirstMountState.md
│ ├── useFullscreen.md
│ ├── useGeolocation.md
│ ├── useGetSet.md
│ ├── useGetSetState.md
│ ├── useHarmonicIntervalFn.md
│ ├── useHash.md
│ ├── useHover.md
│ ├── useIdle.md
│ ├── useIntersection.md
│ ├── useInterval.md
│ ├── useIsomorphicLayoutEffect.md
│ ├── useKey.md
│ ├── useKeyPress.md
│ ├── useKeyPressEvent.md
│ ├── useKeyboardJs.md
│ ├── useLatest.md
│ ├── useLifecycles.md
│ ├── useList.md
│ ├── useLocalStorage.md
│ ├── useLocation.md
│ ├── useLockBodyScroll.md
│ ├── useLogger.md
│ ├── useLongPress.md
│ ├── useMap.md
│ ├── useMeasure.md
│ ├── useMedia.md
│ ├── useMediaDevices.md
│ ├── useMediatedState.md
│ ├── useMethods.md
│ ├── useMotion.md
│ ├── useMount.md
│ ├── useMountedState.md
│ ├── useMouse.md
│ ├── useMouseWheel.md
│ ├── useMultiStateValidator.md
│ ├── useNetworkState.md
│ ├── useObservable.md
│ ├── useOrientation.md
│ ├── usePageLeave.md
│ ├── usePermission.md
│ ├── usePinchZoom.md
│ ├── usePrevious.md
│ ├── usePreviousDistinct.md
│ ├── usePromise.md
│ ├── useQueue.md
│ ├── useRaf.md
│ ├── useRafLoop.md
│ ├── useRafState.md
│ ├── useRendersCount.md
│ ├── useScratch.md
│ ├── useScroll.md
│ ├── useScrollbarWidth.md
│ ├── useScrolling.md
│ ├── useSearchParam.md
│ ├── useSessionStorage.md
│ ├── useSet.md
│ ├── useSetState.md
│ ├── useShallowCompareEffect.md
│ ├── useSize.md
│ ├── useSlider.md
│ ├── useSpeech.md
│ ├── useSpring.md
│ ├── useStartTyping.md
│ ├── useStateList.md
│ ├── useStateValidator.md
│ ├── useStateWithHistory.md
│ ├── useThrottle.md
│ ├── useThrottleFn.md
│ ├── useTimeout.md
│ ├── useTimeoutFn.md
│ ├── useTitle.md
│ ├── useToggle.md
│ ├── useTween.md
│ ├── useUnmount.md
│ ├── useUnmountPromise.md
│ ├── useUpdate.md
│ ├── useUpdateEffect.md
│ ├── useUpsert.md
│ ├── useVibrate.md
│ ├── useVideo.md
│ ├── useWindowScroll.md
│ └── useWindowSize.md
├── jest.config.base.ts
├── jest.config.node.ts
├── jest.config.ts
├── package.json
├── renovate.json
├── src/
│ ├── component/
│ │ └── UseKey.tsx
│ ├── factory/
│ │ ├── createBreakpoint.ts
│ │ ├── createGlobalState.ts
│ │ ├── createHTMLMediaHook.ts
│ │ ├── createMemo.ts
│ │ ├── createReducer.ts
│ │ ├── createReducerContext.ts
│ │ ├── createRenderProp.ts
│ │ ├── createRouter.ts
│ │ └── createStateContext.ts
│ ├── index.ts
│ ├── misc/
│ │ ├── hookState.ts
│ │ ├── isDeepEqual.ts
│ │ ├── parseTimeRanges.ts
│ │ ├── types.ts
│ │ └── util.ts
│ ├── useAsync.ts
│ ├── useAsyncFn.ts
│ ├── useAsyncRetry.ts
│ ├── useAudio.ts
│ ├── useBattery.ts
│ ├── useBeforeUnload.ts
│ ├── useBoolean.ts
│ ├── useClickAway.ts
│ ├── useCookie.ts
│ ├── useCopyToClipboard.ts
│ ├── useCounter.ts
│ ├── useCss.ts
│ ├── useCustomCompareEffect.ts
│ ├── useDebounce.ts
│ ├── useDeepCompareEffect.ts
│ ├── useDefault.ts
│ ├── useDrop.ts
│ ├── useDropArea.ts
│ ├── useEffectOnce.ts
│ ├── useEnsuredForwardedRef.ts
│ ├── useError.ts
│ ├── useEvent.ts
│ ├── useFavicon.ts
│ ├── useFirstMountState.ts
│ ├── useFullscreen.ts
│ ├── useGeolocation.ts
│ ├── useGetSet.ts
│ ├── useGetSetState.ts
│ ├── useHarmonicIntervalFn.ts
│ ├── useHash.ts
│ ├── useHover.ts
│ ├── useHoverDirty.ts
│ ├── useIdle.ts
│ ├── useIntersection.ts
│ ├── useInterval.ts
│ ├── useIsomorphicLayoutEffect.ts
│ ├── useKey.ts
│ ├── useKeyPress.ts
│ ├── useKeyPressEvent.ts
│ ├── useKeyboardJs.ts
│ ├── useLatest.ts
│ ├── useLifecycles.ts
│ ├── useList.ts
│ ├── useLocalStorage.ts
│ ├── useLocation.ts
│ ├── useLockBodyScroll.ts
│ ├── useLogger.ts
│ ├── useLongPress.ts
│ ├── useMap.ts
│ ├── useMeasure.ts
│ ├── useMeasureDirty.ts
│ ├── useMedia.ts
│ ├── useMediaDevices.ts
│ ├── useMediatedState.ts
│ ├── useMethods.ts
│ ├── useMotion.ts
│ ├── useMount.ts
│ ├── useMountedState.ts
│ ├── useMouse.ts
│ ├── useMouseHovered.ts
│ ├── useMouseWheel.ts
│ ├── useMultiStateValidator.ts
│ ├── useNetworkState.ts
│ ├── useNumber.ts
│ ├── useObservable.ts
│ ├── useOrientation.ts
│ ├── usePageLeave.ts
│ ├── usePermission.ts
│ ├── usePinchZoom.ts
│ ├── usePrevious.ts
│ ├── usePreviousDistinct.ts
│ ├── usePromise.ts
│ ├── useQueue.ts
│ ├── useRaf.ts
│ ├── useRafLoop.ts
│ ├── useRafState.ts
│ ├── useRendersCount.ts
│ ├── useScratch.ts
│ ├── useScroll.ts
│ ├── useScrollbarWidth.ts
│ ├── useScrolling.ts
│ ├── useSearchParam.ts
│ ├── useSessionStorage.ts
│ ├── useSet.ts
│ ├── useSetState.ts
│ ├── useShallowCompareEffect.ts
│ ├── useSize.tsx
│ ├── useSlider.ts
│ ├── useSpeech.ts
│ ├── useSpring.ts
│ ├── useStartTyping.ts
│ ├── useStateList.ts
│ ├── useStateValidator.ts
│ ├── useStateWithHistory.ts
│ ├── useThrottle.ts
│ ├── useThrottleFn.ts
│ ├── useTimeout.ts
│ ├── useTimeoutFn.ts
│ ├── useTitle.ts
│ ├── useToggle.ts
│ ├── useTween.ts
│ ├── useUnmount.ts
│ ├── useUnmountPromise.ts
│ ├── useUpdate.ts
│ ├── useUpdateEffect.ts
│ ├── useUpsert.ts
│ ├── useVibrate.ts
│ ├── useVideo.ts
│ ├── useWait.ts
│ ├── useWindowScroll.ts
│ └── useWindowSize.ts
├── stories/
│ ├── comps/
│ │ └── UseKey.story.tsx
│ ├── createBreakpoint.story.tsx
│ ├── createGlobalState.story.tsx
│ ├── createMemo.story.tsx
│ ├── createReducer.story.tsx
│ ├── createReducerContext.story.tsx
│ ├── createStateContext.story.tsx
│ ├── useAsync.story.tsx
│ ├── useAsyncFn.story.tsx
│ ├── useAsyncRetry.story.tsx
│ ├── useAudio.story.tsx
│ ├── useBattery.story.tsx
│ ├── useBeforeUnload.story.tsx
│ ├── useBoolean.story.tsx
│ ├── useClickAway.story.tsx
│ ├── useCookie.story.tsx
│ ├── useCopyToClipboard.story.tsx
│ ├── useCounter.story.tsx
│ ├── useCss.story.tsx
│ ├── useCustomCompareEffect.story.tsx
│ ├── useDebounce.story.tsx
│ ├── useDeepCompareEffect.story.tsx
│ ├── useDefault.story.tsx
│ ├── useDrop.story.tsx
│ ├── useDropArea.story.tsx
│ ├── useEffectOnce.story.tsx
│ ├── useEnsuredForwardedRef.story.tsx
│ ├── useError.story.tsx
│ ├── useEvent.story.tsx
│ ├── useFavicon.story.tsx
│ ├── useFirstMountState.story.tsx
│ ├── useFullscreen.story.tsx
│ ├── useGeolocation.story.tsx
│ ├── useGetSet.story.tsx
│ ├── useGetSetState.story.tsx
│ ├── useHarmonicIntervalFn.story.tsx
│ ├── useHash.story.tsx
│ ├── useHover.story.tsx
│ ├── useHoverDirty.story.tsx
│ ├── useIdle.story.tsx
│ ├── useIntersection.story.tsx
│ ├── useInterval.story.tsx
│ ├── useIsomorphicLayoutEffect.story.tsx
│ ├── useKey.story.tsx
│ ├── useKeyPress.story.tsx
│ ├── useKeyPressEvent.story.tsx
│ ├── useKeyboardJs.story.tsx
│ ├── useLatest.story.tsx
│ ├── useLifecycles.story.tsx
│ ├── useList.story.tsx
│ ├── useLocalStorage.story.tsx
│ ├── useLocation.story.tsx
│ ├── useLockBodyScroll.story.tsx
│ ├── useLogger.story.tsx
│ ├── useLongPress.story.tsx
│ ├── useMap.story.tsx
│ ├── useMeasure.story.tsx
│ ├── useMedia.story.tsx
│ ├── useMediaDevices.story.tsx
│ ├── useMediatedState.story.tsx
│ ├── useMethods.story.tsx
│ ├── useMotion.story.tsx
│ ├── useMount.story.tsx
│ ├── useMountedState.story.tsx
│ ├── useMouse.story.tsx
│ ├── useMouseHovered.story.tsx
│ ├── useMouseWheel.story.tsx
│ ├── useMultiStateValidator.story.tsx
│ ├── useNetwork.story.tsx
│ ├── useObservable.story.tsx
│ ├── useOrientation.story.tsx
│ ├── usePageLeave.story.tsx
│ ├── usePermission.story.tsx
│ ├── usePinchZoom.story.tsx
│ ├── usePrevious.story.tsx
│ ├── usePreviousDistinct.story.tsx
│ ├── usePromise.story.tsx
│ ├── useQueue.story.tsx
│ ├── useRaf.story.tsx
│ ├── useRafLoop.story.tsx
│ ├── useRafState.story.tsx
│ ├── useRendersCount.story.tsx
│ ├── useScratch.story.tsx
│ ├── useScroll.story.tsx
│ ├── useScrollbarWidth.story.tsx
│ ├── useScrolling.story.tsx
│ ├── useSearchParam.story.tsx
│ ├── useSessionStorage.story.tsx
│ ├── useSet.story.tsx
│ ├── useSetState.story.tsx
│ ├── useShallowCompareEffect.story.tsx
│ ├── useSize.story.tsx
│ ├── useSlider.story.tsx
│ ├── useSpeech.story.tsx
│ ├── useSpring.story.tsx
│ ├── useStartTyping.story.tsx
│ ├── useStateList.story.tsx
│ ├── useStateValidator.story.tsx
│ ├── useStateWithHistory.story.tsx
│ ├── useThrottle.story.tsx
│ ├── useThrottleFn.story.tsx
│ ├── useTimeout.story.tsx
│ ├── useTimeoutFn.story.tsx
│ ├── useTitle.story.tsx
│ ├── useToggle.story.tsx
│ ├── useTween.story.tsx
│ ├── useUnmount.story.tsx
│ ├── useUpdate.story.tsx
│ ├── useUpdateEffect.story.tsx
│ ├── useUpsert.story.tsx
│ ├── useVibrate.story.tsx
│ ├── useVideo.story.tsx
│ ├── useWindowScroll.story.tsx
│ ├── useWindowSize.story.tsx
│ └── util/
│ ├── CenterStory.tsx
│ ├── ConsoleStory.tsx
│ ├── NewTabStory.tsx
│ └── ShowDocs.tsx
├── tests/
│ ├── createBreakpoint.test.ts
│ ├── createGlobalState.test.ts
│ ├── createMemo.test.ts
│ ├── createReducer.test.ts
│ ├── createReducerContext.test.tsx
│ ├── createStateContext.test.tsx
│ ├── misc/
│ │ └── hookState.test.ts
│ ├── setupTests.ts
│ ├── useAsync.test.tsx
│ ├── useAsyncFn.test.tsx
│ ├── useAudio.test.ts
│ ├── useBoolean.test.ts
│ ├── useCookie.test.tsx
│ ├── useCopyToClipboard.test.ts
│ ├── useCounter.test.ts
│ ├── useCustomCompareEffect.test.ts
│ ├── useDebounce.test.ts
│ ├── useDeepCompareEffect.test.ts
│ ├── useDefault.test.ts
│ ├── useEffectOnce.test.ts
│ ├── useEnsuredForwardedRef.test.tsx
│ ├── useError.test.ts
│ ├── useEvent.test.ts
│ ├── useFavicon.test.tsx
│ ├── useFirstMountState.test.ts
│ ├── useGetSet.test.ts
│ ├── useGetSetState.test.ts
│ ├── useHash.test.ts
│ ├── useIntersection.test.tsx
│ ├── useInterval.test.ts
│ ├── useLatest.test.ts
│ ├── useList.test.ts
│ ├── useLocalStorage.test.ts
│ ├── useLogger.test.ts
│ ├── useLongPress.test.tsx
│ ├── useMap.test.ts
│ ├── useMeasure.test.ts
│ ├── useMedia.test.ts
│ ├── useMediatedState.test.ts
│ ├── useMethods.test.ts
│ ├── useMount.test.ts
│ ├── useMountedState.test.tsx
│ ├── useMultiStateValidator.test.ts
│ ├── useNetworkState.test.ts
│ ├── useNumber.test.ts
│ ├── useObservable.test.ts
│ ├── useOrientation.test.ts
│ ├── usePrevious.test.ts
│ ├── usePreviousDistinct.test.tsx
│ ├── useQueue.test.ts
│ ├── useRaf.test.ts
│ ├── useRafLoop.test.tsx
│ ├── useRafState.test.ts
│ ├── useRendersCount.test.ts
│ ├── useScrollbarWidth.test.ts
│ ├── useSearchParam.test.ts
│ ├── useSet.test.ts
│ ├── useSetState.test.ts
│ ├── useShallowCompareEffect.test.ts
│ ├── useSpring.test.ts
│ ├── useStateList.test.ts
│ ├── useStateValidator.test.ts
│ ├── useStateWithHistory.test.ts
│ ├── useThrottle.test.ts
│ ├── useThrottleFn.test.ts
│ ├── useTimeout.test.ts
│ ├── useTimeoutFn.test.ts
│ ├── useTitle.test.ts
│ ├── useToggle.test.ts
│ ├── useTween.test.ts
│ ├── useUnmount.test.ts
│ ├── useUnmountPromise.test.ts
│ ├── useUpdate.test.ts
│ ├── useUpdateEffect.test.ts
│ ├── useUpsert.test.ts
│ ├── useWindowScroll.test.tsx
│ └── useWindowSize.test.tsx
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 100
[*.{ts, tsx}]
ij_typescript_enforce_trailing_comma = keep
ij_typescript_use_double_quotes = false
ij_typescript_force_quote_style = true
ij_typescript_align_imports = false
ij_typescript_align_multiline_ternary_operation = false
ij_typescript_align_multiline_parameters_in_calls = false
ij_typescript_align_multiline_parameters = false
ij_typescript_align_multiline_chained_methods = false
ij_typescript_else_on_new_line = false
ij_typescript_catch_on_new_line = false
ij_typescript_spaces_within_interpolation_expressions = false
[*.md]
max_line_length = 100
trim_trailing_whitespace = false
[COMMIT_EDITMSG]
max_line_length = 80
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: ['react-app', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
trailingComma: 'es5',
tabWidth: 2,
printWidth: 100,
semicolons: true,
quoteProps: 'as-needed',
jsxSingleQuote: false,
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: 'always',
endOfLine: 'lf',
},
],
},
};
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [
"streamich",
"wardoost",
"xobotyi",
"Belco90",
"ankithkonda",
"ayush987goyal",
"NullVoxPopuli",
"lintuming",
"Granipouss",
"ythecombinator",
"james2406",
"jakapatb",
"MrHuangJser",
"zaguiini",
"ppeeou",
"liuyuchenzh",
"brickspert",
"artywhite",
"PetterIve",
"realdennis",
"lvl99",
"gelove",
"KusStar",
"xiaoxiangmoe",
"nmccready",
"mattleonowicz",
"kevinnorris",
"dubzzz",
"dependabot[bot]",
"ShizukuIchi",
"ManojBahuguna",
"Jivings",
"Dosant",
"zsh2401",
"xiaoboost",
"revskill10",
"mtinner",
"monkeywithacupcake",
"mitchheddles",
"maxzitron",
"macinjoke",
"jeetiss",
"ilyalesik",
"hijiangtao",
"f",
"elliottsj",
"droganov",
"denysdovhan",
"dabuside",
"benneq",
"azukaar",
"ariesjia",
"andrico1234",
"adesurirey",
"OBe95",
"FredyC",
"Cretezy",
"zyy7259",
"zslabs",
"vinitsood",
"uxitten",
"thevtm",
"tanem",
"suyingtao",
"srph",
"rkostrzewski",
"qianL93",
"o-alexandrov",
"nucleartux",
"natew",
"maxmalov",
"liaoyinglong",
"koenvanzuijlen",
"josmardias",
"jeemyeong",
"jazzqi",
"jakyle",
"jakeboone02",
"inker",
"glarivie",
"garrettmaring",
"dovidweisz",
"daniel-hauser",
"d-asensio",
"charlax",
"TylerR909",
"Rogdham",
"OctoD",
"MajorBreakfast",
"Jfelix61",
"Flydiverny",
"FlickerLogicalStack",
"DmacMcgreg",
"Dattaya",
"Andrey-Bazhanov",
"AlvaroBernalG"
]
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report if you having any problems using the package
title: ''
labels: ''
assignees: ''
---
**What is the current behavior?**
**Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than `react-use`. Paste the link to your [JSFiddle](https://jsfiddle.net) or [CodeSandbox](https://codesandbox.io) example below:**
**What is the expected behavior?**
**A little about versions:**
- _OS_:
- _Browser (vendor and version)_:
- _React_:
- _`react-use`_:
- _Did this worked in the previous package version?_
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Have an idea? Great! Let us know, maybe we`ve been waiting only for you =)
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
# Description
<!-- Please include a summary of the change along with relevant motivation and context. -->
## Type of change
<!-- Check all relevant options. -->
- [ ] Bug fix _(non-breaking change which fixes an issue)_
- [ ] New feature _(non-breaking change which adds functionality)_
- [ ] **Breaking change** _(fix or feature that would cause existing functionality to not work as before)_
# Checklist
- [ ] Read the [Contributing Guide](https://github.com/streamich/react-use/blob/master/CONTRIBUTING.md)
- [ ] Perform a code self-review
- [ ] Comment the code, particularly in hard-to-understand areas
- [ ] Add documentation
- [ ] Add hook's story at Storybook
- [ ] Cover changes with tests
- [ ] Ensure the test suite passes (`yarn test`)
- [ ] Provide 100% tests coverage
- [ ] Make sure code lints (`yarn lint`). Fix it with `yarn lint:fix` in case of failure.
- [ ] Make sure types are fine (`yarn lint:types`).
<!-- If you can't check all the checkboxes right now - check what you can, create a Draft PR, make some changes if needed and get back to it when you will be able to put some marks in list. -->
================================================
FILE: .github/workflows/check-codebase.yml
================================================
name: Check codebase
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Check out repository
uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: 20
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run build
run: yarn build
# storybook:
# name: Storybook
# runs-on: ubuntu-latest
# steps:
# - name: Check out repository
# uses: actions/checkout@v2
# - name: Setup node
# uses: actions/setup-node@v1
# with:
# node-version: 20
# - name: Install dependencies
# run: yarn install --frozen-lockfile
# - name: Run build:storybook
# run: yarn storybook:build
lint:
name: Linting
runs-on: ubuntu-latest
steps:
- name: Check out repository
uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: 20
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Lint with ESLint
run: yarn lint
- name: Lint with TSC
if: ${{ always() }}
run: yarn lint:types
unit-tests:
name: Unit tests
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [macos-latest, ubuntu-latest]
node: [20, 22]
steps:
- name: Check out repository
uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run unit tests
run: yarn test
================================================
FILE: .github/workflows/mirror.yml
================================================
name: Node.js CI
on:
push:
branches: [master]
jobs:
mirror:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Push To Gitlab
env:
token: ${{ secrets.GITLAB_TOKEN }}
run: |
git config user.name "streamich"
git config user.email "react-use+streamich@users.noreply.github.com"
git remote add mirror "https://oauth2:${token}@gitlab.com/streamich/react-use.git"
git push mirror master
================================================
FILE: .github/workflows/release.yml
================================================
name: Node.js CI
on:
push:
branches: [master, next]
jobs:
release:
if: ${{ github.event_name == 'push' && (github.event.ref == 'refs/heads/master' || github.event.ref == 'refs/heads/next') }}
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22.x]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: yarn
- run: yarn install --frozen-lockfile
- run: yarn lint
- run: yarn test
- run: yarn lint:types
- run: yarn build
- name: Semantic Release
uses: cycjimmy/semantic-release-action@v4
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# IDE files
.idea
.vscode
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
# build output
lib/
esm
.DS_Store
src/parser.ts
.cache/
.puppet-master/
storybook-static/
package-lock.json
================================================
FILE: .storybook/addons.js
================================================
import '@storybook/addon-knobs/register';
import '@storybook/addon-options/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
================================================
FILE: .storybook/config.js
================================================
import {configure} from '@storybook/react';
import {setOptions} from '@storybook/addon-options';
setOptions({
sortStoriesByKind: false,
showStoriesPanel: true,
showAddonPanel: true,
showSearchBox: false,
addonPanelInRight: true,
hierarchySeparator: /\//,
hierarchyRootSeparator: /\|/,
sidebarAnimations: false,
});
const req = require.context('../stories/', true, /\.story\.tsx?$/);
const loadStories = () => {
req.keys().forEach((filename) => req(filename));
};
configure(loadStories, module);
================================================
FILE: .storybook/webpack.config.js
================================================
const path = require('path');
const { compilerOptions } = require('../tsconfig.json');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const basedir = path.join(__dirname, '..');
module.exports = async ({ config, mode }) => {
config.module.rules.push(
{
test: /\.md?$/,
loader: "markdown-loader",
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: [
path.join(basedir, 'src'),
path.join(basedir, 'stories'),
],
options: {
transpileOnly: true, // use transpileOnly mode to speed-up compilation
compilerOptions: {
...compilerOptions,
declaration: false,
},
},
},
);
config.plugins.push(new ForkTsCheckerWebpackPlugin());
config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
config.resolve.enforceExtension = false;
// disable the hint about too big bundle
config.performance.hints = false;
return config;
};
================================================
FILE: .travis.yml
================================================
language: node_js
os:
- linux
cache:
yarn: true
directories:
- ~/.npm
notifications:
email: false
node_js:
- '10'
script:
- yarn lint
- yarn test
- yarn build
- yarn storybook:build
matrix:
allow_failures: []
fast_finish: true
branches:
except:
- /^v\d+\.\d+\.\d+$/
- master
- next
- gh-pages
================================================
FILE: CHANGELOG.md
================================================
# [17.6.0](https://github.com/streamich/react-use/compare/v17.5.1...v17.6.0) (2024-12-09)
### Features
* add onChange callback to useWindowSize ([ea656f7](https://github.com/streamich/react-use/commit/ea656f7e751b8366360ce2aa8238057bbbc1251a))
* add onChange callback to useWindowSize ([3eb531a](https://github.com/streamich/react-use/commit/3eb531ac9e9e04641df29aafbd2677869cdcb085))
## [17.5.1](https://github.com/streamich/react-use/compare/v17.5.0...v17.5.1) (2024-07-20)
### Bug Fixes
* 🐛 bump nano-css dependency ([adfb337](https://github.com/streamich/react-use/commit/adfb337d5b11427798afc5a21c6ebdaa76212182))
# [17.5.0](https://github.com/streamich/react-use/compare/v17.4.4...v17.5.0) (2024-01-22)
### Features
* add `isFirst` and `isLast` methods to `useStateList` hook ([ac64414](https://github.com/streamich/react-use/commit/ac64414bea4c8afadfb382da9fea44ee89b41e2d))
* **pencil:** add isFirst and isLast return value to 'useStateList' ([75218e4](https://github.com/streamich/react-use/commit/75218e45dfdcdc6ea193e278cb97ceee98c00f1b))
* **pencil:** fix with yarn lint:fix ([6a9dde5](https://github.com/streamich/react-use/commit/6a9dde596ae25c0dd2fa97b0cf354143fbc5b5ff))
## [17.4.4](https://github.com/streamich/react-use/compare/v17.4.3...v17.4.4) (2024-01-21)
### Bug Fixes
* typo in example ([0534648](https://github.com/streamich/react-use/commit/05346481a15a321b13838eead0bda3024b0d163f))
## [17.4.3](https://github.com/streamich/react-use/compare/v17.4.2...v17.4.3) (2024-01-13)
### Bug Fixes
* update useMedia hook to use recommended approach of MDN ([e7379f0](https://github.com/streamich/react-use/commit/e7379f088787cbf9274c1fc21d36061f04855e4c))
## [17.4.2](https://github.com/streamich/react-use/compare/v17.4.1...v17.4.2) (2023-12-01)
### Bug Fixes
* correct peer dependencies ([d770587](https://github.com/streamich/react-use/commit/d77058729654397b68b251e8211bf0edc0b4ed50))
## [17.4.1](https://github.com/streamich/react-use/compare/v17.4.0...v17.4.1) (2023-11-28)
### Bug Fixes
* 🐛 bump nano-css version ([812952b](https://github.com/streamich/react-use/commit/812952bb9ff004a844ec4285ad6c65d39597b11c))
# [17.4.0](https://github.com/streamich/react-use/compare/v17.3.3...v17.4.0) (2022-05-20)
### Features
* add usePinchZoom sensor hook ([3e042cb](https://github.com/streamich/react-use/commit/3e042cb2f3022349a53199b5cc5c380e3ebd9975))
## [17.3.3](https://github.com/streamich/react-use/compare/v17.3.2...v17.3.3) (2022-05-20)
### Bug Fixes
* bump React peer dependency version ([532e865](https://github.com/streamich/react-use/commit/532e8653a50d39dd439d9664d4813a1d7a5b4f3c))
* resolve [#2319](https://github.com/streamich/react-use/issues/2319) ([4884b2c](https://github.com/streamich/react-use/commit/4884b2c74085e0841af7c36cca34e16d698d1b4c))
* resolve @types/react@18 break change, React.FC ([20b7817](https://github.com/streamich/react-use/commit/20b78178d0033cc2e0c2a904e413b20ee864c816))
## [17.3.2](https://github.com/streamich/react-use/compare/v17.3.1...v17.3.2) (2021-12-30)
### Bug Fixes
* useMedia SSR hydration bug with defaultState ([#2216](https://github.com/streamich/react-use/issues/2216)) ([5c01189](https://github.com/streamich/react-use/commit/5c0118941280bb265ca7813afb987f89c8c97a17))
## [17.3.1](https://github.com/streamich/react-use/compare/v17.3.0...v17.3.1) (2021-08-31)
### Performance Improvements
* ⚡️ change title only if it changed ([51ef8d9](https://github.com/streamich/react-use/commit/51ef8d99bad31186ec5420d8b729748507c8a1bf))
# [17.3.0](https://github.com/streamich/react-use/compare/v17.2.4...v17.3.0) (2021-08-31)
### Bug Fixes
* do not re-render unncessarily in useAsyncFn hook ([fa3ba25](https://github.com/streamich/react-use/commit/fa3ba2520ede6866b599f6df55fdfa6395058cd2))
### Features
* useAudio add playing state ([3203610](https://github.com/streamich/react-use/commit/3203610efdcb8e1fe3c6a17ea19e41bacbeb851b))
## [17.2.4](https://github.com/streamich/react-use/compare/v17.2.3...v17.2.4) (2021-04-23)
### Bug Fixes
* lint issues. ([66b0f23](https://github.com/streamich/react-use/commit/66b0f235477c5f93807df75a53a84b3c5cd053e5))
* **useLocalStorage:** reinitialize on key change ([fdd1b23](https://github.com/streamich/react-use/commit/fdd1b23fd7ba6ae30139eeef02c552a8c7d6d333))
* add generic typing to createHTMLMediaHook. no typecheck problem with ref anymore. ([1f547ef](https://github.com/streamich/react-use/commit/1f547efb12d6cbe7687e86925ad80bd85fac3dfd))
* add generic typing to createHTMLMediaHook. no typecheck problem with ref anymore. ([ac4dd78](https://github.com/streamich/react-use/commit/ac4dd786f42a2c59bdaaf9ddebe2e830982d7fcc))
## [17.2.3](https://github.com/streamich/react-use/compare/v17.2.2...v17.2.3) (2021-04-06)
### Bug Fixes
* lint issues. ([5a5a575](https://github.com/streamich/react-use/commit/5a5a5755bc1f10add9c7a100ea6577ab6d427c0c))
## [17.2.2](https://github.com/streamich/react-use/compare/v17.2.1...v17.2.2) (2021-04-06)
### Bug Fixes
* **useStateWithHistory:** support callback style setState ([fca687d](https://github.com/streamich/react-use/commit/fca687d32c37148dab3072f053109f6c4d3c36ba))
## [17.2.1](https://github.com/streamich/react-use/compare/v17.2.0...v17.2.1) (2021-03-11)
### Bug Fixes
* lint issues. ([3e8af15](https://github.com/streamich/react-use/commit/3e8af15086135c873d18079a0b92b21da668a2ff))
* useMeasure type definitions for SVG ([e200f7f](https://github.com/streamich/react-use/commit/e200f7fcbb371a1d794be8d350f9559f940e5760))
* useUnmountPromise stops on immediate update ([9ff5c09](https://github.com/streamich/react-use/commit/9ff5c09e671c4f07f25f30a60617fca7660e7607))
# [17.2.0](https://github.com/streamich/react-use/compare/v17.1.1...v17.2.0) (2021-03-10)
### Bug Fixes
* delete isClient ([72f4cb9](https://github.com/streamich/react-use/commit/72f4cb9b405b3729975bca3acb06658ca467d15b))
* lint issues. ([dc5bbe0](https://github.com/streamich/react-use/commit/dc5bbe0e94d131dda90942ba90c14b200df3f34e))
* **useOrientation:** handle orientation being 0 ([793b053](https://github.com/streamich/react-use/commit/793b0539f0305e2512e7022c45a5c33b842d24d5))
* **useOrientation:** update tests to increase coverage ([f9c743f](https://github.com/streamich/react-use/commit/f9c743fa8375ef726d33f85285d4a5af608f9a42))
* use window inside useEffect ([2f33aa8](https://github.com/streamich/react-use/commit/2f33aa8182c92bf56d49ec3184e6b20f0c0c1e1e))
### Features
* **useOrientation:** add tests ([f45cb70](https://github.com/streamich/react-use/commit/f45cb707b52363f1cb1b32a0ebf2fdbdae79b322))
## [17.1.1](https://github.com/streamich/react-use/compare/v17.1.0...v17.1.1) (2021-02-10)
### Bug Fixes
* useMountedState should not change state on componentDidUpdate lifecycle ([701b306](https://github.com/streamich/react-use/commit/701b306ed97382cbec73c834f6d3dd7baa58e339))
# [17.1.0](https://github.com/streamich/react-use/compare/v17.0.2...v17.1.0) (2021-02-01)
### Features
* **prettier:** make prettier a part of eslint. ([b6993a6](https://github.com/streamich/react-use/commit/b6993a6f95a1b493945c03aecc44dafd10870816))
## [17.0.2](https://github.com/streamich/react-use/compare/v17.0.1...v17.0.2) (2021-02-01)
### Bug Fixes
* proper definition for `useMeasure` ([1461527](https://github.com/streamich/react-use/commit/1461527ffc55b2a1e3c9dc6a0efc2572b66e5381))
## [17.0.1](https://github.com/streamich/react-use/compare/v17.0.0...v17.0.1) (2021-01-31)
### Bug Fixes
* proper definition for isBrowser and isNavigator states. ([a087deb](https://github.com/streamich/react-use/commit/a087deb48e57b1f0a23a2d0a28d0c2d10a640cd6)), closes [#1777](https://github.com/streamich/react-use/issues/1777)
# [17.0.0](https://github.com/streamich/react-use/compare/v16.1.0...v17.0.0) (2021-01-31)
### Features
* refactor the useNetwork hook. ([23037f2](https://github.com/streamich/react-use/commit/23037f207d07604dd2cd7e2cc4ba9475221be780))
### BREAKING CHANGES
* `useNetwork` hook renamed to `useNetworkState`.
# [16.1.0](https://github.com/streamich/react-use/compare/v16.0.0...v16.1.0) (2021-01-31)
### Features
* improve `on` and `off` util functions typing. ([723c588](https://github.com/streamich/react-use/commit/723c588fef6aba9f10ea9f5ea7bc444532519f9a))
# [16.0.0](https://github.com/streamich/react-use/compare/v15.3.8...v16.0.0) (2021-01-30)
### chore
* refactoring and rearrangement. ([a27f09f](https://github.com/streamich/react-use/commit/a27f09fd367f8b172866b5fcbaf66f9a5a3481bb))
### BREAKING CHANGES
* all `create*` factories been moved to `factory` subdirectory and in case direct import should be imported like `react-use/esm/factory/createBreakpoint`
* `comps` directory renamed to `component`
## [15.3.8](https://github.com/streamich/react-use/compare/v15.3.7...v15.3.8) (2021-01-08)
### Bug Fixes
* improve useStateValidator and useMultiStateValidator typings. ([acff81d](https://github.com/streamich/react-use/commit/acff81d99abdbbefcc2985297ee01c3cda9ef4c9))
## [15.3.7](https://github.com/streamich/react-use/compare/v15.3.6...v15.3.7) (2021-01-08)
### Bug Fixes
* [#1646](https://github.com/streamich/react-use/issues/1646) ([ebc7094](https://github.com/streamich/react-use/commit/ebc7094bbc156be57b3de855c6984c1d056cf0e6))
## [15.3.6](https://github.com/streamich/react-use/compare/v15.3.5...v15.3.6) (2021-01-07)
### Bug Fixes
* Fix issues in tests ([7668ce5](https://github.com/streamich/react-use/commit/7668ce5c5f0f186437907f1c352d3a62e3ae8ba7))
## [15.3.4](https://github.com/streamich/react-use/compare/v15.3.3...v15.3.4) (2020-09-04)
### Bug Fixes
* useLongPress hook linting fixes. ([479dd99](https://github.com/streamich/react-use/commit/479dd9977bfcc43ccadc58eb93690adee462a16e))
## [15.3.3](https://github.com/streamich/react-use/compare/v15.3.2...v15.3.3) (2020-07-24)
### Bug Fixes
* replace createFactory usages with createElement ([ad29bea](https://github.com/streamich/react-use/commit/ad29bea7b03f46aa697e6623bdf7a17347ace651))
## [15.3.2](https://github.com/streamich/react-use/compare/v15.3.1...v15.3.2) (2020-06-29)
### Bug Fixes
* **useFullscreen:** fix typings so [#1205](https://github.com/streamich/react-use/issues/1205) can be merged. ([e6e55a3](https://github.com/streamich/react-use/commit/e6e55a3f94993b621566ac66488fd973e992704f))
## [15.3.1](https://github.com/streamich/react-use/compare/v15.3.0...v15.3.1) (2020-06-29)
### Bug Fixes
* **usePrevious:** revert the reworked variant as a fix of [#1315](https://github.com/streamich/react-use/issues/1315) ([a4279eb](https://github.com/streamich/react-use/commit/a4279eb660f6b433ed88e0d90c2bb0b3158d3b00))
# [15.3.0](https://github.com/streamich/react-use/compare/v15.2.5...v15.3.0) (2020-06-19)
### Features
* **usePrevious:** reworked the hook, now it is more memory-efficient. ([8c6f467](https://github.com/streamich/react-use/commit/8c6f4675beac9c71e96126dd6f06f455c4e4bf01))
## [15.2.5](https://github.com/streamich/react-use/compare/v15.2.4...v15.2.5) (2020-06-15)
### Bug Fixes
* bump react-universal-interface ([1540c1a](https://github.com/streamich/react-use/commit/1540c1ab8f338dfa2f53de16506fbf47803d45ba))
## [15.2.4](https://github.com/streamich/react-use/compare/v15.2.3...v15.2.4) (2020-06-13)
### Bug Fixes
* doesn't unlock the body on unmount ([1ead4ef](https://github.com/streamich/react-use/commit/1ead4efab6c67131e480570b578b0ce803204953))
## [15.2.3](https://github.com/streamich/react-use/compare/v15.2.2...v15.2.3) (2020-06-13)
### Bug Fixes
* 🐛 improve how text is dropped in useDrop hook ([b2f46d1](https://github.com/streamich/react-use/commit/b2f46d10f25c5e658bb7f790950a1fd9a4e5e288))
## [15.2.2](https://github.com/streamich/react-use/compare/v15.2.1...v15.2.2) (2020-06-08)
### Bug Fixes
* repair useKeyboardJs hook ([8410bb0](https://github.com/streamich/react-use/commit/8410bb042fec8f1996e8bcecb85fadfbb414b3f9))
## [15.2.1](https://github.com/streamich/react-use/compare/v15.2.0...v15.2.1) (2020-06-08)
### Bug Fixes
* 🐛 bump fast-deep-equal, and consume it through ES import ([f3c715c](https://github.com/streamich/react-use/commit/f3c715c12412224be815e0d1bc3e2285f275df26))
# [15.2.0](https://github.com/streamich/react-use/compare/v15.1.1...v15.2.0) (2020-06-07)
### Features
* add useMouseWheel hook ([d714b12](https://github.com/streamich/react-use/commit/d714b12e8b2d071c65fe4dc7643be10f69dc5dba))
## [15.1.1](https://github.com/streamich/react-use/compare/v15.1.0...v15.1.1) (2020-05-30)
### Bug Fixes
* 🐛 use useIsomorphicLayoutEffect everywhere ([dad26e5](https://github.com/streamich/react-use/commit/dad26e507d3409300f945bc57930f88c5a11953d))
# [15.1.0](https://github.com/streamich/react-use/compare/v15.0.3...v15.1.0) (2020-05-18)
### Bug Fixes
* display alert timeout in story ([2bb65ef](https://github.com/streamich/react-use/commit/2bb65ef3d85e82b6bd134a714e51e27876037734))
* mutate ref in render directly ([5488f5e](https://github.com/streamich/react-use/commit/5488f5eb3e8504dcae03584b5797a48659e16623))
### Features
* add useLatest hook ([d6fe267](https://github.com/streamich/react-use/commit/d6fe2676153f19302ce170b03ceadc3bab5a945a))
## [15.0.3](https://github.com/streamich/react-use/compare/v15.0.2...v15.0.3) (2020-05-18)
### Bug Fixes
* 🐛 correct useMeasure typings ([bedbad7](https://github.com/streamich/react-use/commit/bedbad723171ed1946bc80f72609432983d4c1ba))
## [15.0.2](https://github.com/streamich/react-use/compare/v15.0.1...v15.0.2) (2020-05-17)
### Bug Fixes
* 🐛 dont memoize useScratch event handlers ([ffc7579](https://github.com/streamich/react-use/commit/ffc75790e329cb26000a174074c07d80283b5443))
## [15.0.1](https://github.com/streamich/react-use/compare/v15.0.0...v15.0.1) (2020-05-16)
### Bug Fixes
* **deps:** update dependency tslib to v2 ([6aebf3c](https://github.com/streamich/react-use/commit/6aebf3c25e14d12d8f34e62ecbaecfd3125cf2d9))
# [15.0.0](https://github.com/streamich/react-use/compare/v14.3.0...v15.0.0) (2020-05-16)
* v15 release ([0f82ba6](https://github.com/streamich/react-use/commit/0f82ba650ed3e8b05b5458a243e7eb246fd954d2))
### Bug Fixes
* 🐛 better serialization handling in useLocalStorage hook ([68fb835](https://github.com/streamich/react-use/commit/68fb835ea64cf5587c99645a09c6de93ab1b71df))
* 🐛 correctly test if env is browser in useMeasure ([9ae494f](https://github.com/streamich/react-use/commit/9ae494fc1874619aad2f3856df790cbc1a2a8239))
* 🐛 make useMeasure work on server ([2daf769](https://github.com/streamich/react-use/commit/2daf76990d0e1040f8c0f31e16e7c1eebd94c9bf))
* 🐛 remove set dependencies in useSet hook ([90ba9d0](https://github.com/streamich/react-use/commit/90ba9d000ff35039028cb66753114a6b0b452491))
* 🐛 revert useMeasure defaults to zeros ([dc92b64](https://github.com/streamich/react-use/commit/dc92b646d0cd0f12868fde370c83e94ca3c7e297))
* remove console log 🤓 ([f17c8a0](https://github.com/streamich/react-use/commit/f17c8a0f8e63bfddb8f13a094edbea1e3ee9680b))
* **useLocalStorage:** using undefined for empty value instead of null ([1620e01](https://github.com/streamich/react-use/commit/1620e019fff94fb4a7a711fd3121ec02c7e99301))
* use latest set object in useSet "has" method ([41f9452](https://github.com/streamich/react-use/commit/41f9452722d6fb7d2628480d7ce657e4f08e441a))
### Features
* 🎸 add useScratch() sensor hook ([58db2f9](https://github.com/streamich/react-use/commit/58db2f989d5d4f75ac5e8ef54c25a9df8bb173a5))
* 🎸 catch up with v14 ([be69035](https://github.com/streamich/react-use/commit/be69035caf13f551e7717d3de0ea339c8943a9de))
* 🎸 improve implementation of useMeasure() hook ([a164843](https://github.com/streamich/react-use/commit/a1648439021a45c781c2074489d7c6aaaa867406))
* 🎸 improve implementation of useMeasure() hook ([4d88240](https://github.com/streamich/react-use/commit/4d8824064a0afbeba5a15597b007f8463fdbe027))
* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([866f3d7](https://github.com/streamich/react-use/commit/866f3d740b08d4772dfbad9c48b3b0b8bac69a28))
* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([2bbc73a](https://github.com/streamich/react-use/commit/2bbc73a5f08e9a21bb3054527fc8ff9fd51cfd47))
* 🎸 remove resize-observer-polyfill from useMeasure ([2a13fba](https://github.com/streamich/react-use/commit/2a13fbae45af3a26c984de03130139181c0c3839))
* 🎸 remove resize-observer-polyfill from useMeasure ([bf11131](https://github.com/streamich/react-use/commit/bf11131052c4a4ab2b9306486f0b171ac15057b0))
* Dependencies inference for useCustomCompareEffect ([477c164](https://github.com/streamich/react-use/commit/477c1644a7225513c53294337be3c5b50126712f))
* improve useAsyncFn and useAsync typings ([85967e2](https://github.com/streamich/react-use/commit/85967e294ce268bd1edc57968f2c3f85a3ee6cb7))
* keep previous state in useAsyncFn ([54ac91b](https://github.com/streamich/react-use/commit/54ac91b28dca0f5c276b092d563b9c821cbab081))
* use useReducer in useUpdate hook, instead of useState + useCallback ([6575b14](https://github.com/streamich/react-use/commit/6575b14985ede9b8f45fdad068ee9238d6f7ab80))
* **useLocalStorage:** add remove feature. ([#229](https://github.com/streamich/react-use/issues/229)) ([587de16](https://github.com/streamich/react-use/commit/587de16ef5c85497d01e63247a578116d0605ff9))
### BREAKING CHANGES
* implementation of useMeasure and useLocalStorage changed
* resize-observer-polyfill package is not used with useMeasure() hook
anymore.
* useMeasure() now defaults all values to -1, if they were not set and
internal implementation heavily refactored.
* useAsyncFn now keeps hold of old result/error when called multiple times
* resize-observer-polyfill package is not used with useMeasure() hook
anymore.
* useMeasure() now defaults all values to -1, if they were not set and
internal implementation heavily refactored.
# [14.3.0](https://github.com/streamich/react-use/compare/v14.2.0...v14.3.0) (2020-05-16)
### Features
* 🎸 add useScratch hook ([2a2a298](https://github.com/streamich/react-use/commit/2a2a298b73f7beb9a2a61c309e649be3d2527473))
# [14.2.0](https://github.com/streamich/react-use/compare/v14.1.1...v14.2.0) (2020-04-24)
### Features
* 🎸 onScrubStop provide value where scrub stopped ([138b43c](https://github.com/streamich/react-use/commit/138b43cd1ac9ea7c76a1a42fca48ebdcb94e1006))
## [14.1.1](https://github.com/streamich/react-use/compare/v14.1.0...v14.1.1) (2020-04-11)
### Bug Fixes
* **deps:** update dependency @types/js-cookie to v2.2.6 ([f9f4fae](https://github.com/streamich/react-use/commit/f9f4fae6a9a136fdd6763dd2b2214c1746fb0595))
# [14.1.0](https://github.com/streamich/react-use/compare/v14.0.0...v14.1.0) (2020-04-08)
### Features
* add useHash hook ([44a6cde](https://github.com/streamich/react-use/commit/44a6cde00e1c74831d7c38b8ae4946f6f2171cf5))
# [14.0.0](https://github.com/streamich/react-use/compare/v13.27.1...v14.0.0) (2020-04-04)
### Features
* **useRafLoop:** implement [#1090](https://github.com/streamich/react-use/issues/1090) ([1ef1272](https://github.com/streamich/react-use/commit/1ef1272d6dbe8fbcc2d08223cd80ef32ce28a9c9))
* **useRafLoop:** reworked the hook, now it do not re-render parent component. ([baa2f75](https://github.com/streamich/react-use/commit/baa2f7511e18fc9fec29376afa27af73de633d8f))
### BREAKING CHANGES
* **useRafLoop:** changed return array, now it returns only functions in next order: [stop, start, isActive].
Parent component is not re-rendered on loop start/stop.
## [13.27.1](https://github.com/streamich/react-use/compare/v13.27.0...v13.27.1) (2020-03-25)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.9.5 ([9751390](https://github.com/streamich/react-use/commit/97513900de7b60d8da62db35125e2f81458a4f25))
# [13.27.0](https://github.com/streamich/react-use/compare/v13.26.5...v13.27.0) (2020-03-03)
### Features
* **useSet:** add toggle a method ([#968](https://github.com/streamich/react-use/issues/968)) ([477614f](https://github.com/streamich/react-use/commit/477614f9ef84d3cfa75f9c8a97dbc73d30dd411d))
## [13.26.5](https://github.com/streamich/react-use/compare/v13.26.4...v13.26.5) (2020-03-02)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.9.4 ([29d017b](https://github.com/streamich/react-use/commit/29d017b2417f53455ee182aa1ad9574a3ee098d6))
## [13.26.4](https://github.com/streamich/react-use/compare/v13.26.3...v13.26.4) (2020-02-29)
### Bug Fixes
* useHoverDirty eslint fix ([0ed6521](https://github.com/streamich/react-use/commit/0ed6521179fe193007f504b3b221a6c5295f9fa0))
## [13.26.3](https://github.com/streamich/react-use/compare/v13.26.2...v13.26.3) (2020-02-26)
### Bug Fixes
* **deps:** update dependency @types/js-cookie to v2.2.5 ([1f3217a](https://github.com/streamich/react-use/commit/1f3217a07f0b11ed4d6264687188f587501c133b))
## [13.26.2](https://github.com/streamich/react-use/compare/v13.26.1...v13.26.2) (2020-02-24)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.9.3 ([6e2287d](https://github.com/streamich/react-use/commit/6e2287d7e84ef1e455da7209ee32cf86643b00a5))
## [13.26.1](https://github.com/streamich/react-use/compare/v13.26.0...v13.26.1) (2020-02-16)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.9.0 ([601d787](https://github.com/streamich/react-use/commit/601d7871a0325677a24a7a93fc9ce2b11132370f))
# [13.26.0](https://github.com/streamich/react-use/compare/v13.25.1...v13.26.0) (2020-02-15)
### Bug Fixes
* add initialState to deps ([b394f3d](https://github.com/streamich/react-use/commit/b394f3d72356d331dbce48acd3686bbb64d331b5))
### Features
* add useMethods state hook ([7554b9a](https://github.com/streamich/react-use/commit/7554b9a61eb9b4744b9feb113775ff538b16beaf))
## [13.25.1](https://github.com/streamich/react-use/compare/v13.25.0...v13.25.1) (2020-02-15)
### Bug Fixes
* 🐛 support default event in useClickAway() ([24281cd](https://github.com/streamich/react-use/commit/24281cdf042da5f83068c6108c67a36fe0cfc74d))
* generic type on event arg in onClickAway callback on useClickAway ([4ffe454](https://github.com/streamich/react-use/commit/4ffe4542aec840bd6150223489d2c38821954336))
# [13.25.0](https://github.com/streamich/react-use/compare/v13.24.1...v13.25.0) (2020-02-15)
### Features
* **useBeforeUnload:** allow passing a dirty function ([#842](https://github.com/streamich/react-use/issues/842)) ([c4a14a4](https://github.com/streamich/react-use/commit/c4a14a4fb370c7628e4cc5861e31cc64a66b64b0))
## [13.24.1](https://github.com/streamich/react-use/compare/v13.24.0...v13.24.1) (2020-02-15)
### Performance Improvements
* use fast-deep-equal for deep comparisons ([b9a8aad](https://github.com/streamich/react-use/commit/b9a8aad053a40028f119192ddecedb5c7ec05247))
# [13.24.0](https://github.com/streamich/react-use/compare/v13.23.0...v13.24.0) (2020-02-04)
### Features
* add createReducerContext and createStateContext factories ([84b8310](https://github.com/streamich/react-use/commit/84b83101c2253f8935b2804a48ade081e41982a8))
# [13.23.0](https://github.com/streamich/react-use/compare/v13.22.5...v13.23.0) (2020-02-04)
### Features
* add createGlobalState hook generator ([fda7199](https://github.com/streamich/react-use/commit/fda7199b7da23f321e68d0784deb1f0f3d273e3c))
## [13.22.5](https://github.com/streamich/react-use/compare/v13.22.4...v13.22.5) (2020-02-04)
### Bug Fixes
* 🐛 don't throw in useMediaDevices on missing browser API ([0f119fe](https://github.com/streamich/react-use/commit/0f119fe23e837e0d8c2a8c882b1aaf3b62cbc7d2))
* handle undefined mediaDevices ([6f68437](https://github.com/streamich/react-use/commit/6f68437359704dace7d518f1f013bc3516400c67))
## [13.22.4](https://github.com/streamich/react-use/compare/v13.22.3...v13.22.4) (2020-01-30)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.8.2 ([#930](https://github.com/streamich/react-use/issues/930)) ([727b950](https://github.com/streamich/react-use/commit/727b95096ec6654ba4da22f6825e6d8982258033))
## [13.22.3](https://github.com/streamich/react-use/compare/v13.22.2...v13.22.3) (2020-01-28)
### Bug Fixes
* **useIntersection:** disconnect an old IntersectionObserver instance when the ref changes ([ac2f54a](https://github.com/streamich/react-use/commit/ac2f54a8f683296feecfeeb6354738b9ebbc36d0))
* **useIntersection:** reset an intersectionObserverEntry when the ref changes ([3f8687e](https://github.com/streamich/react-use/commit/3f8687e1f51cc48efbf6be3f0677f5bd06ecba08))
* **useIntersection:** return null if IntersectionObserver is not supported ([4f6d388](https://github.com/streamich/react-use/commit/4f6d3887be5cf62ce42357a7bf27f4ae8b080eba))
## [13.22.2](https://github.com/streamich/react-use/compare/v13.22.1...v13.22.2) (2020-01-27)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.7.0 ([db74101](https://github.com/streamich/react-use/commit/db741019324c3d20a17bbc20a014cedd21e66b1a))
## [13.22.1](https://github.com/streamich/react-use/compare/v13.22.0...v13.22.1) (2020-01-27)
### Bug Fixes
* **deps:** update dependency @xobotyi/scrollbar-width to v1.6.0 ([431ba5d](https://github.com/streamich/react-use/commit/431ba5d0816cb7701b03460c5efa5199ad27cbc4))
# [13.22.0](https://github.com/streamich/react-use/compare/v13.21.0...v13.22.0) (2020-01-24)
### Bug Fixes
* Fail testing and update doc ([57b9041](https://github.com/streamich/react-use/commit/57b904118e2cd1f1b4e367c9a14e2a981db2f06a))
### Features
* add useLongPress hook ([45681b8](https://github.com/streamich/react-use/commit/45681b88e3fd3d9337a38da07248c46ec6d5956e))
# [13.21.0](https://github.com/streamich/react-use/compare/v13.20.0...v13.21.0) (2020-01-20)
### Features
* Typings for `useDefault` ([fa0f53b](https://github.com/streamich/react-use/commit/fa0f53bf86a712f4b7e503cdf4718a8ff5448e05))
# [13.20.0](https://github.com/streamich/react-use/compare/v13.19.0...v13.20.0) (2020-01-17)
### Features
* `useMap`: allow resetting with provided value other then initial ([7645f72](https://github.com/streamich/react-use/commit/7645f7249dbf52db140dfc8b7866cb4a171e439c))
# [13.19.0](https://github.com/streamich/react-use/compare/v13.18.0...v13.19.0) (2020-01-16)
### Features
* add useError hook ([65f3644](https://github.com/streamich/react-use/commit/65f364420524bacebe8f8149b8197fb62bff1a08))
# [13.18.0](https://github.com/streamich/react-use/compare/v13.17.0...v13.18.0) (2020-01-16)
### Bug Fixes
* check for null ([d619c39](https://github.com/streamich/react-use/commit/d619c39a21e9f0b4b4bfc6a209311bf0bd495f9b))
### Features
* add serializer/deserializer option to useLocalStorage ([5316510](https://github.com/streamich/react-use/commit/5316510babf7606a2f4b78de2b0eb85c930890cf))
# [13.17.0](https://github.com/streamich/react-use/compare/v13.16.1...v13.17.0) (2020-01-15)
### Features
* add support for body lock on iOS ([d778408](https://github.com/streamich/react-use/commit/d7784084fe84aca72efe85260101b00ef1df7580))
## [13.16.1](https://github.com/streamich/react-use/compare/v13.16.0...v13.16.1) (2020-01-14)
### Bug Fixes
* update the types dep for js-cookie ([5c55d59](https://github.com/streamich/react-use/commit/5c55d59a7d1d799cba7af87e15ab4a4b27a8fc67))
# [13.16.0](https://github.com/streamich/react-use/compare/v13.15.0...v13.16.0) (2020-01-14)
### Features
* add option to useTitle to restore title on un-mount ([b8b3e47](https://github.com/streamich/react-use/commit/b8b3e479cea6071d4310bac29f138bd8917eee0b))
# [13.15.0](https://github.com/streamich/react-use/compare/v13.14.3...v13.15.0) (2020-01-13)
### Features
* add useCookie hook ([4e5c90f](https://github.com/streamich/react-use/commit/4e5c90f021f56ae2008dc25daad69c43063f608f))
## [13.14.3](https://github.com/streamich/react-use/compare/v13.14.2...v13.14.3) (2020-01-08)
### Bug Fixes
* useUpdateEffect cleanup test returns false positive ([9b31c42](https://github.com/streamich/react-use/commit/9b31c42ccb42fe13fc24f7434b00a1bcbee8cd8a))
* useUpdateEffect test returning false positive ([#865](https://github.com/streamich/react-use/issues/865)) ([1946006](https://github.com/streamich/react-use/commit/1946006c4224bc61eabb797f4cdd7d20fff7ab25))
## [13.14.2](https://github.com/streamich/react-use/compare/v13.14.1...v13.14.2) (2020-01-08)
### Bug Fixes
* bump fast-shallow-equal ([19b2b39](https://github.com/streamich/react-use/commit/19b2b39eeae3898bd8d8e3478eb7459372bb09d5))
## [13.14.1](https://github.com/streamich/react-use/compare/v13.14.0...v13.14.1) (2020-01-07)
### Bug Fixes
* useUpdateEffect returns optional cleanup function ([0ce421c](https://github.com/streamich/react-use/commit/0ce421ced78fd6eb06a5676fefb856e18bfcacc1))
* useUpdateEffect returns optional cleanup function ([#864](https://github.com/streamich/react-use/issues/864)) ([7960127](https://github.com/streamich/react-use/commit/7960127a98c0d3c33000088fbd97804d41084f7d))
# [13.14.0](https://github.com/streamich/react-use/compare/v13.13.0...v13.14.0) (2020-01-03)
### Features
* 🎸 add [vertical] flag to useSlider() hook ([777865c](https://github.com/streamich/react-use/commit/777865c3ac6772fbda2bc0a6f58cde3eff7dec43))
# [13.13.0](https://github.com/streamich/react-use/compare/v13.12.2...v13.13.0) (2019-12-27)
### Features
* add useShallowCompareEffect and useCustomCompareEffect hooks ([ba8803e](https://github.com/streamich/react-use/commit/ba8803eab26d2d48028a4b7120a7354c6d318aea))
## [13.12.2](https://github.com/streamich/react-use/compare/v13.12.1...v13.12.2) (2019-12-10)
### Bug Fixes
* **useSet:** "has" method in useSet updated to reference latest set object ([4f1d8c2](https://github.com/streamich/react-use/commit/4f1d8c2cbd773f2a26e2eee4fbad88883ea4b405))
## [13.12.1](https://github.com/streamich/react-use/compare/v13.12.0...v13.12.1) (2019-12-09)
### Bug Fixes
* **useMap:** methods with side effects should be stable across renders. ([020b4db](https://github.com/streamich/react-use/commit/020b4dbc6c47ab25243ab8af257dd045e6c1bf6d))
# [13.12.0](https://github.com/streamich/react-use/compare/v13.11.0...v13.12.0) (2019-12-09)
### Features
* useScrollbarWidth hook; ([#825](https://github.com/streamich/react-use/issues/825)) ([125c7e9](https://github.com/streamich/react-use/commit/125c7e96a188405aea36e94ed1bb3d984232b2f6))
# [13.11.0](https://github.com/streamich/react-use/compare/v13.10.2...v13.11.0) (2019-12-08)
### Features
* 🎸 add useUnmountPromise hook ([01421bc](https://github.com/streamich/react-use/commit/01421bc634b941044e95c611f37eb87339486241))
## [13.10.2](https://github.com/streamich/react-use/compare/v13.10.1...v13.10.2) (2019-12-05)
### Bug Fixes
* useUpdate hitting maxInt, failing to trigger rerender ([93e7291](https://github.com/streamich/react-use/commit/93e72910abf2dafe5bdff625a21f633afd6e52c5))
## [13.10.1](https://github.com/streamich/react-use/compare/v13.10.0...v13.10.1) (2019-12-03)
### Bug Fixes
* "get" method in useMap updated to reference latest map object ([044d267](https://github.com/streamich/react-use/commit/044d2677aa474d19da776444b78bd3d2594c6ae5))
# [13.10.0](https://github.com/streamich/react-use/compare/v13.9.0...v13.10.0) (2019-11-28)
### Features
* useStateHistory ([#709](https://github.com/streamich/react-use/issues/709)) ([0a66359](https://github.com/streamich/react-use/commit/0a6635914319e9ef7a2902189a3c2dea90a2bf7f))
# [13.9.0](https://github.com/streamich/react-use/compare/v13.8.2...v13.9.0) (2019-11-23)
### Features
* add useFirstMountState & useRendersCount hooks ([#769](https://github.com/streamich/react-use/issues/769)) ([30abe2b](https://github.com/streamich/react-use/commit/30abe2b22e3cb7a3e4c6dedd2466d74ce660911d))
## [13.8.2](https://github.com/streamich/react-use/compare/v13.8.1...v13.8.2) (2019-11-22)
### Bug Fixes
* **#792:** make useUnmount invoke the current callback version instead of very first ([75284c6](https://github.com/streamich/react-use/commit/75284c62c8e4a68dfeb41a8d98a1e636e9ef531a)), closes [#792](https://github.com/streamich/react-use/issues/792)
## [13.8.1](https://github.com/streamich/react-use/compare/v13.8.0...v13.8.1) (2019-11-21)
### Bug Fixes
* useAsyncFn does not discard old promises and might produce races ([022fa0b](https://github.com/streamich/react-use/commit/022fa0b7b77d582a10c6ca61a3dcd901770011c8))
# [13.8.0](https://github.com/streamich/react-use/compare/v13.7.0...v13.8.0) (2019-11-14)
### Features
* **useStateValidator:** Refactor method and improve typings; ([436c210](https://github.com/streamich/react-use/commit/436c210f7b577c6958e47df3a244907b07a4db9f))
# [13.7.0](https://github.com/streamich/react-use/compare/v13.6.3...v13.7.0) (2019-11-14)
### Features
* Add useSet hook ([095b4de](https://github.com/streamich/react-use/commit/095b4de2321b8bf3431e3f66139629b0495f1ac9))
## [13.6.3](https://github.com/streamich/react-use/compare/v13.6.2...v13.6.3) (2019-11-12)
### Bug Fixes
* remove any types in useThrottleFn ([bb5baea](https://github.com/streamich/react-use/commit/bb5baea30cf59721098ca9e3185105bf1b82218b))
## [13.6.2](https://github.com/streamich/react-use/compare/v13.6.1...v13.6.2) (2019-11-11)
### Bug Fixes
* restrict useThrottleFn types ([61a83d1](https://github.com/streamich/react-use/commit/61a83d124d35d5606b6c0700faf1361fd3170ca4))
## [13.6.1](https://github.com/streamich/react-use/compare/v13.6.0...v13.6.1) (2019-11-10)
### Bug Fixes
* 🐛 check window.Event constructor exists in useLocation ([ad09431](https://github.com/streamich/react-use/commit/ad094311454c48873ba7143654a29b8a0c54459d))
# [13.6.0](https://github.com/streamich/react-use/compare/v13.5.0...v13.6.0) (2019-11-10)
### Features
* **useCounter:** `reset` to the newest initialValue ([#667](https://github.com/streamich/react-use/issues/667)) ([e653383](https://github.com/streamich/react-use/commit/e65338372adfccd4800496b377f63bcdf6646788))
# [13.5.0](https://github.com/streamich/react-use/compare/v13.4.0...v13.5.0) (2019-11-08)
### Bug Fixes
* **resolveHookState:** by accident removed needed type. ([59aa41c](https://github.com/streamich/react-use/commit/59aa41cff435f5adf7f38d361649761b8dd69794))
### Features
* **useList:** reimplemented useList hook; ([1840b57](https://github.com/streamich/react-use/commit/1840b577e2a3d321b8dbb44d5ae443e84d4d9e20))
# [13.4.0](https://github.com/streamich/react-use/compare/v13.3.0...v13.4.0) (2019-11-08)
### Features
* **useStateList:** implemented `currentIndex`, `setState`, `setStateAt` methods as requested in [#634](https://github.com/streamich/react-use/issues/634); ([43cb6aa](https://github.com/streamich/react-use/commit/43cb6aa612ae869e24f67acf6f0a1712a65f128b))
# [13.3.0](https://github.com/streamich/react-use/compare/v13.2.2...v13.3.0) (2019-11-06)
### Features
* useDebounce add cancel ([693aec8](https://github.com/streamich/react-use/commit/693aec8307c378697c88c635a401832f24d3531a))
* useDebounce add cancel ([26cab31](https://github.com/streamich/react-use/commit/26cab31f10a995ec45d6c1e2a2f724d9994d801f))
## [13.2.2](https://github.com/streamich/react-use/compare/v13.2.1...v13.2.2) (2019-11-06)
### Bug Fixes
* **#749:** now should work with SSR ([c12976c](https://github.com/streamich/react-use/commit/c12976cad26577a4be3ac65133268f41bbdc82da)), closes [#749](https://github.com/streamich/react-use/issues/749)
## [13.2.1](https://github.com/streamich/react-use/compare/v13.2.0...v13.2.1) (2019-11-04)
### Bug Fixes
* **yarn.lock:** re-create the yarn.lock file with nailed versions in devDeps ([f094a3a](https://github.com/streamich/react-use/commit/f094a3ae833f406137b9d5355843a6615af20164))
# [13.2.0](https://github.com/streamich/react-use/compare/v13.1.0...v13.2.0) (2019-11-04)
### Features
* re-create yarn.lock ([d48e03e](https://github.com/streamich/react-use/commit/d48e03e9ee38555ff29ca46fb6e75c13e9c23aba))
* re-create yarn.lock ([ccdffe0](https://github.com/streamich/react-use/commit/ccdffe027fba15bdca1f35dc375a0c32739aee6f))
* **usePreviousDistinct:** add tests for undefined value behaviour; ([cb373f9](https://github.com/streamich/react-use/commit/cb373f951fb3f34b9e54793687de14000a2dc08e))
* **usePreviousDistinct:** improve types; ([30f53e8](https://github.com/streamich/react-use/commit/30f53e8c5d7e8b27bf3f273ebfcacabf30146ba3))
* **usePreviousDistinct:** now predicate not called on initial render; ([fbe9b13](https://github.com/streamich/react-use/commit/fbe9b1303c0433d5608ca5b507d9c76711b5cb68))
* **useStateList:** rework useStateList to make it work properly. ([242c274](https://github.com/streamich/react-use/commit/242c274dd49779fa80f8b9e451c699205279339e))
* **useTitle:** reworked hook to make it synchronous without useUpdate; ([a133267](https://github.com/streamich/react-use/commit/a13326779ffd6885ac531240b984a77bcad3bee6))
* **useWindowSize:** A bit changed lyfecycle and added types; ([03bdecf](https://github.com/streamich/react-use/commit/03bdecf7ac6aa0ad863a1efd71c056aa41df62b7))
# [13.1.0](https://github.com/streamich/react-use/compare/v13.0.1...v13.1.0) (2019-11-01)
### Features
* pull request template for features ([1dc21f3](https://github.com/streamich/react-use/commit/1dc21f3))
## [13.0.1](https://github.com/streamich/react-use/compare/v13.0.0...v13.0.1) (2019-11-01)
### Bug Fixes
* **useLockBodyScroll:** infer overflow type directly from declaration. ([26baf47](https://github.com/streamich/react-use/commit/26baf47))
# [13.0.0](https://github.com/streamich/react-use/compare/v12.13.0...v13.0.0) (2019-11-01)
* Merge pull request #711 from streamich/remove-react-wait ([8d40f18](https://github.com/streamich/react-use/commit/8d40f18)), closes [#711](https://github.com/streamich/react-use/issues/711)
### Features
* remove useRefMounted hook ([ad74d3d](https://github.com/streamich/react-use/commit/ad74d3d))
* **useRefMounted:** remove obsolete hook; ([dc364c8](https://github.com/streamich/react-use/commit/dc364c8))
* **useWait:** removed from package due to it is simple reexport of other package; ([d7c38bd](https://github.com/streamich/react-use/commit/d7c38bd))
### BREAKING CHANGES
* useWait hook has been removed from react-use
* deprecated useRefMounted hook is now removed, use useMountedState hook instead
# [12.13.0](https://github.com/streamich/react-use/compare/v12.12.0...v12.13.0) (2019-10-31)
### Features
* **useCounter:** reworked with use of new resolveHookState function plus improved memory usage; ([befcf84](https://github.com/streamich/react-use/commit/befcf84))
* **useGetSet:** reworked with use of new resolveHookState function plus improved memory usage; ([9b5d0f2](https://github.com/streamich/react-use/commit/9b5d0f2))
* react-like state resolver to use it in stateful hooks; ([9fd02eb](https://github.com/streamich/react-use/commit/9fd02eb))
# [12.12.0](https://github.com/streamich/react-use/compare/v12.11.0...v12.12.0) (2019-10-31)
### Features
* add typings for createReducer ([f1cf036](https://github.com/streamich/react-use/commit/f1cf036))
# [12.11.0](https://github.com/streamich/react-use/compare/v12.10.0...v12.11.0) (2019-10-31)
### Features
* **useWait:** add deprecation messages to readme and export; ([d338245](https://github.com/streamich/react-use/commit/d338245))
# [12.10.0](https://github.com/streamich/react-use/compare/v12.9.1...v12.10.0) (2019-10-30)
### Features
* **useUpdate:** improve memory usage - now single function instance to increment all counters; ([0f02fd0](https://github.com/streamich/react-use/commit/0f02fd0))
## [12.9.1](https://github.com/streamich/react-use/compare/v12.9.0...v12.9.1) (2019-10-28)
### Bug Fixes
* useSize avoid crash in Safari 11 ([da0e66b](https://github.com/streamich/react-use/commit/da0e66b))
# [12.9.0](https://github.com/streamich/react-use/compare/v12.8.0...v12.9.0) (2019-10-26)
### Features
* add createBreakpoint ([79ba4ef](https://github.com/streamich/react-use/commit/79ba4ef))
# [12.8.0](https://github.com/streamich/react-use/compare/v12.7.2...v12.8.0) (2019-10-25)
### Features
* add ensuredForwardRef and useEnsuredForwardedRef ([1bfe063](https://github.com/streamich/react-use/commit/1bfe063))
## [12.7.2](https://github.com/streamich/react-use/compare/v12.7.1...v12.7.2) (2019-10-23)
### Bug Fixes
* 🐛 bump set-harmonic-interval package version ([f7c709a](https://github.com/streamich/react-use/commit/f7c709a))
## [12.7.1](https://github.com/streamich/react-use/compare/v12.7.0...v12.7.1) (2019-10-17)
### Bug Fixes
* example in the docs; ([7f54cad](https://github.com/streamich/react-use/commit/7f54cad))
* rename story's mediator and add `g` flag to it's regex; ([652b318](https://github.com/streamich/react-use/commit/652b318))
# [12.7.0](https://github.com/streamich/react-use/compare/v12.6.0...v12.7.0) (2019-10-17)
### Bug Fixes
* error throw tests; ([056875b](https://github.com/streamich/react-use/commit/056875b))
* useMultiStateValidator readme description; ([8c7f7f5](https://github.com/streamich/react-use/commit/8c7f7f5))
### Features
* useMultiStateValidator ([ae26988](https://github.com/streamich/react-use/commit/ae26988))
# [12.6.0](https://github.com/streamich/react-use/compare/v12.5.0...v12.6.0) (2019-10-16)
### Features
* useRafState ([#684](https://github.com/streamich/react-use/issues/684)) ([00816a4](https://github.com/streamich/react-use/commit/00816a4))
# [12.5.0](https://github.com/streamich/react-use/compare/v12.4.0...v12.5.0) (2019-10-13)
### Features
* useList allow pushing multiple items ([#621](https://github.com/streamich/react-use/issues/621)) ([a624364](https://github.com/streamich/react-use/commit/a624364))
# [12.4.0](https://github.com/streamich/react-use/compare/v12.3.2...v12.4.0) (2019-10-12)
### Features
* useIntersection ([#652](https://github.com/streamich/react-use/issues/652)) ([d5f359f](https://github.com/streamich/react-use/commit/d5f359f))
## [12.3.2](https://github.com/streamich/react-use/compare/v12.3.1...v12.3.2) (2019-10-12)
### Bug Fixes
* improve use of refs in dependency lists ([#655](https://github.com/streamich/react-use/issues/655)) ([ed8e26d](https://github.com/streamich/react-use/commit/ed8e26d))
## [12.3.1](https://github.com/streamich/react-use/compare/v12.3.0...v12.3.1) (2019-10-10)
### Bug Fixes
* move [@types](https://github.com/types)/react-wait to dependencies, closes [#661](https://github.com/streamich/react-use/issues/661) ([#662](https://github.com/streamich/react-use/issues/662)) ([6bdd74e](https://github.com/streamich/react-use/commit/6bdd74e))
# [12.3.0](https://github.com/streamich/react-use/compare/v12.2.3...v12.3.0) (2019-10-07)
### Features
* reset util callback for useList ([#654](https://github.com/streamich/react-use/issues/654)) ([9ea3548](https://github.com/streamich/react-use/commit/9ea3548))
## [12.2.3](https://github.com/streamich/react-use/compare/v12.2.2...v12.2.3) (2019-10-05)
### Bug Fixes
* move react-wait types to dev dependencies, closes [#644](https://github.com/streamich/react-use/issues/644) ([49372ac](https://github.com/streamich/react-use/commit/49372ac))
## [12.2.2](https://github.com/streamich/react-use/compare/v12.2.1...v12.2.2) (2019-09-26)
### Bug Fixes
* useDebounce remove deps from function arguments ([#623](https://github.com/streamich/react-use/issues/623)) ([23d6a5a](https://github.com/streamich/react-use/commit/23d6a5a))
## [12.2.1](https://github.com/streamich/react-use/compare/v12.2.0...v12.2.1) (2019-09-23)
### Bug Fixes
* remove attempt from deps of retry in useAsyncRetry ([#614](https://github.com/streamich/react-use/issues/614)) ([adce59e](https://github.com/streamich/react-use/commit/adce59e))
# [12.2.0](https://github.com/streamich/react-use/compare/v12.1.0...v12.2.0) (2019-09-02)
### Features
* improve useWindowSize performance rAF ([60a4937](https://github.com/streamich/react-use/commit/60a4937))
# [12.1.0](https://github.com/streamich/react-use/compare/v12.0.0...v12.1.0) (2019-09-01)
### Features
* 🎸 add useSearchParam() hook ([b22f32f](https://github.com/streamich/react-use/commit/b22f32f))
* 🎸 support server-side rendering in useSearchParam() hook ([64ac924](https://github.com/streamich/react-use/commit/64ac924))
# [12.0.0](https://github.com/streamich/react-use/compare/v11.3.2...v12.0.0) (2019-09-01)
### Features
* store "paused" instead of "isPlaying" in media state ([ff900d5](https://github.com/streamich/react-use/commit/ff900d5))
### BREAKING CHANGES
* now media players return "paused" instead of "isPlaying" in their state.
## [11.3.2](https://github.com/streamich/react-use/compare/v11.3.1...v11.3.2) (2019-08-25)
### Bug Fixes
* useThrottle & useThrottleFn proper timeout type; ([e2cdb94](https://github.com/streamich/react-use/commit/e2cdb94))
## [11.3.1](https://github.com/streamich/react-use/compare/v11.3.0...v11.3.1) (2019-08-25)
### Bug Fixes
* update createReducer to fix initial state ([fd083f2](https://github.com/streamich/react-use/commit/fd083f2))
# [11.3.0](https://github.com/streamich/react-use/compare/v11.2.0...v11.3.0) (2019-08-25)
### Features
* add usePreviousDistinct ([#551](https://github.com/streamich/react-use/issues/551)) ([6c3e569](https://github.com/streamich/react-use/commit/6c3e569))
# [11.2.0](https://github.com/streamich/react-use/compare/v11.1.1...v11.2.0) (2019-08-25)
### Features
* add useCircularIterate ([8d84340](https://github.com/streamich/react-use/commit/8d84340))
## [11.1.1](https://github.com/streamich/react-use/compare/v11.1.0...v11.1.1) (2019-08-25)
### Bug Fixes
* [#550](https://github.com/streamich/react-use/issues/550) ([2617d74](https://github.com/streamich/react-use/commit/2617d74))
# [11.1.0](https://github.com/streamich/react-use/compare/v11.0.2...v11.1.0) (2019-08-25)
### Features
* 🎸 add useHarmonicIntervalFn() hook ([d9f21e3](https://github.com/streamich/react-use/commit/d9f21e3))
## [11.0.2](https://github.com/streamich/react-use/compare/v11.0.1...v11.0.2) (2019-08-23)
### Bug Fixes
* **useSetState:** memoize setState callback ([0275329](https://github.com/streamich/react-use/commit/0275329))
* **useSetState:** memoize setState callback ([16f023f](https://github.com/streamich/react-use/commit/16f023f))
## [11.0.1](https://github.com/streamich/react-use/compare/v11.0.0...v11.0.1) (2019-08-23)
### Bug Fixes
* correct useSpring() hook behaviour ([d7a622d](https://github.com/streamich/react-use/commit/d7a622d))
# [11.0.0](https://github.com/streamich/react-use/compare/v10.8.0...v11.0.0) (2019-08-22)
### Features
* add cancel and reset methods to useTimeout ([283045a](https://github.com/streamich/react-use/commit/283045a))
* add useTimeoutFn ([284e6fd](https://github.com/streamich/react-use/commit/284e6fd))
### BREAKING CHANGES
* useTimeout now returns a tuple
# [10.8.0](https://github.com/streamich/react-use/compare/v10.7.1...v10.8.0) (2019-08-20)
### Bug Fixes
* Reworked useBattery hook ([1069060](https://github.com/streamich/react-use/commit/1069060))
* succeed useRafLoop tests ([09167df](https://github.com/streamich/react-use/commit/09167df))
### Features
* 🎸 support useBattery hook on server side ([5d31cf0](https://github.com/streamich/react-use/commit/5d31cf0))
* 🎸 use only one useState and one useEffect call ([2d0fabf](https://github.com/streamich/react-use/commit/2d0fabf))
## [10.7.1](https://github.com/streamich/react-use/compare/v10.7.0...v10.7.1) (2019-08-20)
### Bug Fixes
* async test warnings ([#543](https://github.com/streamich/react-use/issues/543)) ([7af237e](https://github.com/streamich/react-use/commit/7af237e))
# [10.7.0](https://github.com/streamich/react-use/compare/v10.6.4...v10.7.0) (2019-08-19)
### Features
* 🎸 add useUpsert ([6875e13](https://github.com/streamich/react-use/commit/6875e13))
* 🎸 export useUpsert from index ([3eda2b2](https://github.com/streamich/react-use/commit/3eda2b2))
* add useUpsert ([a7c2899](https://github.com/streamich/react-use/commit/a7c2899))
## [10.6.4](https://github.com/streamich/react-use/compare/v10.6.3...v10.6.4) (2019-08-19)
### Bug Fixes
* return from useUpdateEffect ([2f70dc2](https://github.com/streamich/react-use/commit/2f70dc2))
* useUpdateEffect add return ([8b24df4](https://github.com/streamich/react-use/commit/8b24df4))
## [10.6.3](https://github.com/streamich/react-use/compare/v10.6.2...v10.6.3) (2019-08-19)
### Bug Fixes
* allow import default for ESM ([bd3a062](https://github.com/streamich/react-use/commit/bd3a062))
* rollup build error: Cannot call a namespace ('writeText') ([b3e672b](https://github.com/streamich/react-use/commit/b3e672b))
## [10.6.2](https://github.com/streamich/react-use/compare/v10.6.1...v10.6.2) (2019-08-18)
### Bug Fixes
* 🐛 fix master ([d1df7a5](https://github.com/streamich/react-use/commit/d1df7a5))
## [10.6.1](https://github.com/streamich/react-use/compare/v10.6.0...v10.6.1) (2019-08-17)
### Bug Fixes
* useUpdateEffect run on the wrong time ([1d5cd10](https://github.com/streamich/react-use/commit/1d5cd10))
# [10.6.0](https://github.com/streamich/react-use/compare/v10.5.0...v10.6.0) (2019-08-17)
### Features
* add min/max to useNumber ([586faab](https://github.com/streamich/react-use/commit/586faab))
# [10.5.0](https://github.com/streamich/react-use/compare/v10.4.0...v10.5.0) (2019-08-03)
### Features
* add useRafLoop hook ([be7d7c3](https://github.com/streamich/react-use/commit/be7d7c3))
# [10.4.0](https://github.com/streamich/react-use/compare/v10.3.1...v10.4.0) (2019-08-02)
### Features
* add useMountedState hook ([9081b99](https://github.com/streamich/react-use/commit/9081b99))
## [10.3.1](https://github.com/streamich/react-use/compare/v10.3.0...v10.3.1) (2019-08-02)
### Bug Fixes
* **storybook:** fix useKeyboardJs import path ([b7481f6](https://github.com/streamich/react-use/commit/b7481f6))
* **useKeyboardJs:** fix argument type error ([8c820ce](https://github.com/streamich/react-use/commit/8c820ce))
* allow string list in useKeyboardJs hook ([aecbd0b](https://github.com/streamich/react-use/commit/aecbd0b))
# [10.3.0](https://github.com/streamich/react-use/compare/v10.2.0...v10.3.0) (2019-07-26)
### Features
* add useDefault hook ([ade0557](https://github.com/streamich/react-use/commit/ade0557))
# [10.2.0](https://github.com/streamich/react-use/compare/v10.1.2...v10.2.0) (2019-07-25)
### Features
* useWindowScroll - for cross-browser compatibility ([5987cc8](https://github.com/streamich/react-use/commit/5987cc8))
* useWindowScroll - for cross-browser compatibility ([#480](https://github.com/streamich/react-use/issues/480)) ([e37dd8d](https://github.com/streamich/react-use/commit/e37dd8d))
## [10.1.2](https://github.com/streamich/react-use/compare/v10.1.1...v10.1.2) (2019-07-21)
### Bug Fixes
* remove OpenCollective postinstall hook ([26dcebc](https://github.com/streamich/react-use/commit/26dcebc))
## [10.1.1](https://github.com/streamich/react-use/compare/v10.1.0...v10.1.1) (2019-07-21)
### Bug Fixes
* useMouse & useMouseHovered type definitions for SVG ([9e97451](https://github.com/streamich/react-use/commit/9e97451))
* useMouse & useMouseHovered type definitions for SVG ([#479](https://github.com/streamich/react-use/issues/479)) ([e2e4a60](https://github.com/streamich/react-use/commit/e2e4a60))
# [10.1.0](https://github.com/streamich/react-use/compare/v10.0.0...v10.1.0) (2019-07-17)
### Features
* add latest `react-wait` types ([6ebe3bb](https://github.com/streamich/react-use/commit/6ebe3bb))
# [10.0.0](https://github.com/streamich/react-use/compare/v9.12.0...v10.0.0) (2019-07-17)
### Features
* remove big libs from peerDependencies ([1dbdc5d](https://github.com/streamich/react-use/commit/1dbdc5d))
### BREAKING CHANGES
* `useSpring` and `useKeyboardJs` hooks need to be imported directly now and libs they depend on are not in peerDependencies anymore.
# [9.12.0](https://github.com/streamich/react-use/compare/v9.11.2...v9.12.0) (2019-07-16)
### Bug Fixes
* 🐛 fix useDebounce import ([40b33da](https://github.com/streamich/react-use/commit/40b33da))
### Features
* add useInterval hook ([6645ed9](https://github.com/streamich/react-use/commit/6645ed9))
## [9.11.2](https://github.com/streamich/react-use/compare/v9.11.1...v9.11.2) (2019-07-16)
### Bug Fixes
* support useMedia usage server-side ([50a5160](https://github.com/streamich/react-use/commit/50a5160))
## [9.11.1](https://github.com/streamich/react-use/compare/v9.11.0...v9.11.1) (2019-07-16)
### Bug Fixes
* createReducer stable dispatch function identity ([9780545](https://github.com/streamich/react-use/commit/9780545))
# [9.11.0](https://github.com/streamich/react-use/compare/v9.10.0...v9.11.0) (2019-07-11)
### Features
* useMedia - initialize state with call to media query ([#454](https://github.com/streamich/react-use/issues/454)) ([ab81897](https://github.com/streamich/react-use/commit/ab81897))
# [9.10.0](https://github.com/streamich/react-use/compare/v9.9.0...v9.10.0) (2019-07-10)
### Features
* expose useIsomorphicLayoutEffect + docs ([#451](https://github.com/streamich/react-use/issues/451)) ([8dcbbf1](https://github.com/streamich/react-use/commit/8dcbbf1))
# [9.9.0](https://github.com/streamich/react-use/compare/v9.8.3...v9.9.0) (2019-07-10)
### Features
* add usePermission ([4da40b9](https://github.com/streamich/react-use/commit/4da40b9))
* usePermission ([588a0c5](https://github.com/streamich/react-use/commit/588a0c5))
## [9.8.3](https://github.com/streamich/react-use/compare/v9.8.2...v9.8.3) (2019-07-10)
### Bug Fixes
* useLocalStorage types for functional updates ([e2b8278](https://github.com/streamich/react-use/commit/e2b8278))
## [9.8.2](https://github.com/streamich/react-use/compare/v9.8.1...v9.8.2) (2019-07-08)
### Bug Fixes
* **useSize:** prevents accessing iframe's property when it's not defined ([c9b5cdc](https://github.com/streamich/react-use/commit/c9b5cdc)), closes [#442](https://github.com/streamich/react-use/issues/442)
* **useSize:** prevents accessing iframe's property when it's not… ([#443](https://github.com/streamich/react-use/issues/443)) ([8f04e8f](https://github.com/streamich/react-use/commit/8f04e8f))
* iframe can be null ([a9e3bab](https://github.com/streamich/react-use/commit/a9e3bab))
## [9.8.1](https://github.com/streamich/react-use/compare/v9.8.0...v9.8.1) (2019-06-30)
### Bug Fixes
* lint fixes via lint:fix ([7ce8e4f](https://github.com/streamich/react-use/commit/7ce8e4f))
* useMap uses prevMap state which is safer ([3554f79](https://github.com/streamich/react-use/commit/3554f79))
* **useMap:** remove now also uses prevMap state to not overwrite or lose state ([0a59869](https://github.com/streamich/react-use/commit/0a59869))
# [9.8.0](https://github.com/streamich/react-use/compare/v9.7.2...v9.8.0) (2019-06-30)
### Bug Fixes
* 🐛 fix test and add pre-push hook ([1353b6c](https://github.com/streamich/react-use/commit/1353b6c))
### Features
* add voice option in use speech ([6dc2dd5](https://github.com/streamich/react-use/commit/6dc2dd5))
* add voice option in useSpeech ([#422](https://github.com/streamich/react-use/issues/422)) ([c32d02b](https://github.com/streamich/react-use/commit/c32d02b))
## [9.7.2](https://github.com/streamich/react-use/compare/v9.7.1...v9.7.2) (2019-06-27)
### Bug Fixes
* save to localStorage only when state changes ([ba6d375](https://github.com/streamich/react-use/commit/ba6d375))
* use correct list variable in useList ([#412](https://github.com/streamich/react-use/issues/412)) ([b937296](https://github.com/streamich/react-use/commit/b937296))
## [9.7.1](https://github.com/streamich/react-use/compare/v9.7.0...v9.7.1) (2019-06-23)
### Bug Fixes
* 🐛 use synchronouse effect to subscribe to observables ([376eea3](https://github.com/streamich/react-use/commit/376eea3))
# [9.7.0](https://github.com/streamich/react-use/compare/v9.6.0...v9.7.0) (2019-06-19)
### Features
* improve useClickAway() hook ([#394](https://github.com/streamich/react-use/issues/394)) ([c60df19](https://github.com/streamich/react-use/commit/c60df19))
# [9.6.0](https://github.com/streamich/react-use/compare/v9.5.0...v9.6.0) (2019-06-18)
### Bug Fixes
* add additional ref check on clean up ([d18d2d8](https://github.com/streamich/react-use/commit/d18d2d8))
* always return something from effect ([3355426](https://github.com/streamich/react-use/commit/3355426))
### Features
* 🎸 add useScrolling hook ([bd9928e](https://github.com/streamich/react-use/commit/bd9928e))
* 🎸 add useScrolling hook to index ([b3ba702](https://github.com/streamich/react-use/commit/b3ba702))
* add useScrolling docs ([25a93f6](https://github.com/streamich/react-use/commit/25a93f6))
* add useScrolling story ([760edf1](https://github.com/streamich/react-use/commit/760edf1))
# [9.5.0](https://github.com/streamich/react-use/compare/v9.4.1...v9.5.0) (2019-06-16)
### Bug Fixes
* add missing `rate` property ([fb795a6](https://github.com/streamich/react-use/commit/fb795a6))
### Features
* add rate option in useSpeech ([f52f1f7](https://github.com/streamich/react-use/commit/f52f1f7))
* add rate option in useSpeech ([#399](https://github.com/streamich/react-use/issues/399)) ([0e4ebc6](https://github.com/streamich/react-use/commit/0e4ebc6))
## [9.4.1](https://github.com/streamich/react-use/compare/v9.4.0...v9.4.1) (2019-06-12)
### Bug Fixes
* fix Storybook docs Markdown import ([962a312](https://github.com/streamich/react-use/commit/962a312))
# [9.4.0](https://github.com/streamich/react-use/compare/v9.3.0...v9.4.0) (2019-06-04)
### Bug Fixes
* fix TypeScript error ([72e3036](https://github.com/streamich/react-use/commit/72e3036))
* **docs:** syntax error, improve examples ([8bbe9d8](https://github.com/streamich/react-use/commit/8bbe9d8))
### Features
* improve createReducer function ([6ba2d93](https://github.com/streamich/react-use/commit/6ba2d93)), closes [#164](https://github.com/streamich/react-use/issues/164)
# [9.3.0](https://github.com/streamich/react-use/compare/v9.2.0...v9.3.0) (2019-05-31)
### Features
* improve useAsync and useAsyncFn ([3ab1d5d](https://github.com/streamich/react-use/commit/3ab1d5d))
# [9.2.0](https://github.com/streamich/react-use/compare/v9.1.2...v9.2.0) (2019-05-31)
### Features
* 🎸 improve useObservable() type annotations ([d0c3713](https://github.com/streamich/react-use/commit/d0c3713))
* improve useSetState() typings ([fad4440](https://github.com/streamich/react-use/commit/fad4440))
## [9.1.2](https://github.com/streamich/react-use/compare/v9.1.1...v9.1.2) (2019-05-24)
### Bug Fixes
* **useAudio:** src change should reset isPlaying state ([65bffca](https://github.com/streamich/react-use/commit/65bffca))
## [9.1.1](https://github.com/streamich/react-use/compare/v9.1.0...v9.1.1) (2019-05-24)
### Bug Fixes
* **useMap:** more stringent type ([7bbbe47](https://github.com/streamich/react-use/commit/7bbbe47))
# [9.1.0](https://github.com/streamich/react-use/compare/v9.0.0...v9.1.0) (2019-05-24)
### Features
* pass arguments to useAsyncFn function ([6789d10](https://github.com/streamich/react-use/commit/6789d10))
# [9.0.0](https://github.com/streamich/react-use/compare/v8.4.0...v9.0.0) (2019-05-09)
### Features
* improve useToggle interface ([81b1cac](https://github.com/streamich/react-use/commit/81b1cac))
### BREAKING CHANGES
* useToggle interface changed
# [8.4.0](https://github.com/streamich/react-use/compare/v8.3.1...v8.4.0) (2019-05-07)
### Features
* add usePrevious hook ([4861a39](https://github.com/streamich/react-use/commit/4861a39))
## [8.3.1](https://github.com/streamich/react-use/compare/v8.3.0...v8.3.1) (2019-04-29)
### Bug Fixes
* **useRefMounted:** only run and cleanup once ([6a651be](https://github.com/streamich/react-use/commit/6a651be))
# [8.3.0](https://github.com/streamich/react-use/compare/v8.2.0...v8.3.0) (2019-04-29)
### Features
* add type define for createMemo ([6638c1a](https://github.com/streamich/react-use/commit/6638c1a))
# [8.2.0](https://github.com/streamich/react-use/compare/v8.1.4...v8.2.0) (2019-04-23)
### Bug Fixes
* make options useGeolocation optional ([01959a1](https://github.com/streamich/react-use/commit/01959a1))
### Features
* support options for useGeolocation ([7d4c59e](https://github.com/streamich/react-use/commit/7d4c59e))
## [8.1.4](https://github.com/streamich/react-use/compare/v8.1.3...v8.1.4) (2019-04-23)
### Bug Fixes
* 🐛 support click away on iOS, allow user to chose events ([f14e1d7](https://github.com/streamich/react-use/commit/f14e1d7))
## [8.1.3](https://github.com/streamich/react-use/compare/v8.1.2...v8.1.3) (2019-04-18)
### Bug Fixes
* 🐛 don't fire typing event on modifier keys pressed ([ce76edf](https://github.com/streamich/react-use/commit/ce76edf))
## [8.1.2](https://github.com/streamich/react-use/compare/v8.1.1...v8.1.2) (2019-04-12)
### Bug Fixes
* **useIdle:** include 'ms' prop in uesEffect dependencies ([7a670a2](https://github.com/streamich/react-use/commit/7a670a2))
## [8.1.1](https://github.com/streamich/react-use/compare/v8.1.0...v8.1.1) (2019-04-09)
### Bug Fixes
* 🐛 make useLocation work on server, improve hook ([6f6030a](https://github.com/streamich/react-use/commit/6f6030a))
# [8.1.0](https://github.com/streamich/react-use/compare/v8.0.0...v8.1.0) (2019-04-08)
### Features
* add useAsyncCallback hook ([c6ecb36](https://github.com/streamich/react-use/commit/c6ecb36))
# [8.0.0](https://github.com/streamich/react-use/compare/v7.6.0...v8.0.0) (2019-04-08)
### Features
* change useCopyToClipboard implementation ([c391038](https://github.com/streamich/react-use/commit/c391038))
### BREAKING CHANGES
* useCopyToClipboard interface changed
# [7.6.0](https://github.com/streamich/react-use/compare/v7.5.0...v7.6.0) (2019-04-07)
### Bug Fixes
* 🐛 handle case when activeElement is empty ([3d83705](https://github.com/streamich/react-use/commit/3d83705))
### Features
* 🎸 add useStartTypings hook ([5fda2e0](https://github.com/streamich/react-use/commit/5fda2e0))
# [7.5.0](https://github.com/streamich/react-use/compare/v7.4.0...v7.5.0) (2019-04-07)
### Features
* 🎸 add onCopy and onError events and use NPM copy library ([2553225](https://github.com/streamich/react-use/commit/2553225))
* 🎸 improve useCopyToClipboard() hook ([f185044](https://github.com/streamich/react-use/commit/f185044))
* 🎸 make useCopyToClipboard hook interface more idiomatic ([0a6d773](https://github.com/streamich/react-use/commit/0a6d773))
* add useCopyToClipboard() hook ([4d8e276](https://github.com/streamich/react-use/commit/4d8e276))
# [7.4.0](https://github.com/streamich/react-use/compare/v7.3.1...v7.4.0) (2019-04-07)
### Features
* add useDeepCompareEffect hook ([77e015b](https://github.com/streamich/react-use/commit/77e015b))
## [7.3.1](https://github.com/streamich/react-use/compare/v7.3.0...v7.3.1) (2019-03-31)
### Bug Fixes
* 🐛 call key{up/donw} callbacks in useKeyPressEvent correct ([60064a6](https://github.com/streamich/react-use/commit/60064a6))
# [7.3.0](https://github.com/streamich/react-use/compare/v7.2.0...v7.3.0) (2019-03-31)
### Features
* add useEffectOnce hook ([06c12d4](https://github.com/streamich/react-use/commit/06c12d4))
# [7.2.0](https://github.com/streamich/react-use/compare/v7.1.1...v7.2.0) (2019-03-31)
### Features
* default dependency array for useAsync and useAsyncRetry ([cb140a0](https://github.com/streamich/react-use/commit/cb140a0))
## [7.1.1](https://github.com/streamich/react-use/compare/v7.1.0...v7.1.1) (2019-03-30)
### Bug Fixes
* consistent refs in useFullscreen hook ([dc85499](https://github.com/streamich/react-use/commit/dc85499))
# [7.1.0](https://github.com/streamich/react-use/compare/v7.0.2...v7.1.0) (2019-03-29)
### Bug Fixes
* useClickAway TypeScript typings ([4b20083](https://github.com/streamich/react-use/commit/4b20083))
### Features
* pass click event in useClickAway to user ([01e38bc](https://github.com/streamich/react-use/commit/01e38bc))
## [7.0.2](https://github.com/streamich/react-use/compare/v7.0.1...v7.0.2) (2019-03-29)
### Bug Fixes
* 🐛 add rebound and keyboards deps back to peerDependencies ([4fc46aa](https://github.com/streamich/react-use/commit/4fc46aa))
## [7.0.1](https://github.com/streamich/react-use/compare/v7.0.0...v7.0.1) (2019-03-29)
### Bug Fixes
* add optional attributes in AsyncState ([b0c9770](https://github.com/streamich/react-use/commit/b0c9770))
# [7.0.0](https://github.com/streamich/react-use/compare/v6.2.2...v7.0.0) (2019-03-28)
### Bug Fixes
* 🐛 fix TypeScript build errors ([5c95f28](https://github.com/streamich/react-use/commit/5c95f28))
* 🐛 make sure all paths in usePageLeave return ([6655092](https://github.com/streamich/react-use/commit/6655092))
* 🐛 track "over" state better in useDrop hook ([acc355c](https://github.com/streamich/react-use/commit/acc355c))
### Features
* 🎸 add clear() to useList, use fn for state updates ([b20cf7c](https://github.com/streamich/react-use/commit/b20cf7c))
* 🎸 add createRenderProp function for creating render-props ([f4fd748](https://github.com/streamich/react-use/commit/f4fd748))
* 🎸 add useDrop hook ([6e415cf](https://github.com/streamich/react-use/commit/6e415cf))
* 🎸 add useDropArea hook ([676d0de](https://github.com/streamich/react-use/commit/676d0de))
* 🎸 add useEvent hook ([2a13cfb](https://github.com/streamich/react-use/commit/2a13cfb))
* 🎸 add useKey hook ([299fd86](https://github.com/streamich/react-use/commit/299fd86))
* 🎸 add useKeyboardJs hook ([3516aa6](https://github.com/streamich/react-use/commit/3516aa6))
* 🎸 add usePageLeave hook ([33ac91b](https://github.com/streamich/react-use/commit/33ac91b))
* 🎸 add useThrottleFn hook that throttles function ([0ccdf95](https://github.com/streamich/react-use/commit/0ccdf95))
* 🎸 improve useFullscreen hook ([7c38165](https://github.com/streamich/react-use/commit/7c38165))
* 🎸 keep keyboard events in useKeyPress hook ([00fecab](https://github.com/streamich/react-use/commit/00fecab))
* 🎸 refactor useKeyPressEvent hook ([c0658f6](https://github.com/streamich/react-use/commit/c0658f6))
* 🎸 return events from useKeyboardJs hook ([aa277b8](https://github.com/streamich/react-use/commit/aa277b8))
* 🎸 simplify and improve useThrottle hook ([452e8d9](https://github.com/streamich/react-use/commit/452e8d9))
* 🎸 useKeyPress hook now uses useKey, KeyboardJS removed ([727743b](https://github.com/streamich/react-use/commit/727743b))
### BREAKING CHANGES
* 🧨 useKeyPressEvent hook modified for dependency injection and providing
event objects to user
* 🧨 KeyboardJS now available anymore in useKeyPress hook, instead it will be
a separate useKeyPressKJ hook.
* 🧨 useThrottle is now a completely different hook
## [6.2.2](https://github.com/streamich/react-use/compare/v6.2.1...v6.2.2) (2019-03-28)
### Bug Fixes
* fix deps arg and union type in useAsync and useAsyncRetry ([929e726](https://github.com/streamich/react-use/commit/929e726))
## [6.2.1](https://github.com/streamich/react-use/compare/v6.2.0...v6.2.1) (2019-03-27)
### Bug Fixes
* set 'module' field properly ([35d4fc2](https://github.com/streamich/react-use/commit/35d4fc2))
# [6.2.0](https://github.com/streamich/react-use/compare/v6.1.0...v6.2.0) (2019-03-27)
### Bug Fixes
* add esm to 'files' in package.json ([fc1ba07](https://github.com/streamich/react-use/commit/fc1ba07))
* clean esm folder as well ([0a10a6e](https://github.com/streamich/react-use/commit/0a10a6e))
### Features
* emit code in ES Module mode ([464642e](https://github.com/streamich/react-use/commit/464642e))
# [6.1.0](https://github.com/streamich/react-use/compare/v6.0.0...v6.1.0) (2019-03-26)
### Features
* add useThrottle hook ([756bc99](https://github.com/streamich/react-use/commit/756bc99))
# [6.0.0](https://github.com/streamich/react-use/compare/v5.16.1...v6.0.0) (2019-03-26)
### Bug Fixes
* 🐛 bump nano-css ([f1f36dc](https://github.com/streamich/react-use/commit/f1f36dc)), closes [#90](https://github.com/streamich/react-use/issues/90)
* 🐛 don't throw only in development ([f5faba5](https://github.com/streamich/react-use/commit/f5faba5))
### chore
* 🤖 don't install only large dependencies ([6170067](https://github.com/streamich/react-use/commit/6170067))
### Features
* 🎸 add {bound} option to useMouse ([9bb02a1](https://github.com/streamich/react-use/commit/9bb02a1))
* 🎸 implement useClickAway, remove useOutsideClick ([a03143a](https://github.com/streamich/react-use/commit/a03143a))
* 🎸 keep global state of all useLockBodyScroll hooks ([5dd10e9](https://github.com/streamich/react-use/commit/5dd10e9))
* 🎸 move extra mouse functionality into useMouseHovered ([8b0580e](https://github.com/streamich/react-use/commit/8b0580e))
* more precise size for useMouse ([b887075](https://github.com/streamich/react-use/commit/b887075))
### BREAKING CHANGES
* 🧨 error is logged instead of thrown in development environment
* 🧨 useOutsideClick is now useClickAway
* 🧨 useCallbag hook is removed, some hooks KeyboardJS and Rebound installed
separately
## [5.16.1](https://github.com/streamich/react-use/compare/v5.16.0...v5.16.1) (2019-03-26)
### Bug Fixes
* types for useGeolocation ([b72c098](https://github.com/streamich/react-use/commit/b72c098))
# [5.16.0](https://github.com/streamich/react-use/compare/v5.15.0...v5.16.0) (2019-03-25)
### Features
* more precise size for useMouse ([1761031](https://github.com/streamich/react-use/commit/1761031))
# [5.15.0](https://github.com/streamich/react-use/compare/v5.14.0...v5.15.0) (2019-03-25)
### Features
* add useMouse hook ([17dfa8e](https://github.com/streamich/react-use/commit/17dfa8e))
# [5.14.0](https://github.com/streamich/react-use/compare/v5.13.0...v5.14.0) (2019-03-24)
### Features
* 🎸 keep global state of all useLockBodyScroll hooks ([9bb7047](https://github.com/streamich/react-use/commit/9bb7047))
* add useLockBodyScroll hook ([d990db4](https://github.com/streamich/react-use/commit/d990db4))
# [5.13.0](https://github.com/streamich/react-use/compare/v5.12.1...v5.13.0) (2019-03-23)
### Features
* add useScroll hook ([a92e9b2](https://github.com/streamich/react-use/commit/a92e9b2))
## [5.12.1](https://github.com/streamich/react-use/compare/v5.12.0...v5.12.1) (2019-03-23)
### Bug Fixes
* 🐛 cancel animation frame on un-mount in useWindowScroll() ([bc021ce](https://github.com/streamich/react-use/commit/bc021ce))
# [5.12.0](https://github.com/streamich/react-use/compare/v5.11.0...v5.12.0) (2019-03-23)
### Features
* add useWindowScroll hook ([076d0de](https://github.com/streamich/react-use/commit/076d0de))
# [5.11.0](https://github.com/streamich/react-use/compare/v5.10.0...v5.11.0) (2019-03-22)
### Features
* 🎸 refresh useCss hook ([0116cc9](https://github.com/streamich/react-use/commit/0116cc9))
# [5.10.0](https://github.com/streamich/react-use/compare/v5.9.0...v5.10.0) (2019-03-21)
### Features
* add useUpdateEffect hook ([c2afd23](https://github.com/streamich/react-use/commit/c2afd23))
# [5.9.0](https://github.com/streamich/react-use/compare/v5.8.1...v5.9.0) (2019-03-21)
### Features
* add useAsyncRetry hook ([576cf42](https://github.com/streamich/react-use/commit/576cf42))
### Performance Improvements
* remove asyn/await wrapper ([8e3de1c](https://github.com/streamich/react-use/commit/8e3de1c))
## [5.8.1](https://github.com/streamich/react-use/compare/v5.8.0...v5.8.1) (2019-03-20)
### Bug Fixes
* 🐛 use useLayoutEffect() in useCss() to inject CSS quick ([7328f26](https://github.com/streamich/react-use/commit/7328f26))
# [5.8.0](https://github.com/streamich/react-use/compare/v5.7.1...v5.8.0) (2019-03-19)
### Features
* release useKeyPressEvent() ([96798e2](https://github.com/streamich/react-use/commit/96798e2))
## [5.7.1](https://github.com/streamich/react-use/compare/v5.7.0...v5.7.1) (2019-03-15)
### Bug Fixes
* 🐛 allow every promise in usePromise() hook have own type ([d60fef7](https://github.com/streamich/react-use/commit/d60fef7))
# [5.7.0](https://github.com/streamich/react-use/compare/v5.6.0...v5.7.0) (2019-03-15)
### Bug Fixes
* 🐛 fix TypeScript typings for usePromise() ([ba0acb6](https://github.com/streamich/react-use/commit/ba0acb6))
### Features
* 🎸 add usePromise() hook ([aad368b](https://github.com/streamich/react-use/commit/aad368b))
# [5.6.0](https://github.com/streamich/react-use/compare/v5.5.6...v5.6.0) (2019-03-13)
### Features
* transpile down to ES5 ([61382e3](https://github.com/streamich/react-use/commit/61382e3))
## [5.5.6](https://github.com/streamich/react-use/compare/v5.5.5...v5.5.6) (2019-03-11)
### Bug Fixes
* correct createMemo.md ([4e2d639](https://github.com/streamich/react-use/commit/4e2d639))
* correct createMemo.story ([9c8e093](https://github.com/streamich/react-use/commit/9c8e093))
## [5.5.5](https://github.com/streamich/react-use/compare/v5.5.4...v5.5.5) (2019-03-04)
### Bug Fixes
* 🐛 make useWindowSize work on server ([8f93853](https://github.com/streamich/react-use/commit/8f93853))
## [5.5.4](https://github.com/streamich/react-use/compare/v5.5.3...v5.5.4) (2019-02-25)
### Bug Fixes
* 🐛 new React behaviour needs useState to set something ([e926faf](https://github.com/streamich/react-use/commit/e926faf)), closes [#128](https://github.com/streamich/react-use/issues/128)
## [5.5.3](https://github.com/streamich/react-use/compare/v5.5.2...v5.5.3) (2019-02-25)
### Bug Fixes
* **deps:** update dependency use-callbag to ^0.2.0 ([4d49d0b](https://github.com/streamich/react-use/commit/4d49d0b))
## [5.5.2](https://github.com/streamich/react-use/compare/v5.5.1...v5.5.2) (2019-02-24)
### Bug Fixes
* **deps:** update dependency use-onclickoutside to ^0.3.0 ([0baae6d](https://github.com/streamich/react-use/commit/0baae6d))
## [5.5.1](https://github.com/streamich/react-use/compare/v5.5.0...v5.5.1) (2019-02-24)
### Bug Fixes
* **deps:** update dependency ts-easing to ^0.2.0 ([3321e11](https://github.com/streamich/react-use/commit/3321e11))
# [5.5.0](https://github.com/streamich/react-use/compare/v5.4.1...v5.5.0) (2019-02-23)
### Bug Fixes
* add type definition for useList() remove() method ([ea2dc43](https://github.com/streamich/react-use/commit/ea2dc43))
* useSetState bug ([83611a1](https://github.com/streamich/react-use/commit/83611a1))
### Features
* Add remove method for useList ([5a295d9](https://github.com/streamich/react-use/commit/5a295d9))
## [5.4.1](https://github.com/streamich/react-use/compare/v5.4.0...v5.4.1) (2019-02-19)
### Bug Fixes
* 🐛 better async loading for keyboardjs ([2096bae](https://github.com/streamich/react-use/commit/2096bae)), closes [#103](https://github.com/streamich/react-use/issues/103)
# [5.4.0](https://github.com/streamich/react-use/compare/v5.3.1...v5.4.0) (2019-02-19)
### Features
* add error and loading fields to useGeolocation ([6909a69](https://github.com/streamich/react-use/commit/6909a69))
## [5.3.1](https://github.com/streamich/react-use/compare/v5.3.0...v5.3.1) (2019-02-17)
### Bug Fixes
* 🐛 fix typings in useOrientation sensor ([afbacac](https://github.com/streamich/react-use/commit/afbacac))
* 🐛 fix useSetState after React update ([524abe5](https://github.com/streamich/react-use/commit/524abe5)), closes [#107](https://github.com/streamich/react-use/issues/107) [#107](https://github.com/streamich/react-use/issues/107)
* useOrientation breaks in some devices ([d89bd54](https://github.com/streamich/react-use/commit/d89bd54))
# [5.3.0](https://github.com/streamich/react-use/compare/v5.2.3...v5.3.0) (2019-02-07)
### Features
* Add updateAt method for useList ([ad05609](https://github.com/streamich/react-use/commit/ad05609))
## [5.2.3](https://github.com/streamich/react-use/compare/v5.2.2...v5.2.3) (2019-02-07)
### Bug Fixes
* 🐛 fix build and update React deps ([27e26a0](https://github.com/streamich/react-use/commit/27e26a0))
## [5.2.2](https://github.com/streamich/react-use/compare/v5.2.1...v5.2.2) (2019-02-02)
### Bug Fixes
* release useDebounce and useToggle fixes ([12ad880](https://github.com/streamich/react-use/commit/12ad880))
## [5.2.1](https://github.com/streamich/react-use/compare/v5.2.0...v5.2.1) (2019-01-04)
### Bug Fixes
* use function to correctly update state in useToggle ([d854d27](https://github.com/streamich/react-use/commit/d854d27))
# [5.2.0](https://github.com/streamich/react-use/compare/v5.1.2...v5.2.0) (2019-01-02)
### Features
* 🎸 add useKeyPress hook ([01df885](https://github.com/streamich/react-use/commit/01df885))
* **useKeyPress:** allow complex bindings via key combos ([e53a20f](https://github.com/streamich/react-use/commit/e53a20f))
## [5.1.2](https://github.com/streamich/react-use/compare/v5.1.1...v5.1.2) (2018-12-29)
### Bug Fixes
* reset state when calling useEffect in useAsync ([2f5af2c](https://github.com/streamich/react-use/commit/2f5af2c))
## [5.1.1](https://github.com/streamich/react-use/compare/v5.1.0...v5.1.1) (2018-12-20)
### Bug Fixes
* lock react and react-dom to a fixed version ([#83](https://github.com/streamich/react-use/issues/83)) ([455812d](https://github.com/streamich/react-use/commit/455812d))
# [5.1.0](https://github.com/streamich/react-use/compare/v5.0.0...v5.1.0) (2018-12-19)
### Bug Fixes
* 🐛 just use any for setTimeout because of diff environments ([55673cb](https://github.com/streamich/react-use/commit/55673cb))
* 🐛 memoized does not receive arguments ([244a533](https://github.com/streamich/react-use/commit/244a533))
* 🐛 use Timeout type for build to work ([8c66abe](https://github.com/streamich/react-use/commit/8c66abe))
### Features
* added useDebounce ([91ff6ba](https://github.com/streamich/react-use/commit/91ff6ba))
* pass arguments to memoized callback ([#81](https://github.com/streamich/react-use/issues/81)) ([88dd513](https://github.com/streamich/react-use/commit/88dd513))
# [5.0.0](https://github.com/streamich/react-use/compare/v4.11.1...v5.0.0) (2018-12-17)
### Features
* 🎸 list all useAsync state props so that TS dont complain ([7c1b107](https://github.com/streamich/react-use/commit/7c1b107))
* 🎸 remove experimental hooks ([533e26f](https://github.com/streamich/react-use/commit/533e26f))
* use discriminated union in useAsync ([966af4a](https://github.com/streamich/react-use/commit/966af4a))
### BREAKING CHANGES
* useRenderProp and useAsync are removed
## [4.11.1](https://github.com/streamich/react-use/compare/v4.11.0...v4.11.1) (2018-12-16)
### Bug Fixes
* synchronously re-render bug of useRaf hook ([#77](https://github.com/streamich/react-use/issues/77)) ([5d74348](https://github.com/streamich/react-use/commit/5d74348))
# [4.11.0](https://github.com/streamich/react-use/compare/v4.10.0...v4.11.0) (2018-12-05)
### Features
* 🎸 add useRefMounted hook ([dfb0510](https://github.com/streamich/react-use/commit/dfb0510))
# [4.10.0](https://github.com/streamich/react-use/compare/v4.9.0...v4.10.0) (2018-11-10)
### Features
* bump useWait ([124ef99](https://github.com/streamich/react-use/commit/124ef99))
# [4.9.0](https://github.com/streamich/react-use/compare/v4.8.0...v4.9.0) (2018-11-06)
### Features
* add useSessionStorage hook ([eca432a](https://github.com/streamich/react-use/commit/eca432a))
* add useWait hook ([61c6058](https://github.com/streamich/react-use/commit/61c6058))
# [4.8.0](https://github.com/streamich/react-use/compare/v4.7.0...v4.8.0) (2018-11-02)
### Features
* allow useSetState setter to accept function ([bfd114a](https://github.com/streamich/react-use/commit/bfd114a))
# [4.7.0](https://github.com/streamich/react-use/compare/v4.6.0...v4.7.0) (2018-10-30)
### Features
* 🎸 add useHoverDirty hook ([c2aee59](https://github.com/streamich/react-use/commit/c2aee59))
# [4.6.0](https://github.com/streamich/react-use/compare/v4.5.0...v4.6.0) (2018-10-30)
### Features
* 🎸 implement useLocalStorage without events ([d211722](https://github.com/streamich/react-use/commit/d211722))
# [4.5.0](https://github.com/streamich/react-use/compare/v4.4.0...v4.5.0) (2018-10-29)
### Features
* 🎸 add useAdopt hook ([91bee9a](https://github.com/streamich/react-use/commit/91bee9a))
* 🎸 add useRenderProp hook ([2d85c61](https://github.com/streamich/react-use/commit/2d85c61))
# [4.4.0](https://github.com/streamich/react-use/compare/v4.3.0...v4.4.0) (2018-10-29)
### Features
* 🎸 add useCallbag hook ([ead142c](https://github.com/streamich/react-use/commit/ead142c))
# [4.3.0](https://github.com/streamich/react-use/compare/v4.2.0...v4.3.0) (2018-10-29)
### Features
* 🎸 add useOutsideClick hook ([90d2c22](https://github.com/streamich/react-use/commit/90d2c22))
# [4.2.0](https://github.com/streamich/react-use/compare/v4.1.0...v4.2.0) (2018-10-29)
### Features
* 🎸 add useVideo hook ([ff05419](https://github.com/streamich/react-use/commit/ff05419))
* 🎸 allow to pass React <video> el in useVideo and useAudio ([8670c74](https://github.com/streamich/react-use/commit/8670c74))
# [4.1.0](https://github.com/streamich/react-use/compare/v4.0.0...v4.1.0) (2018-10-29)
### Features
* 🎸 add createMemo hook factory ([8730eaa](https://github.com/streamich/react-use/commit/8730eaa))
# [4.0.0](https://github.com/streamich/react-use/compare/v3.1.0...v4.0.0) (2018-10-29)
### Features
* 🎸 add useNumber alias ([a58a4a7](https://github.com/streamich/react-use/commit/a58a4a7))
* 🎸 improve useCounter interface ([395e82b](https://github.com/streamich/react-use/commit/395e82b))
### BREAKING CHANGES
* useCounter interface changed
# [3.1.0](https://github.com/streamich/react-use/compare/v3.0.0...v3.1.0) (2018-10-29)
### Features
* 🎸 add useGetSetState ([dcd1013](https://github.com/streamich/react-use/commit/dcd1013))
### Performance Improvements
* ⚡️ wrape useGetSetState callbacks in useCallback ([3c1e57d](https://github.com/streamich/react-use/commit/3c1e57d))
# [3.0.0](https://github.com/streamich/react-use/compare/v2.3.0...v3.0.0) (2018-10-29)
### Features
* 🎸 accept any value type in useToggle and cast it to bool ([869f767](https://github.com/streamich/react-use/commit/869f767))
### BREAKING CHANGES
* now useToggle and useBoolean accept any value type and cast it to
boolean.
# [2.3.0](https://github.com/streamich/react-use/compare/v2.2.0...v2.3.0) (2018-10-29)
### Features
* 🎸 add useBoolean hook ([ce6de24](https://github.com/streamich/react-use/commit/ce6de24))
# [2.2.0](https://github.com/streamich/react-use/compare/v2.1.0...v2.2.0) (2018-10-29)
### Features
* 🎸 add useGetSet hook ([bfc30b9](https://github.com/streamich/react-use/commit/bfc30b9))
* 🎸 add useUpdate hook ([c00f308](https://github.com/streamich/react-use/commit/c00f308))
# [2.1.0](https://github.com/streamich/react-use.git/compare/v2.0.0...v2.1.0) (2018-10-28)
### Features
* 🎸 add useObservable ([711e831](https://github.com/streamich/react-use.git/commit/711e831))
# [2.0.0](https://github.com/streamich/react-use.git/compare/v1.0.0...v2.0.0) (2018-10-28)
### Features
* 🎸 change API for useToggle hook ([#16](https://github.com/streamich/react-use.git/issues/16)) ([5a6da18](https://github.com/streamich/react-use.git/commit/5a6da18))
### BREAKING CHANGES
* useToggle interface changed
# 1.0.0 (2018-10-28)
### chore
* 🤖 release v1 ([4236cf0](https://github.com/streamich/react-use.git/commit/4236cf0))
### Continuous Integration
* 🎡 store CircleCI artifacts, add git-cz ([690dd5e](https://github.com/streamich/react-use.git/commit/690dd5e))
### Features
* 🎸 add useAsync hook ([258d696](https://github.com/streamich/react-use.git/commit/258d696))
* 🎸 add useAudio hook ([4336aa1](https://github.com/streamich/react-use.git/commit/4336aa1))
* 🎸 add useBattery hook ([73ce535](https://github.com/streamich/react-use.git/commit/73ce535))
* 🎸 add useCounter hook ([79e5b8c](https://github.com/streamich/react-use.git/commit/79e5b8c))
* 🎸 add useCss hook ([2c0a7e4](https://github.com/streamich/react-use.git/commit/2c0a7e4))
* 🎸 add useFavicon hook ([ab1739a](https://github.com/streamich/react-use.git/commit/ab1739a))
* 🎸 add useGeolocation hook ([13a7326](https://github.com/streamich/react-use.git/commit/13a7326))
* 🎸 add useHover hook ([406af20](https://github.com/streamich/react-use.git/commit/406af20))
* 🎸 add useIdle hook ([74d3ece](https://github.com/streamich/react-use.git/commit/74d3ece))
* 🎸 add useLifecycles hook ([f99c89f](https://github.com/streamich/react-use.git/commit/f99c89f))
* 🎸 add useList hook ([4bea508](https://github.com/streamich/react-use.git/commit/4bea508))
* 🎸 add useLocation hook ([46a8e2c](https://github.com/streamich/react-use.git/commit/46a8e2c))
* 🎸 add useLogger hook ([7c38b75](https://github.com/streamich/react-use.git/commit/7c38b75))
* 🎸 add useMap hook ([6509c25](https://github.com/streamich/react-use.git/commit/6509c25))
* 🎸 add useMedia hook ([e1cc9ab](https://github.com/streamich/react-use.git/commit/e1cc9ab))
* 🎸 add useMediaDevices hook ([4ea0277](https://github.com/streamich/react-use.git/commit/4ea0277))
* 🎸 add useMotion hook ([91eb4ea](https://github.com/streamich/react-use.git/commit/91eb4ea))
* 🎸 add useMount and useUnmount hooks ([63a1444](https://github.com/streamich/react-use.git/commit/63a1444))
* 🎸 add useNetwork hook ([5881fa6](https://github.com/streamich/react-use.git/commit/5881fa6))
* 🎸 add useOrientation hook ([c533b97](https://github.com/streamich/react-use.git/commit/c533b97))
* 🎸 add useRaf hook ([26b2593](https://github.com/streamich/react-use.git/commit/26b2593))
* 🎸 add useSetState hook ([972541d](https://github.com/streamich/react-use.git/commit/972541d))
* 🎸 add useSize hook ([620b171](https://github.com/streamich/react-use.git/commit/620b171))
* 🎸 add useSpeech hook ([3b971a2](https://github.com/streamich/react-use.git/commit/3b971a2))
* 🎸 add useSprgin hook ([b4fe5b0](https://github.com/streamich/react-use.git/commit/b4fe5b0))
* 🎸 add useTimeout hook ([86f094e](https://github.com/streamich/react-use.git/commit/86f094e))
* 🎸 add useTitle hook ([1bff6d8](https://github.com/streamich/react-use.git/commit/1bff6d8))
* 🎸 add useToggle() hook ([a36dceb](https://github.com/streamich/react-use.git/commit/a36dceb))
* 🎸 add useTween hook ([877343e](https://github.com/streamich/react-use.git/commit/877343e))
* 🎸 add useWindowSize() hook ([2c46899](https://github.com/streamich/react-use.git/commit/2c46899))
* 🎸 do work on useLocaStorage ([2541716](https://github.com/streamich/react-use.git/commit/2541716))
* 🎸 improve useSize, pass through state to the element ([5b1356a](https://github.com/streamich/react-use.git/commit/5b1356a))
### BREAKING CHANGES
* make semantic-release bump version
* Released v1.0.0
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
Thanks for being willing to contribute 🙌 If you contribute to this project, you agree to release your work under the license of this project.
**Working on your first Pull Request?** You can learn how from this [First Contributions](https://github.com/firstcontributions/first-contributions) guide.
## Project setup
1. Fork and clone the repo
1. Run `yarn install` to install dependencies
1. Create a branch for your PR with `git checkout -b pr/your-branch-name`
> Tip: Keep your `master` branch pointing at the original repository and make
> pull requests from branches on your fork. To do this, run:
>
> ```sh
> git remote add upstream https://github.com/streamich/react-use.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> This will add the original repository as a "remote" called "upstream," Then
> fetch the git information from that remote, then set your local `master`
> branch to use the upstream master branch whenever you run `git pull`. Then you
> can make all of your pull request branches based on this `master` branch.
> Whenever you want to update your version of `master`, do a regular `git pull`.
## Development
This library is a collection of React hooks so a proposal for a new hook will need to utilize the [React Hooks API](https://reactjs.org/docs/hooks-reference.html) internally to be taken into consideration.
### Creating a new hook
1. Create `src/useYourHookName.ts` and `stories/useYourHookName.story.tsx`, run `yarn start` to start the storybook development server and start coding your hook
1. Create `tests/useYourHookName.test.ts`, run `yarn test:watch` to start the test runner in watch mode and start writing tests for your hook
1. Create `docs/useYourHookName.md` and create documentation for your hook
1. Export your hook from `src/index.ts` and add your hook to `README.md`
You can also write your tests first if you prefer [test-driven development](https://en.wikipedia.org/wiki/Test-driven_development).
### Updating an existing hook
1. Run `yarn start` to start the storybook development server and start applying changes
2. Update tests according to your changes using `yarn test:watch`
3. Update documentation according to your changes
## Committing and Pushing changes
### Commit messages
This repo uses [semantic-release](https://github.com/semantic-release/semantic-release) and [conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:` or `feat:` if you want your changes to appear in [release notes](https://github.com/streamich/react-use/blob/master/CHANGELOG.md).
### Git hooks
There are git hooks set up with this project that are automatically enabled
when you install dependencies. These hooks automatically test and validate your code when creating commits. They're really handy but can be temporarily disabled by adding a `--no-verify` flag to your commit command. This is useful when you want to commit and push to get feedback on uncompleted code.
## Help needed
Please have a look at the [open issues](https://github.com/streamich/react-use/issues) and respond to questions, bug reports and feature requests. Thanks!
We're also looking to improve the code coverage on this project. To easily know what hooks need tests run `yarn test:coverage` to generate a code coverage report. You can see the report in your terminal or open `coverage/lcov-report/index.html` to see the HTML report.
================================================
FILE: LICENSE
================================================
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <https://unlicense.org>
================================================
FILE: README.md
================================================
<div align="center">
<h1>
<br/>
<br/>
👍
<br />
react-use
<br />
<br />
<br />
<br />
</h1>
<sup>
<br />
<br />
<a href="https://www.npmjs.com/package/react-use">
<img src="https://img.shields.io/npm/v/react-use.svg" alt="npm package" />
</a>
<a href="https://circleci.com/gh/streamich/react-use">
<img src="https://img.shields.io/circleci/project/github/streamich/react-use/master.svg" alt="CircleCI master" />
</a>
<a href="https://www.npmjs.com/package/react-use">
<img src="https://img.shields.io/npm/dm/react-use.svg" alt="npm downloads" />
</a>
<a href="http://streamich.github.io/react-use">
<img src="https://img.shields.io/badge/demos-🚀-yellow.svg" alt="demos" />
</a>
<br />
Collection of essential <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>.</em>
<em>Port of</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a>.
<br />
Translations: <a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a>
</sup>
<br />
<br />
<br />
<br />
<pre>npm i <a href="https://www.npmjs.com/package/react-use">react-use</a></pre>
<br />
<br />
<br />
<br />
<br />
</div>
- [**Sensors**](./docs/Sensors.md)
- [`useBattery`](./docs/useBattery.md) — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww)
- [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)
- [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
- [`useHash`](./docs/useHash.md) — tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)
- [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
- [`useIntersection`](./docs/useIntersection.md) — tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)
- [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
- [`useLocation`](./docs/useLocation.md) and [`useSearchParam`](./docs/useSearchParam.md) — tracks page navigation bar location state.
- [`useLongPress`](./docs/useLongPress.md) — tracks long press gesture of some element.
- [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
- [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.
- [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor.
- [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
- [`useMouseWheel`](./docs/useMouseWheel.md) — tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)
- [`useNetworkState`](./docs/useNetworkState.md) — tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)
- [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
- [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
- [`useScratch`](./docs/useScratch.md) — tracks mouse click-and-scrub state.
- [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
- [`useScrolling`](./docs/useScrolling.md) — tracks whether HTML element is scrolling.
- [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.
- [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
- [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
- [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
- [`createBreakpoint`](./docs/createBreakpoint.md) — tracks `innerWidth`
- [`useScrollbarWidth`](./docs/useScrollbarWidth.md) — detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)
- [`usePinchZoom`](./docs/usePinchZoom.md) — tracks pointer events to detect pinch zoom in and out status. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)
<br/>
<br/>
- [**UI**](./docs/UI.md)
- [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
- [`useClickAway`](./docs/useClickAway.md) — triggers callback when user clicks outside target area.
- [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.
- [`useDrop` and `useDropArea`](./docs/useDrop.md) — tracks file, link and copy-paste drops.
- [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)
- [`useSlider`](./docs/useSlider.md) — provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)
- [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
- [`useVibrate`](./docs/useVibrate.md) — provide physical feedback using the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API). [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo)
- [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
<br/>
<br/>
- [**Animations**](./docs/Animations.md)
- [`useRaf`](./docs/useRaf.md) — re-renders component on each `requestAnimationFrame`.
- [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) — re-renders component on a set interval using `setInterval`.
- [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics.
- [`useTimeout`](./docs/useTimeout.md) — re-renders component after a timeout.
- [`useTimeoutFn`](./docs/useTimeoutFn.md) — calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)
- [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)
- [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called.
<br/>
<br/>
- [**Side-effects**](./docs/Side-effects.md)
- [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), and [`useAsyncRetry`](./docs/useAsyncRetry.md) — resolves an `async` function.
- [`useBeforeUnload`](./docs/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
- [`useCookie`](./docs/useCookie.md) — provides way to read, update and delete a cookie. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo)
- [`useCopyToClipboard`](./docs/useCopyToClipboard.md) — copies text to clipboard.
- [`useDebounce`](./docs/useDebounce.md) — debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)
- [`useError`](./docs/useError.md) — error dispatcher. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo)
- [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page.
- [`useLocalStorage`](./docs/useLocalStorage.md) — manages a value in `localStorage`.
- [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — lock scrolling of the body element.
- [`useRafLoop`](./docs/useRafLoop.md) — calls given function inside the RAF loop.
- [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`.
- [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo)
- [`useTitle`](./docs/useTitle.md) — sets title of the page.
- [`usePermission`](./docs/usePermission.md) — query permission status for browser APIs.
<br/>
<br/>
- [**Lifecycles**](./docs/Lifecycles.md)
- [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
- [`useEvent`](./docs/useEvent.md) — subscribe to events.
- [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks.
- [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) — track if component is mounted.
- [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted.
- [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles.
- [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
- [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
- [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
- [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that that works on server.
- [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)
<br/>
<br/>
- [**State**](./docs/State.md)
- [`createMemo`](./docs/createMemo.md) — factory of memoized hooks.
- [`createReducer`](./docs/createReducer.md) — factory of reducer hooks with custom middleware.
- [`createReducerContext`](./docs/createReducerContext.md) and [`createStateContext`](./docs/createStateContext.md) — factory of hooks for a sharing state between components.
- [`useDefault`](./docs/useDefault.md) — returns the default value when state is `null` or `undefined`.
- [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state.
- [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
- [`useLatest`](./docs/useLatest.md) — returns the latest state or props
- [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)
- [`usePreviousDistinct`](./docs/usePreviousDistinct.md) — like `usePrevious` but with a predicate to determine if `previous` should update.
- [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`.
- [`useRafState`](./docs/useRafState.md) — creates `setState` method which only updates after `requestAnimationFrame`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo)
- [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
- [`useStateList`](./docs/useStateList.md) — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)
- [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)
- [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)
- [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)
- [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)
- [`useSet`](./docs/useSet.md) — tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)
- [`useQueue`](./docs/useQueue.md) — implements simple queue.
- [`useStateValidator`](./docs/useStateValidator.md) — tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo)
- [`useStateWithHistory`](./docs/useStateWithHistory.md) — stores previous state values and provides handles to travel through them. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo)
- [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo)
- [`useMediatedState`](./docs/useMediatedState.md) — like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)
- [`useFirstMountState`](./docs/useFirstMountState.md) — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)
- [`useRendersCount`](./docs/useRendersCount.md) — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)
- [`createGlobalState`](./docs/createGlobalState.md) — cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)
- [`useMethods`](./docs/useMethods.md) — neat alternative to `useReducer`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)
<br/>
<br/>
- [**Miscellaneous**]()
- [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) and [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) — use a React.forwardedRef safely. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p align="center">
<a href="./docs/Usage.md"><strong>Usage</strong></a> — how to import.
<br />
<a href="./LICENSE"><strong>Unlicense</strong></a> — public domain.
<br />
<a href="https://opencollective.com/react-use/contribute"><strong>Support</strong></a> — add yourself to backer list below.
</p>
<br />
<br />
<br />
<br />
<br />
[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg
<div align="center">
<h1>Contributors</h1>
</div>
<br />
<br />
<a href="https://github.com/streamich/react-use/graphs/contributors"><img src="https://opencollective.com/react-use/contributors.svg?width=890&button=false" /></a>
<br />
<br />
<br />
<br />
<br />
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Supported Versions
We release patches for security vulnerabilities. The latest major version
will support security patches.
## Reporting a Vulnerability
Please report (suspected) security vulnerabilities to
**[streamich@gmail.com](mailto:streamich@gmail.com)**. We will try to respond
within 48 hours. If the issue is confirmed, we will release a patch as soon
as possible depending on complexity.
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current"
}
}
],
"@babel/preset-react",
"@babel/preset-typescript"
],
env: {
test: {
plugins: ['dynamic-import-node']
},
production: {
plugins: ['@babel/plugin-syntax-dynamic-import']
}
}
};
================================================
FILE: docs/Animations.md
================================================
# Animations
*"Animation Hooks"* usually interpolate numeric values over time.
================================================
FILE: docs/Lifecycles.md
================================================
# Lifecycle
*"Lifecycle Hooks"* modify and extend built-in React hooks or imitate React Class component lifecycle patterns.
================================================
FILE: docs/Sensors.md
================================================
# Sensors
*"Sensor Hooks"* listen to changes in some interface and force your components
to be re-rendered with the new state, up-to-date state.
================================================
FILE: docs/Side-effects.md
================================================
# Side-effects
*"Side-effect Hooks"* allow your app trigger various side-effects using browser's API.
================================================
FILE: docs/State.md
================================================
# State
*"State Hooks"* allow you to easily manage state of booleans, arrays, and maps.
================================================
FILE: docs/UI.md
================================================
# UI
*"UI Hooks"* allow you to control and subscribe to state changes of UI elements.
================================================
FILE: docs/Usage.md
================================================
# Usage
You need to have React [`16.8.0`](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to use the Hooks API. You can import each hook individually
```js
import useToggle from 'react-use/lib/useToggle'
```
or use ES6 named imports (tree shaking recommended)
```js
import {useToggle} from 'react-use'
```
Depending on your bundler you might run into a missing dependency error with ES6 named import statements. Some hooks require you to install peer dependencies so we recommend using individual imports. If you want the best of both worlds you can transform the named import statements to individual import statements with [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import) by adding the following config to your `.babelrc` file:
```json
[
'import',
{
libraryName: 'react-use',
camel2DashComponentName: false,
customName(/** @type {string} */ name) {
const libraryDirectory = name.startsWith('Use')
? 'lib/component'
: name.startsWith('create')
? 'lib/factory'
: 'lib'
return `react-use/${libraryDirectory}/${name}`
}
},
'import-react-use'
]
```
================================================
FILE: docs/createBreakpoint.md
================================================
# `createBreakpoint`
## Usage
### use default breakpoint
laptopL: 1440, laptop: 1024, tablet: 768
```jsx
import React from "react";
import { createBreakpoint } from "react-use";
const useBreakpoint = createBreakpoint();
const Demo = () => {
const breakpoint = useBreakpoint();
if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;
else if (breakpoint == "laptop") return <div> This is Laptop</div>;
else if (breakpoint == "tablet") return <div> This is Tablet</div>;
else return <div> Too small!</div>;
};
```
### use custom breakpoint
XL: 1280, L: 768, S: 350
```jsx
import React from "react";
import { createBreakpoint } from "react-use";
const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
const Demo = () => {
const breakpoint = useBreakpoint();
if (breakpoint === "XL") return <div> XL </div>;
else if (breakpoint == "L") return <div> LoL</div>;
else if (breakpoint == "S") return <div> Sexyy</div>;
else return <div> Wth</div>;
};
```
================================================
FILE: docs/createGlobalState.md
================================================
# `useGlobalState`
A React hook that creates a globally shared state.
## Usage
```tsx
const useGlobalValue = createGlobalState<number>(0);
const CompA: FC = () => {
const [value, setValue] = useGlobalValue();
return <button onClick={() => setValue(value + 1)}>+</button>;
};
const CompB: FC = () => {
const [value, setValue] = useGlobalValue();
return <button onClick={() => setValue(value - 1)}>-</button>;
};
const Demo: FC = () => {
const [value] = useGlobalValue();
return (
<div>
<p>{value}</p>
<CompA />
<CompB />
</div>
);
};
```
It also allows initializing the state with a function and using a function in the setState:
```tsx
const useGlobalValue = createGlobalState<number>(() => 0);
const CompA: FC = () => {
const [value, setValue] = useGlobalValue();
return <button onClick={() => setValue(value => value + 1)}>+</button>;
};
const CompB: FC = () => {
const [value, setValue] = useGlobalValue();
return <button onClick={() => setValue(value => value - 1)}>-</button>;
};
const Demo: FC = () => {
const [value] = useGlobalValue();
return (
<div>
<p>{value}</p>
<CompA />
<CompB />
</div>
);
};
```
================================================
FILE: docs/createMemo.md
================================================
# `createMemo`
Hook factory, receives a function to be memoized, returns a memoized React hook,
which receives the same arguments and returns the same result as the original function.
## Usage
```jsx
import {createMemo} from 'react-use';
const fibonacci = n => {
if (n === 0) return 0;
if (n === 1) return 1;
return fibonacci(n - 1) + fibonacci(n - 2);
};
const useMemoFibonacci = createMemo(fibonacci);
const Demo = () => {
const result = useMemoFibonacci(10);
return (
<div>
fib(10) = {result}
</div>
);
};
```
## Reference
```js
const useMemoFn = createMemo(fn);
```
================================================
FILE: docs/createReducer.md
================================================
# `createReducer`
Factory for reducer hooks with custom middleware with an identical API as [React's `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer). Compatible with [Redux middleware](https://redux.js.org/advanced/middleware).
## Usage
An example with [`redux-thunk`](https://github.com/reduxjs/redux-thunk) and [`redux-logger`](https://github.com/LogRocket/redux-logger).
```jsx
import { createReducer } from 'react-use';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
const useThunkReducer = createReducer(thunk, logger);
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return { count: action.payload };
default:
throw new Error();
}
}
const Demo = ({ initialCount = 1 }) => {
// Action creator to increment count, wait a second and then reset
const addAndReset = React.useCallback(() => {
return dispatch => {
dispatch({ type: 'increment' });
setTimeout(() => {
dispatch({ type: 'reset', payload: initialCount });
}, 1000);
};
}, [initialCount]);
const [state, dispatch] = useThunkReducer(reducer, initialCount);
return (
<div>
<p>count: {state.count}</p>
<button onClick={() => dispatch(addAndReset())}>Add and reset</button>
<button
onClick={() => dispatch({ type: 'reset', payload: { count: initialCount }})}
>
Reset
</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
};
```
## Reference
```js
const useMiddlewareReducer = createReducer(...middlewares);
```
================================================
FILE: docs/createReducerContext.md
================================================
# `createReducerContext`
Factory for react context hooks that will behave just like [React's `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) except the state will be shared among all components in the provider.
This allows you to have a shared state that any component can update easily.
## Usage
An example with two counters that shared the same value.
```jsx
import { createReducerContext } from 'react-use';
type Action = 'increment' | 'decrement';
const reducer = (state: number, action: Action) => {
switch (action) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
throw new Error();
}
};
const [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);
const ComponentA = () => {
const [count, dispatch] = useSharedCounter();
return (
<p>
Component A
<button type="button" onClick={() => dispatch('decrement')}>
-
</button>
{count}
<button type="button" onClick={() => dispatch('increment')}>
+
</button>
</p>
);
};
const ComponentB = () => {
const [count, dispatch] = useSharedCounter();
return (
<p>
Component B
<button type="button" onClick={() => dispatch('decrement')}>
-
</button>
{count}
<button type="button" onClick={() => dispatch('increment')}>
+
</button>
</p>
);
};
const Demo = () => {
return (
<SharedCounterProvider>
<p>Those two counters share the same value.</p>
<ComponentA />
<ComponentB />
</SharedCounterProvider>
);
};
```
## Reference
```jsx
const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);
// In wrapper
const Wrapper = ({ children }) => (
// You can override the initial state for each Provider
<SharedStateProvider initialState={overrideInitialState}>
{ children }
</SharedStateProvider>
)
// In a component
const Component = () => {
const [sharedState, dispatch] = useSharedState();
// ...
}
```
================================================
FILE: docs/createStateContext.md
================================================
# `createStateContext`
Factory for react context hooks that will behave just like [React's `useState`](https://reactjs.org/docs/hooks-reference.html#usestate) except the state will be shared among all components in the provider.
This allows you to have a shared state that any component can update easily.
## Usage
An example with a shared text between two input fields.
```jsx
import { createStateContext } from 'react-use';
const [useSharedText, SharedTextProvider] = createStateContext('');
const ComponentA = () => {
const [text, setText] = useSharedText();
return (
<p>
Component A:
<br />
<input type="text" value={text} onInput={ev => setText(ev.target.value)} />
</p>
);
};
const ComponentB = () => {
const [text, setText] = useSharedText();
return (
<p>
Component B:
<br />
<input type="text" value={text} onInput={ev => setText(ev.target.value)} />
</p>
);
};
const Demo = () => {
return (
<SharedTextProvider>
<p>Those two fields share the same value.</p>
<ComponentA />
<ComponentB />
</SharedTextProvider>
);
};
```
## Reference
```jsx
const [useSharedState, SharedStateProvider] = createStateContext(initialValue);
// In wrapper
const Wrapper = ({ children }) => (
// You can override the initial value for each Provider
<SharedStateProvider initialValue={overrideInitialValue}>
{ children }
</SharedStateProvider>
)
// In a component
const Component = () => {
const [sharedState, setSharedState] = useSharedState();
// ...
}
```
================================================
FILE: docs/useAsync.md
================================================
# `useAsync`
React hook that resolves an `async` function or a function that returns
a promise;
## Usage
```jsx
import {useAsync} from 'react-use';
const Demo = ({url}) => {
const state = useAsync(async () => {
const response = await fetch(url);
const result = await response.text();
return result
}, [url]);
return (
<div>
{state.loading
? <div>Loading...</div>
: state.error
? <div>Error: {state.error.message}</div>
: <div>Value: {state.value}</div>
}
</div>
);
};
```
## Reference
```ts
useAsync(fn, args?: any[]);
```
================================================
FILE: docs/useAsyncFn.md
================================================
# `useAsyncFn`
React hook that returns state and a callback for an `async` function or a
function that returns a promise. The state is of the same shape as `useAsync`.
## Usage
```jsx
import {useAsyncFn} from 'react-use';
const Demo = ({url}) => {
const [state, doFetch] = useAsyncFn(async () => {
const response = await fetch(url);
const result = await response.text();
return result
}, [url]);
return (
<div>
{state.loading
? <div>Loading...</div>
: state.error
? <div>Error: {state.error.message}</div>
: <div>Value: {state.value}</div>
}
<button onClick={() => doFetch()}>Start loading</button>
</div>
);
};
```
## Reference
```ts
useAsyncFn<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
```
================================================
FILE: docs/useAsyncRetry.md
================================================
# `useAsyncRetry`
Uses `useAsync` with an additional `retry` method to easily retry/refresh the async function;
## Usage
```jsx
import {useAsyncRetry} from 'react-use';
const Demo = ({url}) => {
const state = useAsyncRetry(async () => {
const response = await fetch(url);
const result = await response.text();
return result;
}, [url]);
return (
<div>
{state.loading
? <div>Loading...</div>
: state.error
? <div>Error: {state.error.message}</div>
: <div>Value: {state.value}</div>
}
{!loading && <button onClick={() => state.retry()}>Start loading</button>}
</div>
);
};
```
## Reference
```ts
useAsyncRetry(fn, args?: any[]);
```
================================================
FILE: docs/useAudio.md
================================================
# `useAudio`
Creates `<audio>` element, tracks its state and exposes playback controls.
## Usage
```jsx
import {useAudio} from 'react-use';
const Demo = () => {
const [audio, state, controls, ref] = useAudio({
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
autoPlay: true,
});
return (
<div>
{audio}
<pre>{JSON.stringify(state, null, 2)}</pre>
<button onClick={controls.pause}>Pause</button>
<button onClick={controls.play}>Play</button>
<br/>
<button onClick={controls.mute}>Mute</button>
<button onClick={controls.unmute}>Un-mute</button>
<br/>
<button onClick={() => controls.volume(.1)}>Volume: 10%</button>
<button onClick={() => controls.volume(.5)}>Volume: 50%</button>
<button onClick={() => controls.volume(1)}>Volume: 100%</button>
<br/>
<button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
<button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
</div>
);
};
```
## Reference
```jsx
const [audio, state, controls, ref] = useAudio(props);
const [audio, state, controls] = useAudio(<audio {...props}/>);
```
`audio` is React's `<audio>` element that you have to insert somewhere in your
render tree, for example:
```jsx
<div>{audio}</div>
```
`state` tracks the state of the audio and has the following shape:
```json
{
"buffered": [
{
"start": 0,
"end": 425.952625
}
],
"time": 5.244996,
"duration": 425.952625,
"paused": false,
"muted": false,
"volume": 1,
"playing": true
}
```
`playing`: The audio is being played and is affected by the network. If it starts to buffer audio, it will be false
`controls` is a list collection of methods that allow you to control the
playback of the audio, it has the following interface:
```ts
interface AudioControls {
play: () => Promise<void> | void;
pause: () => void;
mute: () => void;
unmute: () => void;
volume: (volume: number) => void;
seek: (time: number) => void;
}
```
`ref` is a React reference to HTML `<audio>` element, you can access the element by
`ref.current`, note that it may be `null`.
And finally, `props` — all props that `<audio>` accepts.
================================================
FILE: docs/useBattery.md
================================================
# `useBattery`
React sensor hook that tracks battery status.
>**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.
## Usage
```jsx
import {useBattery} from 'react-use';
const Demo = () => {
const batteryState = useBattery();
if (!batteryState.isSupported) {
return (
<div>
<strong>Battery sensor</strong>: <span>not supported</span>
</div>
);
}
if (!batteryState.fetched) {
return (
<div>
<strong>Battery sensor</strong>: <span>supported</span> <br />
<strong>Battery state</strong>: <span>fetching</span>
</div>
);
}
return (
<div>
<strong>Battery sensor</strong>: <span>supported</span> <br />
<strong>Battery state</strong>: <span>fetched</span> <br />
<strong>Charge level</strong>: <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
<strong>Charging</strong>: <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
<strong>Charging time</strong>:
<span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
<strong>Discharging time</strong>: <span>{ batteryState.dischargingTime }</span>
</div>
);
};
```
## Reference
```ts
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
```
- **`isSupported`**_`: boolean`_ - whether browser/devise supports BatteryManager;
- **`fetched`**_`: boolean`_ - whether battery state is fetched;
- **`level`**_`: number`_ - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
- **`charging`**_`: boolean`_ - indicating whether or not the battery is currently being charged.
- **`dischargingTime`**_`: number`_ - remaining time in seconds until the battery is completely discharged and the system will suspend.
- **`chargingTime`**_`: number`_ - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
================================================
FILE: docs/useBeforeUnload.md
================================================
# `useBeforeUnload`
React side-effect hook that shows browser alert when user try to reload or close the page.
## Usage
### Boolean check
```jsx
import {useBeforeUnload} from 'react-use';
const Demo = () => {
const [dirty, toggleDirty] = useToggle(false);
useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');
return (
<div>
{dirty && <p>Try to reload or close tab</p>}
<button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>
</div>
);
};
```
### Function check
Note: Since every `dirtyFn` change registers a new callback, you should use
[refs](https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback)
if your test value changes often.
```jsx
import {useBeforeUnload} from 'react-use';
const Demo = () => {
const [dirty, toggleDirty] = useToggle(false);
const dirtyFn = useCallback(() => {
return dirty;
}, [dirty]);
useBeforeUnload(dirtyFn, 'You have unsaved changes, are you sure?');
return (
<div>
{dirty && <p>Try to reload or close tab</p>}
<button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>
</div>
);
};
```
================================================
FILE: docs/useClickAway.md
================================================
# `useClickAway`
React UI hook that triggers a callback when user
clicks outside the target element.
## Usage
```jsx
import {useClickAway} from 'react-use';
const Demo = () => {
const ref = useRef(null);
useClickAway(ref, () => {
console.log('OUTSIDE CLICKED');
});
return (
<div ref={ref} style={{
width: 200,
height: 200,
background: 'red',
}} />
);
};
```
## Reference
```js
useClickAway(ref, onMouseEvent)
useClickAway(ref, onMouseEvent, ['click'])
useClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
```
================================================
FILE: docs/useCookie.md
================================================
# `useCookie`
React hook that returns the current value of a `cookie`, a callback to update the `cookie`
and a callback to delete the `cookie.`
## Usage
```jsx
import { useCookie } from "react-use";
const Demo = () => {
const [value, updateCookie, deleteCookie] = useCookie("my-cookie");
const [counter, setCounter] = useState(1);
useEffect(() => {
deleteCookie();
}, []);
const updateCookieHandler = () => {
updateCookie(`my-awesome-cookie-${counter}`);
setCounter(c => c + 1);
};
return (
<div>
<p>Value: {value}</p>
<button onClick={updateCookieHandler}>Update Cookie</button>
<br />
<button onClick={deleteCookie}>Delete Cookie</button>
</div>
);
};
```
## Reference
```ts
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
```
================================================
FILE: docs/useCopyToClipboard.md
================================================
# `useCopyToClipboard`
Copy text to a user's clipboard.
## Usage
```jsx
const Demo = () => {
const [text, setText] = React.useState('');
const [state, copyToClipboard] = useCopyToClipboard();
return (
<div>
<input value={text} onChange={e => setText(e.target.value)} />
<button type="button" onClick={() => copyToClipboard(text)}>copy text</button>
{state.error
? <p>Unable to copy value: {state.error.message}</p>
: state.value && <p>Copied {state.value}</p>}
</div>
)
}
```
## Reference
```js
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
```
- `value` — value that was copied to clipboard, undefined when nothing was copied.
- `error` — caught error when trying to copy to clipboard.
- `noUserInteraction` — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying [`copy-to-clipboard`](https://github.com/sudodoki/copy-to-clipboard) library.
================================================
FILE: docs/useCounter.md
================================================
# `useCounter`
React state hook that tracks a numeric value.
`useNumber` is an alias for `useCounter`.
## Usage
```jsx
import {useCounter, useNumber} from 'react-use';
const Demo = () => {
const [min, { inc: incMin, dec: decMin }] = useCounter(1);
const [max, { inc: incMax, dec: decMax }] = useCounter(10);
const [value, { inc, dec, set, reset }] = useCounter(5, max, min);
return (
<div>
<div>
current: { value } [min: { min }; max: { max }]
</div>
<br />
Current value: <button onClick={ () => inc() }>Increment</button>
<button onClick={ () => dec() }>Decrement</button>
<button onClick={ () => inc(5) }>Increment (+5)</button>
<button onClick={ () => dec(5) }>Decrement (-5)</button>
<button onClick={ () => set(100) }>Set 100</button>
<button onClick={ () => reset() }>Reset</button>
<button onClick={ () => reset(25) }>Reset (25)</button>
<br />
<br />
Min value:
<button onClick={ () => incMin() }>Increment</button>
<button onClick={ () => decMin() }>Decrement</button>
<br />
<br />
Max value:
<button onClick={ () => incMax() }>Increment</button>
<button onClick={ () => decMax() }>Decrement</button>
</div>
);
};
```
## Reference
```ts
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, min: number | null = null);
```
- `current` - current counter value;
- `get(): number` - getter of current counter value;
- `inc(delta: number): void` - increment current value;
- `dec(delta: number): void` - decrement current value;
- `set(value: number): void` - set arbitrary value;
- `reset(value: number): void` - as the `set`, but also will assign value by reference to the `initial` parameter;
================================================
FILE: docs/useCss.md
================================================
# `useCss`
React UI hook that changes [CSS dynamically][gen-5]. Works like "virtual CSS" —
it re-renders only CSS rules that change. It is different from inline styles, because
you can use media queries and pseudo selectors.
## Usage
```jsx
import {useCss} from 'react-use';
const Demo = () => {
const className = useCss({
color: 'red',
border: '1px solid red',
'&:hover': {
color: 'blue',
},
});
return (
<div className={className}>
Hover me!
</div>
);
};
```
## Examples
```js
const className = useCss({
color: 'tomato',
'&:hover': {
color: 'orange',
},
});
const className = useCss({
svg: {
fill: 'tomato',
},
'.global_class &:hover svg': {
fill: 'orange',
},
});
const className = useCss({
color: 'tomato',
'@media only screen and (max-width: 600px)': {
color: 'orange',
'&:hover': {
color: 'red',
}
},
});
```
[gen-5]: https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation
================================================
FILE: docs/useCustomCompareEffect.md
================================================
# `useCustomCompareEffect`
A modified useEffect hook that accepts a comparator which is used for comparison on dependencies instead of reference equality.
## Usage
```jsx
import {useCounter, useCustomCompareEffect} from 'react-use';
import isEqual from 'lodash/isEqual';
const Demo = () => {
const [count, {inc: inc}] = useCounter(0);
const options = { step: 2 };
useCustomCompareEffect(() => {
inc(options.step)
}, [options], (prevDeps, nextDeps) => isEqual(prevDeps, nextDeps));
return (
<div>
<p>useCustomCompareEffect with deep comparison: {count}</p>
</div>
);
};
```
## Reference
```ts
useCustomCompareEffect(effect: () => void | (() => void | undefined), deps: any[], depsEqual: (prevDeps: any[], nextDeps: any[]) => boolean);
```
================================================
FILE: docs/useDebounce.md
================================================
# `useDebounce`
React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.
## Usage
```jsx
const Demo = () => {
const [state, setState] = React.useState('Typing stopped');
const [val, setVal] = React.useState('');
const [debouncedValue, setDebouncedValue] = React.useState('');
const [, cancel] = useDebounce(
() => {
setState('Typing stopped');
setDebouncedValue(val);
},
2000,
[val]
);
return (
<div>
<input
type="text"
value={val}
placeholder="Debounced input"
onChange={({ currentTarget }) => {
setState('Waiting for typing to stop...');
setVal(currentTarget.value);
}}
/>
<div>{state}</div>
<div>
Debounced value: {debouncedValue}
<button onClick={cancel}>Cancel debounce</button>
</div>
</div>
);
};
```
## Reference
```ts
const [
isReady: () => boolean | null,
cancel: () => void,
] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);
```
- **`fn`**_`: Function`_ - function that will be called;
- **`ms`**_`: number`_ - delay in milliseconds;
- **`deps`**_`: DependencyList`_ - array of values that the debounce depends on, in the same manner as useEffect;
- **`isReady`**_`: ()=>boolean|null`_ - function returning current debounce state:
- `false` - pending
- `true` - called
- `null` - cancelled
- **`cancel`**_`: ()=>void`_ - cancel the debounce
================================================
FILE: docs/useDeepCompareEffect.md
================================================
# `useDeepCompareEffect`
A modified useEffect hook that is using deep comparison on its dependencies instead of reference equality.
## Usage
```jsx
import {useCounter, useDeepCompareEffect} from 'react-use';
const Demo = () => {
const [count, {inc: inc}] = useCounter(0);
const options = { step: 2 };
useDeepCompareEffect(() => {
inc(options.step)
}, [options]);
return (
<div>
<p>useDeepCompareEffect: {count}</p>
</div>
);
};
```
## Reference
```ts
useDeepCompareEffect(effect: () => void | (() => void | undefined), deps: any[]);
```
================================================
FILE: docs/useDefault.md
================================================
# `useDefault`
React state hook that returns the default value when state is null or undefined.
## Usage
```jsx
import {useDefault} from 'react-use';
const Demo = () => {
const initialUser = { name: 'Marshall' }
const defaultUser = { name: 'Mathers' }
const [user, setUser] = useDefault(defaultUser, initialUser);
return (
<div>
<div>User: {user.name}</div>
<input onChange={e => setUser({ name: e.target.value })} />
<button onClick={() => setUser(null)}>set to null</button>
</div>
);
};
```
================================================
FILE: docs/useDrop.md
================================================
# `useDrop` and `useDropArea`
Triggers on file, link drop and copy-paste.
`useDrop` tracks events for the whole page, `useDropArea` tracks drop events
for a specific element.
## Usage
`useDrop`:
```jsx
import {useDrop} from 'react-use';
const Demo = () => {
const state = useDrop({
onFiles: files => console.log('files', files),
onUri: uri => console.log('uri', uri),
onText: text => console.log('text', text),
});
return (
<div>
Drop something on the page.
</div>
);
};
```
`useDropArea`:
```jsx
import {useDropArea} from 'react-use';
const Demo = () => {
const [bond, state] = useDropArea({
onFiles: files => console.log('files', files),
onUri: uri => console.log('uri', uri),
onText: text => console.log('text', text),
});
return (
<div {...bond}>
Drop something here.
</div>
);
};
```
================================================
FILE: docs/useEffectOnce.md
================================================
# `useEffectOnce`
React lifecycle hook that runs an effect only once.
## Usage
```jsx
import {useEffectOnce} from 'react-use';
const Demo = () => {
useEffectOnce(() => {
console.log('Running effect once on mount')
return () => {
console.log('Running clean-up of effect on unmount')
}
});
return null;
};
```
## Reference
```js
useEffectOnce(effect: EffectCallback);
```
================================================
FILE: docs/useEnsuredForwardedRef.md
================================================
# `useEnsuredForwardedRef`
React hook to use a ForwardedRef safely.
In some scenarios, you may need to use a _ref_ from inside and outside a component. If that's the case, you should use `React.forwardRef` to pass it through the child component. This is useful when you only want to forward that _ref_ and expose an internal `HTMLelement` to a parent component, for example. However, if you need to manipulate that reference inside a child's lifecycle hook... things get complicated, since you can't always ensure that the _ref_ is being sent by the parent component and if it is not, you will get `undefined` instead of a valid _ref_.
This hook is useful in this specific case, it will __ensure__ that you get a valid reference on the other side.
## Usage
```jsx
import {ensuredForwardRef} from 'react-use';
const Demo = () => {
return (
<Child />
);
};
const Child = ensuredForwardRef((props, ref) => {
useEffect(() => {
console.log(ref.current.getBoundingClientRect())
}, [])
return (
<div ref={ref} />
);
});
```
## Alternative usage
```jsx
import {useEnsuredForwardedRef} from 'react-use';
const Demo = () => {
return (
<Child />
);
};
const Child = React.forwardRef((props, ref) => {
// Here `ref` is undefined
const ensuredForwardRef = useEnsuredForwardedRef(ref);
// ensuredForwardRef will always be a valid reference.
useEffect(() => {
console.log(ensuredForwardRef.current.getBoundingClientRect())
}, [])
return (
<div ref={ensuredForwardRef} />
);
});
```
## Reference
```ts
ensuredForwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
useEnsuredForwardedRef<T>(ref: React.MutableRefObject<T>): React.MutableRefObject<T>;
```
================================================
FILE: docs/useError.md
================================================
# `useError`
React side-effect hook that returns an error dispatcher.
## Usage
```jsx
import { useError } from 'react-use';
const Demo = () => {
const dispatchError = useError();
const clickHandler = () => {
dispatchError(new Error('Some error!'));
};
return <button onClick={clickHandler}>Click me to throw</button>;
};
// In parent app
const App = () => (
<ErrorBoundary>
<Demo />
</ErrorBoundary>
);
```
## Reference
```js
const dispatchError = useError();
```
- `dispatchError` — Callback of type `(err: Error) => void`
================================================
FILE: docs/useEvent.md
================================================
# `useEvent`
React sensor hook that subscribes a `handler` to events.
## Usage
```jsx
import {useEvent, useList} from 'react-use';
const Demo = () => {
const [list, {push, clear}] = useList();
const onKeyDown = useCallback(({key}) => {
if (key === 'r') clear();
push(key);
}, []);
useEvent('keydown', onKeyDown);
return (
<div>
<p>
Press some keys on your keyboard, <code style={{color: 'tomato'}}>r</code> key resets the list
</p>
<pre>
{JSON.stringify(list, null, 4)}
</pre>
</div>
);
};
```
## Examples
```js
useEvent('keydown', handler)
useEvent('scroll', handler, window, {capture: true})
```
================================================
FILE: docs/useFavicon.md
================================================
# `useFavicon`
React side-effect hook sets the favicon of the page.
## Usage
```jsx
import {useFavicon} from 'react-use';
const Demo = () => {
useFavicon('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico');
return null;
};
```
================================================
FILE: docs/useFirstMountState.md
================================================
# `useFirstMountState`
Returns `true` if component is just mounted (on first render) and `false` otherwise.
## Usage
```typescript jsx
import * as React from 'react';
import { useFirstMountState } from 'react-use';
const Demo = () => {
const isFirstMount = useFirstMountState();
const update = useUpdate();
return (
<div>
<span>This component is just mounted: {isFirstMount ? 'YES' : 'NO'}</span>
<br />
<button onClick={update}>re-render</button>
</div>
);
};
```
## Reference
```typescript
const isFirstMount: boolean = useFirstMountState();
```
================================================
FILE: docs/useFullscreen.md
================================================
# `useFullscreen`
Display an element full-screen, optional fallback for fullscreen video on iOS.
## Usage
```jsx
import {useFullscreen, useToggle} from 'react-use';
const Demo = () => {
const ref = useRef(null)
const [show, toggle] = useToggle(false);
const isFullscreen = useFullscreen(ref, show, {onClose: () => toggle(false)});
return (
<div ref={ref} style={{backgroundColor: 'white'}}>
<div>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
<button onClick={() => toggle()}>Toggle</button>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay />
</div>
);
};
```
## Reference
```ts
useFullscreen(ref, show, {onClose})
```
================================================
FILE: docs/useGeolocation.md
================================================
# `useGeolocation`
React sensor hook that tracks user's geographic location. This hook accepts [position options](https://developer.mozilla.org/docs/Web/API/PositionOptions).
## Usage
```jsx
import {useGeolocation} from 'react-use';
const Demo = () => {
const state = useGeolocation();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
## Reference
```ts
useGeolocation(options: PositionOptions)
```
================================================
FILE: docs/useGetSet.md
================================================
# `useGetSet`
React state hook that returns state getter function instead of
raw state itself, this prevents subtle bugs when state is used
in nested functions.
## Usage
Below example uses `useGetSet` to increment a number after 1 second
on each click.
```jsx
import {useGetSet} from 'react-use';
const Demo = () => {
const [get, set] = useGetSet(0);
const onClick = () => {
setTimeout(() => {
set(get() + 1)
}, 1_000);
};
return (
<button onClick={onClick}>Clicked: {get()}</button>
);
};
```
If you would do this example in a naive way using regular `useState`
hook, the counter would not increment correctly if you click fast multiple times.
```jsx
const DemoWrong = () => {
const [cnt, set] = useState(0);
const onClick = () => {
setTimeout(() => {
set(cnt + 1)
}, 1_000);
};
return (
<button onClick={onClick}>Clicked: {cnt}</button>
);
};
```
================================================
FILE: docs/useGetSetState.md
================================================
# `useGetSetState`
A mix of `useGetSet` and `useGetSetState`.
## Usage
```jsx
import {useGetSetState} from 'react-use';
const Demo = () => {
const [get, setState] = useGetSetState({cnt: 0});
const onClick = () => {
setTimeout(() => {
setState({cnt: get().cnt + 1})
}, 1000);
};
return (
<button onClick={onClick}>Clicked: {get().cnt}</button>
);
};
```
================================================
FILE: docs/useHarmonicIntervalFn.md
================================================
# `useHarmonicIntervalFn`
Same as [`useInterval`](./useInterval.md) hook, but triggers all effects with the same delay
at the same time.
For example, this allows you to create ticking clocks on the page which re-render second counter
all at the same time.
## Reference
```js
useHarmonicIntervalFn(fn, delay?: number)
```
================================================
FILE: docs/useHash.md
================================================
# `useHash`
React sensor hook that tracks browser's location hash.
## Usage
```jsx
import {useHash} from 'react-use';
const Demo = () => {
const [hash, setHash] = useHash();
useMount(() => {
setHash('#/path/to/page?userId=123');
});
return (
<div>
<div>window.location.href:</div>
<div>
<pre>{window.location.href}</pre>
</div>
<div>Edit hash: </div>
<div>
<input style={{ width: '100%' }} value={hash} onChange={e => setHash(e.target.value)} />
</div>
</div>
);
};
```
## API
`const [hash, setHash] = useHash()`
Get latest url hash with `hash` and set url hash with `setHash`.
- `hash: string`: get current url hash. listen to `hashchange` event.
- `setHash: (newHash: string) => void`: change url hash. Invoke this method will trigger `hashchange` event.
================================================
FILE: docs/useHover.md
================================================
# `useHover` and `useHoverDirty`
React UI sensor hooks that track if some element is being hovered
by a mouse.
- `useHover` accepts a React element or a function that returns one,
`useHoverDirty` accepts React ref.
- `useHover` sets react `onMouseEnter` and `onMouseLeave` events,
`useHoverDirty` sets DOM `onmouseover` and `onmouseout` events.
## Usage
```jsx
import {useHover} from 'react-use';
const Demo = () => {
const element = (hovered) =>
<div>
Hover me! {hovered && 'Thanks!'}
</div>;
const [hoverable, hovered] = useHover(element);
return (
<div>
{hoverable}
<div>{hovered ? 'HOVERED' : ''}</div>
</div>
);
};
```
## Reference
```js
const [newReactElement, isHovering] = useHover(reactElement);
const [newReactElement, isHovering] = useHover((isHovering) => reactElement);
const isHovering = useHoverDirty(ref);
```
================================================
FILE: docs/useIdle.md
================================================
# `useIdle`
React sensor hook that tracks if user on the page is idle.
## Usage
```jsx
import {useIdle} from 'react-use';
const Demo = () => {
const isIdle = useIdle(3e3);
return (
<div>
<div>User is idle: {isIdle ? 'Yes 😴' : 'Nope'}</div>
</div>
);
};
```
## Reference
```js
useIdle(ms, initialState);
```
- `ms` — time in milliseconds after which to consider use idle, defaults to `60e3` — one minute.
- `initialState` — whether to consider user initially idle, defaults to false.
================================================
FILE: docs/useIntersection.md
================================================
# `useIntersection`
React sensor hook that tracks the changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and returns a [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
## Usage
```jsx
import * as React from 'react';
import { useIntersection } from 'react-use';
const Demo = () => {
const intersectionRef = React.useRef(null);
const intersection = useIntersection(intersectionRef, {
root: null,
rootMargin: '0px',
threshold: 1
});
return (
<div ref={intersectionRef}>
{intersection && intersection.intersectionRatio < 1
? 'Obscured'
: 'Fully in view'}
</div>
);
};
```
## Reference
```ts
useIntersection(
ref: RefObject<HTMLElement>,
options: IntersectionObserverInit,
): IntersectionObserverEntry | null;
```
================================================
FILE: docs/useInterval.md
================================================
# `useInterval`
A declarative interval hook based on [Dan Abramov's article on overreacted.io](https://overreacted.io/making-setinterval-declarative-with-react-hooks). The interval can be paused by setting the delay to `null`.
## Usage
```jsx
import * as React from 'react';
import {useInterval} from 'react-use';
const Demo = () => {
const [count, setCount] = React.useState(0);
const [delay, setDelay] = React.useState(1000);
const [isRunning, toggleIsRunning] = useBoolean(true);
useInterval(
() => {
setCount(count + 1);
},
isRunning ? delay : null
);
return (
<div>
<div>
delay: <input value={delay} onChange={event => setDelay(Number(event.target.value))} />
</div>
<h1>count: {count}</h1>
<div>
<button onClick={toggleIsRunning}>{isRunning ? 'stop' : 'start'}</button>
</div>
</div>
);
};
```
## Reference
```js
useInterval(callback, delay?: number)
```
================================================
FILE: docs/useIsomorphicLayoutEffect.md
================================================
# `useIsomorphicLayoutEffect`
`useLayoutEffect` that does not show warning when server-side rendering, see [Alex Reardon's article](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a) for more info.
## Usage
```jsx
import {useIsomorphicLayoutEffect} from 'react-use';
const Demo = ({value}) => {
useIsomorphicLayoutEffect(() => {
window.console.log(value)
}, [value]);
return null;
};
```
## Reference
```ts
useIsomorphicLayoutEffect(effect: EffectCallback, deps?: ReadonlyArray<any> | undefined);
```
================================================
FILE: docs/useKey.md
================================================
# `useKey`
React UI sensor hook that executes a `handler` when a keyboard key is used.
## Usage
```jsx
import {useKey} from 'react-use';
const Demo = () => {
const [count, set] = useState(0);
const increment = () => set(count => ++count);
useKey('ArrowUp', increment);
return (
<div>
Press arrow up: {count}
</div>
);
};
```
Or as render-prop:
```jsx
import UseKey from 'react-use/lib/component/UseKey';
<UseKey filter='a' fn={() => alert('"a" key pressed!')} />
```
## Reference
```js
useKey(filter, handler, options?, deps?)
```
## Examples
```js
useKey('a', () => alert('"a" pressed'));
const predicate = (event) => event.key === 'a'
useKey(predicate, handler, {event: 'keyup'});
```
================================================
FILE: docs/useKeyPress.md
================================================
# `useKeyPress`
React UI sensor hook that detects when the user is pressing a specific
key on their keyboard.
## Usage
```jsx
import {useKeyPress} from 'react-use';
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const Demo = () => {
const states = [];
for (const key of keys) states.push(useKeyPress(key)[0]);
return (
<div style={{textAlign: 'center'}}>
Try pressing numbers
<br />
{states.reduce((s, pressed, index) => s + (pressed ? (s ? ' + ' : '') + keys[index] : ''), '')}
</div>
);
};
```
## Examples
```js
const isPressed = useKeyPress('a');
const predicate = (event) => event.key === 'a';
const isPressed = useKeyPress(predicate);
```
================================================
FILE: docs/useKeyPressEvent.md
================================================
# `useKeyPressEvent`
This hook fires `keydown` and `keyup` callbacks, similar to how [`useKey`](./useKey.md)
hook does, but it only triggers each callback once per press cycle. For example,
if you press and hold a key, it will fire `keydown` callback only once.
## Usage
```jsx
import React, { useState } from React;
import {useKeyPressEvent} from 'react-use';
const Demo = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count => ++count);
const decrement = () => setCount(count => --count);
const reset = () => setCount(count => 0);
useKeyPressEvent(']', increment, increment);
useKeyPressEvent('[', decrement, decrement);
useKeyPressEvent('r', reset);
return (
<div>
<p>
Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
see the count incremented and decremented.</p>
<p>Count: {count}</p>
</div>
);
};
```
## Reference
```js
useKeyPressEvent('<key>', keydown);
useKeyPressEvent('<key>', keydown, keyup);
useKeyPressEvent('<key>', keydown, keyup, useKeyPress);
```
================================================
FILE: docs/useKeyboardJs.md
================================================
# `useKeyboardJs`
React UI sensor hook that detects complex key combos like detecting when
multiple keys are held down at the same time or requiring them to be held down in a specified order.
Via [KeyboardJS key combos](https://github.com/RobertWHurst/KeyboardJS).
Check its documentation for further details on how to make combo strings.
## Usage
```jsx
import useKeyboardJs from 'react-use/lib/useKeyboardJs';
const Demo = () => {
const [isPressed] = useKeyboardJs('a + b');
return (
<div>
[a + b] pressed: {isPressed ? 'Yes' : 'No'}
</div>
);
};
```
Note: Because of dependency on `keyboardjs` you have to import this hook directly like shown above.
## Requirements
Install [`keyboardjs`](https://github.com/RobertWHurst/KeyboardJS) peer dependency:
```bash
npm add keyboardjs
# or
yarn add keyboardjs
```
## Reference
```js
useKeyboardJs(combination: string | string[]): [isPressed: boolean, event?: KeyboardEvent]
```
================================================
FILE: docs/useLatest.md
================================================
# `useLatest`
React state hook that returns the latest state as described in the [React hooks FAQ](https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function).
This is mostly useful to get access to the latest value of some props or state inside an asynchronous callback, instead of that value at the time the callback was created from.
## Usage
```jsx
import { useLatest } from 'react-use';
const Demo = () => {
const [count, setCount] = React.useState(0);
const latestCount = useLatest(count);
function handleAlertClick() {
setTimeout(() => {
alert(`Latest count value: ${latestCount.current}`);
}, 3000);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClick={handleAlertClick}>Show alert</button>
</div>
);
};
```
## Reference
```ts
const latestState = useLatest = <T>(state: T): MutableRefObject<T>;
```
================================================
FILE: docs/useLifecycles.md
================================================
# `useLifecycles`
React lifecycle hook that call `mount` and `unmount` callbacks, when
component is mounted and un-mounted, respectively.
## Usage
```jsx
import {useLifecycles} from 'react-use';
const Demo = () => {
useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
return null;
};
```
## Reference
```js
useLifecycles(mount, unmount);
```
================================================
FILE: docs/useList.md
================================================
# `useList`
Tracks an array and provides methods to modify it.
To cause component re-render you have to use these methods instead of direct interaction with array - it won't cause re-render.
We can ensure that actions object and actions itself will not mutate or change between renders, so there is no need to add it to useEffect dependencies and safe to pass them down to children.
**Note:** `remove` action is deprecated and actually is a copy of `removeAt` action. Within closest updates it will gain different functionality.
## Usage
```jsx
import {useList} from 'react-use';
const Demo = () => {
const [list, { set, push, updateAt, insertAt, update, updateFirst, upsert, sort, filter, removeAt, clear, reset }] = useList([1, 2, 3, 4, 5]);
return (
<div>
<button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
<button onClick={() => push(Date.now())}>Push timestamp</button>
<button onClick={() => updateAt(1, Date.now())}>Update value at index 1</button>
<button onClick={() => remove(1)}>Remove element at index 1</button>
<button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
<button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
<button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
<button onClick={clear}>Clear</button>
<button onClick={reset}>Reset</button>
<pre>{JSON.stringify(list, null, 2)}</pre>
</div>
);
};
```
## Reference
```ts
import {useList} from "react-use";
const [list, {
set,
push,
updateAt,
insertAt,
update,
updateFirst,
upsert,
sort,
filter,
removeAt,
remove,
clear,
reset
}] = useList(array: any[] | ()=> any[]);
```
- **`list`**_`: T{}`_ — current list;
- **`set`**_`: (list: T[]) => void;`_ — Set new list instead old one;
- **`push`**_`: (...items: T[]) => void;`_ — Add item(s) at the end of list;
- **`updateAt`**_`: (index: number, item: T) => void;`_ — Replace item at given position. If item at given position not exists it will be set;
- **`insertAt`**_`: (index: number, item: T) => void;`_ — Insert item at given position, all items to the right will be shifted;
- **`update`**_`: (predicate: (a: T, b: T) => boolean, newItem: T) => void;`_ — Replace all items that matches predicate with given one;
- **`updateFirst`**_`: (predicate: (a: T, b: T) => boolean, newItem: T) => void;`_ — Replace first item matching predicate with given one;
- **`upsert`**_`: (predicate: (a: T, b: T) => boolean, newItem: T) => void;`_ — Like `updateFirst` but in case of predicate miss - pushes item to the list;
- **`sort`**_`: (compareFn?: (a: T, b: T) => number) => void;`_ — Sort list with given sorting function;
- **`filter`**_`: (callbackFn: (value: T, index?: number, array?: T[]) => boolean, thisArg?: any) => void;`_ — Same as native Array's method;
- **`removeAt`**_`: (index: number) => void;`_ — Removes item at given position. All items to the right from removed will be shifted;
- **`remove`**_`: (index: number) => void;`_ — _**DEPRECATED:**_ Use removeAt method instead;
- **`clear`**_`: () => void;`_ — Make the list empty;
- **`reset`**_`: () => void;`_ — Reset list to initial value;
## Related hooks
- [useUpsert](./useUpsert.md)
================================================
FILE: docs/useLocalStorage.md
================================================
# `useLocalStorage`
React side-effect hook that manages a single `localStorage` key.
## Usage
```jsx
import { useLocalStorage } from 'react-use';
const Demo = () => {
const [value, setValue, remove] = useLocalStorage('my-key', 'foo');
return (
<div>
<div>Value: {value}</div>
<button onClick={() => setValue('bar')}>bar</button>
<button onClick={() => setValue('baz')}>baz</button>
<button onClick={() => remove()}>Remove</button>
</div>
);
};
```
## Reference
```js
useLocalStorage(key);
useLocalStorage(key, initialValue);
useLocalStorage(key, initialValue, { raw: true });
useLocalStorage(key, initialValue, {
raw: false,
serializer: (value: T) => string,
deserializer: (value: string) => T,
});
```
- `key` — `localStorage` key to manage.
- `initialValue` — initial value to set, if value in `localStorage` is empty.
- `raw` — boolean, if set to `true`, hook will not attempt to JSON serialize stored values.
- `serializer` — custom serializer (defaults to `JSON.stringify`)
- `deserializer` — custom deserializer (defaults to `JSON.parse`)
================================================
FILE: docs/useLocation.md
================================================
# `useLocation`
React sensor hook that tracks brower's location.
For Internet Explorer you need to [install a polyfill](https://github.com/streamich/react-use/issues/73).
## Usage
```jsx
import {useLocation} from 'react-use';
const Demo = () => {
const state = useLocation();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
================================================
FILE: docs/useLockBodyScroll.md
================================================
# `useLockBodyScroll`
React side-effect hook that locks scrolling on the body element. Useful for modal and other overlay components.
Accepts ref object pointing to any HTML element as second parameter. Parent body element will be found and it's scroll will be locked/unlocked. It is needed to proper iFrame handling.
By default it uses body element of script's parent window.
>Note: To improve performance you can pass body's or iframe's ref object, thus no parent lookup will be performed
## Usage
```jsx
import {useLockBodyScroll, useToggle} from 'react-use';
const Demo = () => {
const [locked, toggleLocked] = useToggle(false)
useLockBodyScroll(locked);
return (
<div>
<button onClick={() => toggleLocked()}>
{locked ? 'Unlock' : 'Lock'}
</button>
</div>
);
};
```
## Reference
```ts
useLockBodyScroll(locked: boolean = true, elementRef?: RefObject<HTMLElement>);
```
- `locked` — Hook will lock scrolling on the body element if `true`, defaults to `true`
- `elementRef` — The element ref object to find the body element. Can be either a ref to body or iframe element.
================================================
FILE: docs/useLogger.md
================================================
# `useLogger`
React lifecycle hook that console logs parameters as component transitions through lifecycles.
## Usage
```jsx
import {useLogger} from 'react-use';
const Demo = (props) => {
useLogger('Demo', props);
return null;
};
```
## Example Output
```
Demo mounted {}
Demo updated {}
Demo unmounted
```
## Reference
```js
useLogger(componentName: string, ...rest);
```
- `componentName` — component name.
- `...rest` — parameters to log.
================================================
FILE: docs/useLongPress.md
================================================
# `useLongPress`
React sensor hook that fires a callback after long pressing.
## Usage
```jsx
import { useLongPress } from 'react-use';
const Demo = () => {
const onLongPress = () => {
console.log('calls callback after long pressing 300ms');
};
const defaultOptions = {
isPreventDefault: true,
delay: 300,
};
const longPressEvent = useLongPress(onLongPress, defaultOptions);
return <button {...longPressEvent}>useLongPress</button>;
};
```
## Reference
```ts
const {
onMouseDown,
onTouchStart,
onMouseUp,
onMouseLeave,
onTouchEnd
} = useLongPress(
callback: (e: TouchEvent | MouseEvent) => void,
options?: {
isPreventDefault?: true,
delay?: 300
}
)
```
- `callback` — callback function.
- `options?` — optional parameter.
- `isPreventDefault?` — whether to call `event.preventDefault()` of `touchend` event, for preventing ghost click on mobile devices in some cases, defaults to `true`.
- `delay?` — delay in milliseconds after which to calls provided callback, defaults to `300`.
================================================
FILE: docs/useMap.md
================================================
# `useMap`
React state hook that tracks a value of an object.
## Usage
```jsx
import {useMap} from 'react-use';
const Demo = () => {
const [map, {set, setAll, remove, reset}] = useMap({
hello: 'there',
});
return (
<div>
<button onClick={() => set(String(Date.now()), new Date().toJSON())}>
Add
</button>
<button onClick={() => reset()}>
Reset
</button>
<button onClick={() => setAll({ hello: 'new', data: 'data' })}>
Set new data
</button>
<button onClick={() => remove('hello')} disabled={!map.hello}>
Remove 'hello'
</button>
<pre>{JSON.stringify(map, null, 2)}</pre>
</div>
);
};
```
================================================
FILE: docs/useMeasure.md
================================================
# `useMeasure`
React sensor hook that tracks dimensions of an HTML element using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
## Usage
```jsx
import { useMeasure } from "react-use";
const Demo = () => {
const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();
return (
<div ref={ref}>
<div>x: {x}</div>
<div>y: {y}</div>
<div>width: {width}</div>
<div>height: {height}</div>
<div>top: {top}</div>
<div>right: {right}</div>
<div>bottom: {bottom}</div>
<div>left: {left}</div>
</div>
);
};
```
This hook uses [`ResizeObserver` API][resize-observer], if you want to support
legacy browsers, consider installing [`resize-observer-polyfill`][resize-observer-polyfill]
before running your app.
```js
if (!window.ResizeObserver) {
window.ResizeObserver = (await import('resize-observer-polyfill')).default;
}
```
## Related hooks
- [useSize](./useSize.md)
[resize-observer]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
[resize-observer-polyfill]: https://www.npmjs.com/package/resize-observer-polyfill
================================================
FILE: docs/useMedia.md
================================================
# `useMedia`
React sensor hook that tracks state of a CSS media query.
## Usage
```jsx
import {useMedia} from 'react-use';
const Demo = () => {
const isWide = useMedia('(min-width: 480px)');
return (
<div>
Screen is wide: {isWide ? 'Yes' : 'No'}
</div>
);
};
```
## Reference
```ts
useMedia(query: string, defaultState: boolean = false): boolean;
```
The `defaultState` parameter is only used as a fallback for server side rendering.
When server side rendering, it is important to set this parameter because without it the server's initial state will fallback to false, but the client will initialize to the result of the media query. When React hydrates the server render, it may not match the client's state. See the [React docs](https://reactjs.org/docs/react-dom.html#hydrate) for more on why this is can lead to costly bugs 🐛.
================================================
FILE: docs/useMediaDevices.md
================================================
# `useMediaDevices`
React sensor hook that tracks connected hardware devices.
## Usage
```jsx
import {useMediaDevices} from 'react-use';
const Demo = () => {
const state = useMediaDevices();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
================================================
FILE: docs/useMediatedState.md
================================================
# `useMediatedState`
A lot like the standard `useState`, but with mediation process.
## Usage
```ts
import * as React from 'react';
import { useMediatedState } from '../useMediatedState';
const inputMediator = s => s.replace(/[\s]+/g, ' ');
const Demo = () => {
const [state, setState] = useMediatedState(inputMediator, '');
return (
<div>
<div>You will not be able to enter more than one space</div>
<input type="text" min="0" max="10"
value={state}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
setState(ev.target.value);
}}
/>
</div>
);
};
```
## Reference
```ts
const [state, setState] = useMediatedState<S=any>(
mediator: StateMediator<S>,
initialState?: S
);
```
> Initial state will be set as-is.
In case mediator expects 2 arguments it will receive the `setState` function as second argument, it is useful for async mediators.
>This hook will not cancel previous mediation when new one been invoked, you have to handle it yourself._
================================================
FILE: docs/useMethods.md
================================================
# `useMethods`
React hook that simplifies the `useReducer` implementation.
## Usage
```jsx
import { useMethods } from 'react-use';
const initialState = {
count: 0,
};
function createMethods(state) {
return {
reset() {
return initialState;
},
increment() {
return { ...state, count: state.count + 1 };
},
decrement() {
return { ...state, count: state.count - 1 };
},
};
}
const Demo = () => {
const [state, methods] = useMethods(createMethods, initialState);
return (
<>
<p>Count: {state.count}</p>
<button onClick={methods.decrement}>-</button>
<button onClick={methods.increment}>+</button>
</>
);
};
```
## Reference
```js
const [state, methods] = useMethods(createMethods, initialState);
```
- `createMethods` — function that takes current state and return an object containing methods that return updated state.
- `initialState` — initial value of the state.
================================================
FILE: docs/useMotion.md
================================================
# `useMotion`
React sensor hook that uses device's acceleration sensor to track its motions.
## Usage
```jsx
import {useMotion} from 'react-use';
const Demo = () => {
const state = useMotion();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
================================================
FILE: docs/useMount.md
================================================
# `useMount`
React lifecycle hook that calls a function after the component is mounted. Use `useLifecycles` if you need both a mount and unmount function.
## Usage
```jsx
import {useMount} from 'react-use';
const Demo = () => {
useMount(() => alert('MOUNTED'));
return null;
};
```
## Reference
```ts
useMount(fn: () => void);
```
================================================
FILE: docs/useMountedState.md
================================================
# `useMountedState`
> **NOTE!:** despite having `State` in its name **_this hook does not cause component re-render_**.
> This component designed to be used to avoid state updates on unmounted components.
Lifecycle hook providing ability to check component's mount state.
Returns a function that will return `true` if component mounted and `false` otherwise.
## Usage
```jsx
import * as React from 'react';
import {useMountedState} from 'react-use';
const Demo = () => {
const isMounted = useMountedState();
React.useEffect(() => {
setTimeout(() => {
if (isMounted()) {
// ...
} else {
// ...
}
}, 1000);
});
};
```
================================================
FILE: docs/useMouse.md
================================================
# `useMouse` and `useMouseHovered`
React sensor hooks that re-render on mouse position changes. `useMouse` simply tracks
mouse position; `useMouseHovered` allows you to specify extra options:
- `bound` — to bind mouse coordinates within the element
- `whenHovered` — whether to attach `mousemove` event handler only when user hovers over the element
## Usage
```jsx
import {useMouse} from 'react-use';
const Demo = () => {
const ref = React.useRef(null);
const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);
return (
<div ref={ref}>
<div>Mouse position in document - x:{docX} y:{docY}</div>
<div>Mouse position in element - x:{elX} y:{elY}</div>
<div>Element position- x:{posX} y:{posY}</div>
<div>Element dimensions - {elW}x{elH}</div>
</div>
);
};
```
## Reference
```ts
useMouse(ref);
useMouseHovered(ref, {bound: false, whenHovered: false});
```
================================================
FILE: docs/useMouseWheel.md
================================================
# `useMouseWheel`
React Hook to get deltaY of mouse scrolled in window.
## Usage
```jsx
import { useMouseWheel } from 'react-use';
const Demo = () => {
const mouseWheel = useMouseWheel()
return (
<>
<h3>delta Y Scrolled: {mouseWheel}</h3>
</>
);
};
```
================================================
FILE: docs/useMultiStateValidator.md
================================================
# `useMultiStateValidator`
Each time any of given states changes - validator function is invoked.
## Usage
```ts
import * as React from 'react';
import { useMultiStateValidator } from 'react-use';
const DemoStateValidator = (s: number[]) => [s.every((num: number) => !(num % 2))] as [boolean];
const Demo = () => {
const [state1, setState1] = React.useState<number>(1);
const [state2, setState2] = React.useState<number>(1);
const [state3, setState3] = React.useState<number>(1);
const [[isValid]] = useMultiStateValidator([state1, state2, state3], DemoStateValidator);
return (
<div>
<div>Below fields will be valid if all of them is even</div>
<input type="number" min="1" max="10" value={state1}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
setState1((ev.target.value as unknown) as number);
}}
/>
<input type="number" min="1" max="10" value={state2}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
setState2((ev.target.value as unknown) as number);
}}
/>
<input type="number" min="1" max="10" value={state3}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
setState3((ev.target.value as unknown) as number);
}}
/>
{isValid !== null && <span>{isValid ? 'Valid!' : 'Invalid'}</span>}
</div>
);
};
```
## Reference
```ts
const [validity, revalidate] = useStateValidator(
state: any[] | { [p: string]: any } | { [p: number]: any },
validator: (state, setValidity?)=>[boolean|null, ...any[]],
initialValidity: any = [undefined]
);
```
- **`state`**_`: any[] | { [p: string]: any } | { [p: number]: any }`_ can be both an array or object. It's _values_ will be used as a deps for inner `useEffect`.
- **`validity`**_`: [boolean|null, ...any[]]`_ result of validity check. First element is strictly nullable boolean, but others can contain arbitrary data;
- **`revalidate`**_`: ()=>void`_ runs validator once again
- **`validator`**_`: (state, setValidity?)=>[boolean|null, ...any[]]`_ should return an array suitable for validity state described above;
- `states` - current states values as they've been passed to the hook;
- `setValidity` - if defined hook will not trigger validity change automatically. Useful for async validators;
- `initialValidity` - validity value which set when validity is nt calculated yet;
================================================
FILE: docs/useNetworkState.md
================================================
# `useNetworkState`
Tracks the state of browser's network connection.
As of the standard it is not guaranteed that browser connected to the _Internet_, it only guarantees the network
connection.
## Usage
```jsx
import {useNetworkState} from 'react-use';
const Demo = () => {
const state = useNetworkState();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
#### State interface:
```typescript
interface IUseNetworkState {
/**
* @desc Whether browser connected to the network or not.
*/
online: boolean | undefined;
/**
* @desc Previous value of `online` property. Helps to identify if browser
* just connected or lost connection.
*/
previous: boolean | undefined;
/**
* @desc The {Date} object pointing to the moment when state change occurred.
*/
since: Date | undefined;
/**
* @desc Effective bandwidth estimate in megabits per second, rounded to the
* nearest multiple of 25 kilobits per seconds.
*/
downlink: number | undefined;
/**
* @desc Maximum downlink speed, in megabits per second (Mbps), for the
* underlying connection technology
*/
downlinkMax: number | undefined;
/**
* @desc Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
* This value is determined using a combination of recently observed round-trip time
* and downlink values.
*/
effectiveType: 'slow-2g' | '2g' | '3g' | '4g' | undefined;
/**
* @desc Estimated effective round-trip time of the current connection, rounded
* to the nearest multiple of 25 milliseconds
*/
rtt: number | undefined;
/**
* @desc Wheter user has set a reduced data usage option on the user agent.
*/
saveData: boolen | undefined;
/**
* @desc The type of connection a device is using to communicate with the network.
*/
type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown' | undefined;
}
```
#### Call signature
```typescript
function useNetworkState(initialState?: IUseNetworkState | (() => IUseNetworkState)): IUseNetworkState;
```
================================================
FILE: docs/useObservable.md
================================================
# `useObservable`
React state hook that tracks the latest value of an `Observable`.
## Usage
```jsx
import {useObservable} from 'react-use';
const counter$ = new BehaviorSubject(0);
const Demo = () => {
const value = useObservable(counter$, 0);
return (
<button onClick={() => counter$.next(value + 1)}>
Clicked {value} times
</button>
);
};
```
================================================
FILE: docs/useOrientation.md
================================================
# `useOrientation`
React sensor hook that tracks screen orientation of user's device.
Returns state in the following shape
```js
{
angle: 0,
type: 'landscape-primary'
}
```
## Usage
```jsx
import {useOrientation} from 'react-use';
const Demo = () => {
const state = useOrientation();
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
================================================
FILE: docs/usePageLeave.md
================================================
# `usePageLeave`
React sensor hook that fires a callback when mouse leaves the page.
## Usage
```jsx
import {usePageLeave} from 'react-use';
const Demo = () => {
usePageLeave(() => console.log('Page left...'));
return null;
};
```
================================================
FILE: docs/usePermission.md
================================================
# `usePermission`
React side-effect hook to query permission status of browser APIs.
## Usage
```jsx
import {usePermission} from 'react-use';
const Demo = () => {
const state = usePermission({ name: 'microphone' });
return (
<pre>
{JSON.stringify(state, null, 2)}
</pre>
);
};
```
================================================
FILE: docs/usePinchZoom.md
================================================
# `usePinchZoom`
React sensor hook that tracks the changes in pointer touch events and detects value of pinch difference and tell if user is zooming in or out.
## Usage
```jsx
import { usePinchZoom } from "react-use";
const Demo = () => {
const [scale, setState] = useState(1);
const scaleRef = useRef();
const { zoomingState, pinchState } = usePinchZoom(scaleRef);
useEffect(() => {
if (zoomingState === "ZOOM_IN") {
// perform zoom in scaling
setState(scale + 0.1)
} else if (zoomingState === "ZOOM_OUT") {
// perform zoom out in scaling
setState(scale - 0.1)
}
}, [zoomingState]);
return (
<div ref={scaleRef}>
<img
src="https://www.olympus-imaging.co.in/content/000107506.jpg"
style={{
zoom: scale,
}}
/>
</div>
);
};
```
================================================
FILE: docs/usePrevious.md
================================================
# `usePrevious`
React state hook that returns the previous state as described in the [React hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state).
## Usage
```jsx
import {usePrevious} from 'react-use';
const Demo = () => {
const [count, setCount] = React.useState(0);
const prevCount = usePrevious(count);
return (
<p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<p>
Now: {count}, before: {prevCount}
</p>
</p>
);
};
```
## Reference
```ts
const prevState = usePrevious = <T>(state: T): T;
```
================================================
FILE: docs/usePreviousDistinct.md
================================================
# `usePreviousDistinct`
Just like `usePrevious` but it will only update once the value actually changes. This is important when other
hooks are involved and you aren't just interested in the previous props version, but want to know the previous
distinct value
## Usage
```jsx
import {usePreviousDistinct, useCounter} from 'react-use';
const Demo = () => {
const [count, { inc: relatedInc }] = useCounter(0);
const [unrelatedCount, { inc }] = useCounter(0);
const prevCount = usePreviousDistinct(count);
return (
<p>
Now: {count}, before: {prevCount}
<button onClick={() => relatedInc()}>Increment</button>
Unrelated: {unrelatedCount}
<button onClick={() => inc()}>Increment Unrelated</button>
</p>
);
};
```
You can also provide a way of identifying the value as unique. By default, a strict equals is used.
```jsx
import {usePreviousDistinct} from 'react-use';
const Demo = () => {
const [str, setStr] = React.useState("something_lowercase");
const [unrelatedCount] = React.useState(0);
const prevStr = usePreviousDistinct(str, (prev, next) => (prev && prev.toUpperCa
gitextract_fgngh5hz/ ├── .editorconfig ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ ├── check-codebase.yml │ ├── mirror.yml │ └── release.yml ├── .gitignore ├── .storybook/ │ ├── addons.js │ ├── config.js │ └── webpack.config.js ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── babel.config.js ├── docs/ │ ├── Animations.md │ ├── Lifecycles.md │ ├── Sensors.md │ ├── Side-effects.md │ ├── State.md │ ├── UI.md │ ├── Usage.md │ ├── createBreakpoint.md │ ├── createGlobalState.md │ ├── createMemo.md │ ├── createReducer.md │ ├── createReducerContext.md │ ├── createStateContext.md │ ├── useAsync.md │ ├── useAsyncFn.md │ ├── useAsyncRetry.md │ ├── useAudio.md │ ├── useBattery.md │ ├── useBeforeUnload.md │ ├── useClickAway.md │ ├── useCookie.md │ ├── useCopyToClipboard.md │ ├── useCounter.md │ ├── useCss.md │ ├── useCustomCompareEffect.md │ ├── useDebounce.md │ ├── useDeepCompareEffect.md │ ├── useDefault.md │ ├── useDrop.md │ ├── useEffectOnce.md │ ├── useEnsuredForwardedRef.md │ ├── useError.md │ ├── useEvent.md │ ├── useFavicon.md │ ├── useFirstMountState.md │ ├── useFullscreen.md │ ├── useGeolocation.md │ ├── useGetSet.md │ ├── useGetSetState.md │ ├── useHarmonicIntervalFn.md │ ├── useHash.md │ ├── useHover.md │ ├── useIdle.md │ ├── useIntersection.md │ ├── useInterval.md │ ├── useIsomorphicLayoutEffect.md │ ├── useKey.md │ ├── useKeyPress.md │ ├── useKeyPressEvent.md │ ├── useKeyboardJs.md │ ├── useLatest.md │ ├── useLifecycles.md │ ├── useList.md │ ├── useLocalStorage.md │ ├── useLocation.md │ ├── useLockBodyScroll.md │ ├── useLogger.md │ ├── useLongPress.md │ ├── useMap.md │ ├── useMeasure.md │ ├── useMedia.md │ ├── useMediaDevices.md │ ├── useMediatedState.md │ ├── useMethods.md │ ├── useMotion.md │ ├── useMount.md │ ├── useMountedState.md │ ├── useMouse.md │ ├── useMouseWheel.md │ ├── useMultiStateValidator.md │ ├── useNetworkState.md │ ├── useObservable.md │ ├── useOrientation.md │ ├── usePageLeave.md │ ├── usePermission.md │ ├── usePinchZoom.md │ ├── usePrevious.md │ ├── usePreviousDistinct.md │ ├── usePromise.md │ ├── useQueue.md │ ├── useRaf.md │ ├── useRafLoop.md │ ├── useRafState.md │ ├── useRendersCount.md │ ├── useScratch.md │ ├── useScroll.md │ ├── useScrollbarWidth.md │ ├── useScrolling.md │ ├── useSearchParam.md │ ├── useSessionStorage.md │ ├── useSet.md │ ├── useSetState.md │ ├── useShallowCompareEffect.md │ ├── useSize.md │ ├── useSlider.md │ ├── useSpeech.md │ ├── useSpring.md │ ├── useStartTyping.md │ ├── useStateList.md │ ├── useStateValidator.md │ ├── useStateWithHistory.md │ ├── useThrottle.md │ ├── useThrottleFn.md │ ├── useTimeout.md │ ├── useTimeoutFn.md │ ├── useTitle.md │ ├── useToggle.md │ ├── useTween.md │ ├── useUnmount.md │ ├── useUnmountPromise.md │ ├── useUpdate.md │ ├── useUpdateEffect.md │ ├── useUpsert.md │ ├── useVibrate.md │ ├── useVideo.md │ ├── useWindowScroll.md │ └── useWindowSize.md ├── jest.config.base.ts ├── jest.config.node.ts ├── jest.config.ts ├── package.json ├── renovate.json ├── src/ │ ├── component/ │ │ └── UseKey.tsx │ ├── factory/ │ │ ├── createBreakpoint.ts │ │ ├── createGlobalState.ts │ │ ├── createHTMLMediaHook.ts │ │ ├── createMemo.ts │ │ ├── createReducer.ts │ │ ├── createReducerContext.ts │ │ ├── createRenderProp.ts │ │ ├── createRouter.ts │ │ └── createStateContext.ts │ ├── index.ts │ ├── misc/ │ │ ├── hookState.ts │ │ ├── isDeepEqual.ts │ │ ├── parseTimeRanges.ts │ │ ├── types.ts │ │ └── util.ts │ ├── useAsync.ts │ ├── useAsyncFn.ts │ ├── useAsyncRetry.ts │ ├── useAudio.ts │ ├── useBattery.ts │ ├── useBeforeUnload.ts │ ├── useBoolean.ts │ ├── useClickAway.ts │ ├── useCookie.ts │ ├── useCopyToClipboard.ts │ ├── useCounter.ts │ ├── useCss.ts │ ├── useCustomCompareEffect.ts │ ├── useDebounce.ts │ ├── useDeepCompareEffect.ts │ ├── useDefault.ts │ ├── useDrop.ts │ ├── useDropArea.ts │ ├── useEffectOnce.ts │ ├── useEnsuredForwardedRef.ts │ ├── useError.ts │ ├── useEvent.ts │ ├── useFavicon.ts │ ├── useFirstMountState.ts │ ├── useFullscreen.ts │ ├── useGeolocation.ts │ ├── useGetSet.ts │ ├── useGetSetState.ts │ ├── useHarmonicIntervalFn.ts │ ├── useHash.ts │ ├── useHover.ts │ ├── useHoverDirty.ts │ ├── useIdle.ts │ ├── useIntersection.ts │ ├── useInterval.ts │ ├── useIsomorphicLayoutEffect.ts │ ├── useKey.ts │ ├── useKeyPress.ts │ ├── useKeyPressEvent.ts │ ├── useKeyboardJs.ts │ ├── useLatest.ts │ ├── useLifecycles.ts │ ├── useList.ts │ ├── useLocalStorage.ts │ ├── useLocation.ts │ ├── useLockBodyScroll.ts │ ├── useLogger.ts │ ├── useLongPress.ts │ ├── useMap.ts │ ├── useMeasure.ts │ ├── useMeasureDirty.ts │ ├── useMedia.ts │ ├── useMediaDevices.ts │ ├── useMediatedState.ts │ ├── useMethods.ts │ ├── useMotion.ts │ ├── useMount.ts │ ├── useMountedState.ts │ ├── useMouse.ts │ ├── useMouseHovered.ts │ ├── useMouseWheel.ts │ ├── useMultiStateValidator.ts │ ├── useNetworkState.ts │ ├── useNumber.ts │ ├── useObservable.ts │ ├── useOrientation.ts │ ├── usePageLeave.ts │ ├── usePermission.ts │ ├── usePinchZoom.ts │ ├── usePrevious.ts │ ├── usePreviousDistinct.ts │ ├── usePromise.ts │ ├── useQueue.ts │ ├── useRaf.ts │ ├── useRafLoop.ts │ ├── useRafState.ts │ ├── useRendersCount.ts │ ├── useScratch.ts │ ├── useScroll.ts │ ├── useScrollbarWidth.ts │ ├── useScrolling.ts │ ├── useSearchParam.ts │ ├── useSessionStorage.ts │ ├── useSet.ts │ ├── useSetState.ts │ ├── useShallowCompareEffect.ts │ ├── useSize.tsx │ ├── useSlider.ts │ ├── useSpeech.ts │ ├── useSpring.ts │ ├── useStartTyping.ts │ ├── useStateList.ts │ ├── useStateValidator.ts │ ├── useStateWithHistory.ts │ ├── useThrottle.ts │ ├── useThrottleFn.ts │ ├── useTimeout.ts │ ├── useTimeoutFn.ts │ ├── useTitle.ts │ ├── useToggle.ts │ ├── useTween.ts │ ├── useUnmount.ts │ ├── useUnmountPromise.ts │ ├── useUpdate.ts │ ├── useUpdateEffect.ts │ ├── useUpsert.ts │ ├── useVibrate.ts │ ├── useVideo.ts │ ├── useWait.ts │ ├── useWindowScroll.ts │ └── useWindowSize.ts ├── stories/ │ ├── comps/ │ │ └── UseKey.story.tsx │ ├── createBreakpoint.story.tsx │ ├── createGlobalState.story.tsx │ ├── createMemo.story.tsx │ ├── createReducer.story.tsx │ ├── createReducerContext.story.tsx │ ├── createStateContext.story.tsx │ ├── useAsync.story.tsx │ ├── useAsyncFn.story.tsx │ ├── useAsyncRetry.story.tsx │ ├── useAudio.story.tsx │ ├── useBattery.story.tsx │ ├── useBeforeUnload.story.tsx │ ├── useBoolean.story.tsx │ ├── useClickAway.story.tsx │ ├── useCookie.story.tsx │ ├── useCopyToClipboard.story.tsx │ ├── useCounter.story.tsx │ ├── useCss.story.tsx │ ├── useCustomCompareEffect.story.tsx │ ├── useDebounce.story.tsx │ ├── useDeepCompareEffect.story.tsx │ ├── useDefault.story.tsx │ ├── useDrop.story.tsx │ ├── useDropArea.story.tsx │ ├── useEffectOnce.story.tsx │ ├── useEnsuredForwardedRef.story.tsx │ ├── useError.story.tsx │ ├── useEvent.story.tsx │ ├── useFavicon.story.tsx │ ├── useFirstMountState.story.tsx │ ├── useFullscreen.story.tsx │ ├── useGeolocation.story.tsx │ ├── useGetSet.story.tsx │ ├── useGetSetState.story.tsx │ ├── useHarmonicIntervalFn.story.tsx │ ├── useHash.story.tsx │ ├── useHover.story.tsx │ ├── useHoverDirty.story.tsx │ ├── useIdle.story.tsx │ ├── useIntersection.story.tsx │ ├── useInterval.story.tsx │ ├── useIsomorphicLayoutEffect.story.tsx │ ├── useKey.story.tsx │ ├── useKeyPress.story.tsx │ ├── useKeyPressEvent.story.tsx │ ├── useKeyboardJs.story.tsx │ ├── useLatest.story.tsx │ ├── useLifecycles.story.tsx │ ├── useList.story.tsx │ ├── useLocalStorage.story.tsx │ ├── useLocation.story.tsx │ ├── useLockBodyScroll.story.tsx │ ├── useLogger.story.tsx │ ├── useLongPress.story.tsx │ ├── useMap.story.tsx │ ├── useMeasure.story.tsx │ ├── useMedia.story.tsx │ ├── useMediaDevices.story.tsx │ ├── useMediatedState.story.tsx │ ├── useMethods.story.tsx │ ├── useMotion.story.tsx │ ├── useMount.story.tsx │ ├── useMountedState.story.tsx │ ├── useMouse.story.tsx │ ├── useMouseHovered.story.tsx │ ├── useMouseWheel.story.tsx │ ├── useMultiStateValidator.story.tsx │ ├── useNetwork.story.tsx │ ├── useObservable.story.tsx │ ├── useOrientation.story.tsx │ ├── usePageLeave.story.tsx │ ├── usePermission.story.tsx │ ├── usePinchZoom.story.tsx │ ├── usePrevious.story.tsx │ ├── usePreviousDistinct.story.tsx │ ├── usePromise.story.tsx │ ├── useQueue.story.tsx │ ├── useRaf.story.tsx │ ├── useRafLoop.story.tsx │ ├── useRafState.story.tsx │ ├── useRendersCount.story.tsx │ ├── useScratch.story.tsx │ ├── useScroll.story.tsx │ ├── useScrollbarWidth.story.tsx │ ├── useScrolling.story.tsx │ ├── useSearchParam.story.tsx │ ├── useSessionStorage.story.tsx │ ├── useSet.story.tsx │ ├── useSetState.story.tsx │ ├── useShallowCompareEffect.story.tsx │ ├── useSize.story.tsx │ ├── useSlider.story.tsx │ ├── useSpeech.story.tsx │ ├── useSpring.story.tsx │ ├── useStartTyping.story.tsx │ ├── useStateList.story.tsx │ ├── useStateValidator.story.tsx │ ├── useStateWithHistory.story.tsx │ ├── useThrottle.story.tsx │ ├── useThrottleFn.story.tsx │ ├── useTimeout.story.tsx │ ├── useTimeoutFn.story.tsx │ ├── useTitle.story.tsx │ ├── useToggle.story.tsx │ ├── useTween.story.tsx │ ├── useUnmount.story.tsx │ ├── useUpdate.story.tsx │ ├── useUpdateEffect.story.tsx │ ├── useUpsert.story.tsx │ ├── useVibrate.story.tsx │ ├── useVideo.story.tsx │ ├── useWindowScroll.story.tsx │ ├── useWindowSize.story.tsx │ └── util/ │ ├── CenterStory.tsx │ ├── ConsoleStory.tsx │ ├── NewTabStory.tsx │ └── ShowDocs.tsx ├── tests/ │ ├── createBreakpoint.test.ts │ ├── createGlobalState.test.ts │ ├── createMemo.test.ts │ ├── createReducer.test.ts │ ├── createReducerContext.test.tsx │ ├── createStateContext.test.tsx │ ├── misc/ │ │ └── hookState.test.ts │ ├── setupTests.ts │ ├── useAsync.test.tsx │ ├── useAsyncFn.test.tsx │ ├── useAudio.test.ts │ ├── useBoolean.test.ts │ ├── useCookie.test.tsx │ ├── useCopyToClipboard.test.ts │ ├── useCounter.test.ts │ ├── useCustomCompareEffect.test.ts │ ├── useDebounce.test.ts │ ├── useDeepCompareEffect.test.ts │ ├── useDefault.test.ts │ ├── useEffectOnce.test.ts │ ├── useEnsuredForwardedRef.test.tsx │ ├── useError.test.ts │ ├── useEvent.test.ts │ ├── useFavicon.test.tsx │ ├── useFirstMountState.test.ts │ ├── useGetSet.test.ts │ ├── useGetSetState.test.ts │ ├── useHash.test.ts │ ├── useIntersection.test.tsx │ ├── useInterval.test.ts │ ├── useLatest.test.ts │ ├── useList.test.ts │ ├── useLocalStorage.test.ts │ ├── useLogger.test.ts │ ├── useLongPress.test.tsx │ ├── useMap.test.ts │ ├── useMeasure.test.ts │ ├── useMedia.test.ts │ ├── useMediatedState.test.ts │ ├── useMethods.test.ts │ ├── useMount.test.ts │ ├── useMountedState.test.tsx │ ├── useMultiStateValidator.test.ts │ ├── useNetworkState.test.ts │ ├── useNumber.test.ts │ ├── useObservable.test.ts │ ├── useOrientation.test.ts │ ├── usePrevious.test.ts │ ├── usePreviousDistinct.test.tsx │ ├── useQueue.test.ts │ ├── useRaf.test.ts │ ├── useRafLoop.test.tsx │ ├── useRafState.test.ts │ ├── useRendersCount.test.ts │ ├── useScrollbarWidth.test.ts │ ├── useSearchParam.test.ts │ ├── useSet.test.ts │ ├── useSetState.test.ts │ ├── useShallowCompareEffect.test.ts │ ├── useSpring.test.ts │ ├── useStateList.test.ts │ ├── useStateValidator.test.ts │ ├── useStateWithHistory.test.ts │ ├── useThrottle.test.ts │ ├── useThrottleFn.test.ts │ ├── useTimeout.test.ts │ ├── useTimeoutFn.test.ts │ ├── useTitle.test.ts │ ├── useToggle.test.ts │ ├── useTween.test.ts │ ├── useUnmount.test.ts │ ├── useUnmountPromise.test.ts │ ├── useUpdate.test.ts │ ├── useUpdateEffect.test.ts │ ├── useUpsert.test.ts │ ├── useWindowScroll.test.tsx │ └── useWindowSize.test.tsx └── tsconfig.json
SYMBOL INDEX (223 symbols across 110 files)
FILE: src/factory/createGlobalState.ts
function createGlobalState (line 14) | function createGlobalState<S>(initialState?: S) {
FILE: src/factory/createHTMLMediaHook.ts
type HTMLMediaProps (line 6) | interface HTMLMediaProps
type HTMLMediaState (line 12) | interface HTMLMediaState {
type HTMLMediaControls (line 22) | interface HTMLMediaControls {
type MediaPropsWithRef (line 31) | type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObj...
function createHTMLMediaHook (line 33) | function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVideoEleme...
FILE: src/factory/createReducer.ts
type Dispatch (line 4) | type Dispatch<Action> = (action: Action) => void;
type Store (line 6) | interface Store<Action, State> {
type Middleware (line 11) | type Middleware<Action, State> = (
function composeMiddleware (line 15) | function composeMiddleware<Action, State>(chain: Middleware<Action, Stat...
FILE: src/factory/createRenderProp.ts
function createRenderProp (line 3) | function createRenderProp(hook, mapPropsToArgs = defaultMapPropsToArgs) {
FILE: src/factory/createRouter.ts
type RouterProviderProps (line 3) | interface RouterProviderProps {
FILE: src/misc/hookState.ts
type IHookStateInitialSetter (line 1) | type IHookStateInitialSetter<S> = () => S;
type IHookStateInitAction (line 2) | type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
type IHookStateSetter (line 4) | type IHookStateSetter<S> = ((prevState: S) => S) | (() => S);
type IHookStateSetAction (line 5) | type IHookStateSetAction<S> = S | IHookStateSetter<S>;
type IHookStateResolvable (line 7) | type IHookStateResolvable<S> = S | IHookStateInitialSetter<S> | IHookSta...
function resolveHookState (line 18) | function resolveHookState<S, C extends S>(
FILE: src/misc/parseTimeRanges.ts
function parseTimeRanges (line 1) | function parseTimeRanges(ranges) {
FILE: src/misc/types.ts
type PromiseType (line 1) | type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? ...
type FunctionReturningPromise (line 3) | type FunctionReturningPromise = (...args: any[]) => Promise<any>;
FILE: src/misc/util.ts
function on (line 3) | function on<T extends Window | Document | HTMLElement | EventTarget>(
function off (line 12) | function off<T extends Window | Document | HTMLElement | EventTarget>(
FILE: src/useAsync.ts
function useAsync (line 7) | function useAsync<T extends FunctionReturningPromise>(
FILE: src/useAsyncFn.ts
type AsyncState (line 5) | type AsyncState<T> =
type StateFromFunctionReturningPromise (line 27) | type StateFromFunctionReturningPromise<T extends FunctionReturningPromis...
type AsyncFnReturn (line 31) | type AsyncFnReturn<T extends FunctionReturningPromise = FunctionReturnin...
function useAsyncFn (line 36) | function useAsyncFn<T extends FunctionReturningPromise>(
FILE: src/useAsyncRetry.ts
type AsyncStateRetry (line 4) | type AsyncStateRetry<T> = AsyncState<T> & {
FILE: src/useBattery.ts
type BatteryState (line 5) | interface BatteryState {
type BatteryManager (line 12) | interface BatteryManager extends Readonly<BatteryState>, EventTarget {
type NavigatorWithPossibleBattery (line 19) | interface NavigatorWithPossibleBattery extends Navigator {
type UseBatteryState (line 23) | type UseBatteryState =
function useBatteryMock (line 31) | function useBatteryMock(): UseBatteryState {
function useBattery (line 35) | function useBattery(): UseBatteryState {
FILE: src/useCopyToClipboard.ts
type CopyToClipboardState (line 6) | interface CopyToClipboardState {
FILE: src/useCounter.ts
type CounterActions (line 5) | interface CounterActions {
function useCounter (line 13) | function useCounter(
FILE: src/useCss.ts
type Nano (line 8) | type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
FILE: src/useCustomCompareEffect.ts
type DepsEqualFnType (line 5) | type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, n...
FILE: src/useDebounce.ts
type UseDebounceReturn (line 4) | type UseDebounceReturn = [() => boolean | null, () => void];
function useDebounce (line 6) | function useDebounce(
FILE: src/useDrop.ts
type DropAreaState (line 4) | interface DropAreaState {
type DropAreaBond (line 8) | interface DropAreaBond {
type DropAreaOptions (line 16) | interface DropAreaOptions {
FILE: src/useDropArea.ts
type DropAreaState (line 5) | interface DropAreaState {
type DropAreaBond (line 9) | interface DropAreaBond {
type DropAreaOptions (line 17) | interface DropAreaOptions {
FILE: src/useEnsuredForwardedRef.ts
function useEnsuredForwardedRef (line 13) | function useEnsuredForwardedRef<T>(
function ensuredForwardRef (line 28) | function ensuredForwardRef<T, P = {}>(
FILE: src/useEvent.ts
type ListenerType1 (line 4) | interface ListenerType1 {
type ListenerType2 (line 10) | interface ListenerType2 {
type UseEventTarget (line 16) | type UseEventTarget = ListenerType1 | ListenerType2;
type AddEventListener (line 27) | type AddEventListener<T> = T extends ListenerType1
type UseEventOptions (line 33) | type UseEventOptions<T> = Parameters<AddEventListener<T>>[2];
FILE: src/useFirstMountState.ts
function useFirstMountState (line 3) | function useFirstMountState(): boolean {
FILE: src/useFullscreen.ts
type FullScreenOptions (line 6) | interface FullScreenOptions {
FILE: src/useGeolocation.ts
type IGeolocationPositionError (line 8) | interface IGeolocationPositionError {
type GeoLocationSensorState (line 16) | interface GeoLocationSensorState {
FILE: src/useGetSet.ts
function useGetSet (line 5) | function useGetSet<S>(
FILE: src/useHover.ts
type Element (line 6) | type Element = ((state: boolean) => React.ReactElement<any>) | React.Rea...
FILE: src/useKey.ts
type KeyPredicate (line 5) | type KeyPredicate = (event: KeyboardEvent) => boolean;
type KeyFilter (line 6) | type KeyFilter = null | undefined | string | ((event: KeyboardEvent) => ...
type Handler (line 7) | type Handler = (event: KeyboardEvent) => void;
type UseKeyOptions (line 9) | interface UseKeyOptions<T extends UseEventTarget> {
FILE: src/useList.ts
type ListActions (line 5) | interface ListActions<T> {
function useList (line 65) | function useList<T>(initialList: IHookStateInitAction<T[]> = []): [T[], ...
FILE: src/useLocalStorage.ts
type parserOptions (line 4) | type parserOptions<T> =
FILE: src/useLocation.ts
type LocationSensorState (line 25) | interface LocationSensorState {
FILE: src/useLockBodyScroll.ts
function getClosestBody (line 4) | function getClosestBody(
function preventDefault (line 21) | function preventDefault(rawEvent: TouchEvent): boolean {
type BodyInfoItem (line 31) | interface BodyInfoItem {
FILE: src/useLongPress.ts
type Options (line 4) | interface Options {
FILE: src/useMap.ts
type StableActions (line 3) | interface StableActions<T extends object> {
type Actions (line 10) | interface Actions<T extends object> extends StableActions<T> {
FILE: src/useMeasure.ts
type UseMeasureRect (line 5) | type UseMeasureRect = Pick<
type UseMeasureRef (line 9) | type UseMeasureRef<E extends Element = Element> = (element: E) => void;
type UseMeasureResult (line 10) | type UseMeasureResult<E extends Element = Element> = [UseMeasureRef<E>, ...
function useMeasure (line 23) | function useMeasure<E extends Element = Element>(): UseMeasureResult<E> {
FILE: src/useMeasureDirty.ts
type ContentRect (line 4) | interface ContentRect {
FILE: src/useMediatedState.ts
type StateMediator (line 3) | interface StateMediator<S = any> {
type UseMediatedStateReturn (line 9) | type UseMediatedStateReturn<S = any> = [S, Dispatch<SetStateAction<S>>];
function useMediatedState (line 19) | function useMediatedState<S = any>(
FILE: src/useMethods.ts
type Action (line 3) | type Action = {
type CreateMethods (line 8) | type CreateMethods<M, T> = (state: T) => {
type WrappedMethods (line 12) | type WrappedMethods<M> = {
FILE: src/useMotion.ts
type MotionSensorState (line 4) | interface MotionSensorState {
FILE: src/useMountedState.ts
function useMountedState (line 3) | function useMountedState(): () => boolean {
FILE: src/useMouse.ts
type State (line 6) | interface State {
FILE: src/useMouseHovered.ts
type UseMouseHoveredOptions (line 5) | interface UseMouseHoveredOptions {
FILE: src/useMultiStateValidator.ts
type MultiStateValidatorStates (line 4) | type MultiStateValidatorStates = any[] | { [p: string]: any } | { [p: nu...
type MultiStateValidator (line 5) | type MultiStateValidator<V extends ValidityState, S extends MultiStateVa...
function useMultiStateValidator (line 8) | function useMultiStateValidator<
FILE: src/useNetworkState.ts
type INetworkInformation (line 5) | interface INetworkInformation extends EventTarget {
type IUseNetworkState (line 24) | interface IUseNetworkState {
function getConnectionState (line 85) | function getConnectionState(previousState?: IUseNetworkState): IUseNetwo...
function useNetworkState (line 102) | function useNetworkState(
FILE: src/useObservable.ts
type Observable (line 4) | interface Observable<T> {
function useObservable (line 12) | function useObservable<T>(observable$: Observable<T>, initialValue?: T):...
FILE: src/useOrientation.ts
type OrientationState (line 4) | interface OrientationState {
FILE: src/usePermission.ts
type IState (line 4) | type IState = PermissionState | '';
type IPushPermissionDescriptor (line 6) | interface IPushPermissionDescriptor extends PermissionDescriptor {
type IMidiPermissionDescriptor (line 11) | interface IMidiPermissionDescriptor extends PermissionDescriptor {
type IDevicePermissionDescriptor (line 16) | interface IDevicePermissionDescriptor extends PermissionDescriptor {
type IPermissionDescriptor (line 21) | type IPermissionDescriptor =
FILE: src/usePinchZoom.ts
type CacheRef (line 3) | type CacheRef = {
type ZoomState (line 8) | enum ZoomState {
type ZoomStateType (line 13) | type ZoomStateType = ZoomState.ZOOMING_IN | ZoomState.ZOOMING_OUT;
FILE: src/usePrevious.ts
function usePrevious (line 3) | function usePrevious<T>(state: T): T | undefined {
FILE: src/usePreviousDistinct.ts
type Predicate (line 4) | type Predicate<T> = (prev: T | undefined, next: T) => boolean;
function usePreviousDistinct (line 8) | function usePreviousDistinct<T>(
FILE: src/usePromise.ts
type UsePromise (line 4) | type UsePromise = () => <T>(promise: Promise<T>) => Promise<T>;
FILE: src/useQueue.ts
type QueueMethods (line 3) | interface QueueMethods<T> {
method first (line 25) | get first() {
method last (line 28) | get last() {
method size (line 31) | get size() {
FILE: src/useRafLoop.ts
type RafLoopReturns (line 3) | type RafLoopReturns = [() => void, () => void, () => boolean];
function useRafLoop (line 5) | function useRafLoop(
FILE: src/useRendersCount.ts
function useRendersCount (line 3) | function useRendersCount(): number {
FILE: src/useScratch.ts
type ScratchSensorParams (line 6) | interface ScratchSensorParams {
type ScratchSensorState (line 13) | interface ScratchSensorState {
type ScratchSensorProps (line 159) | interface ScratchSensorProps extends ScratchSensorParams {
FILE: src/useScroll.ts
type State (line 6) | interface State {
FILE: src/useScrollbarWidth.ts
function useScrollbarWidth (line 4) | function useScrollbarWidth(): number | undefined {
FILE: src/useSearchParam.ts
type UseQueryParam (line 6) | type UseQueryParam = (param: string) => string | null;
FILE: src/useSet.ts
type StableActions (line 3) | interface StableActions<K> {
type Actions (line 11) | interface Actions<K> extends StableActions<K> {
FILE: src/useSize.tsx
type Element (line 8) | type Element = ((state: State) => React.ReactElement<any>) | React.React...
type State (line 10) | interface State {
FILE: src/useSlider.ts
type State (line 6) | interface State {
type Options (line 11) | interface Options {
FILE: src/useSpeech.ts
type SpeechOptions (line 3) | type SpeechOptions = {
type ISpeechOptions (line 11) | type ISpeechOptions = Partial<SpeechOptions>;
type VoiceInfo (line 13) | type VoiceInfo = Pick<SpeechSynthesisVoice, 'lang' | 'name'>;
type ISpeechState (line 15) | type ISpeechState = SpeechOptions & {
type Status (line 21) | enum Status {
FILE: src/useStateList.ts
type UseStateListReturn (line 6) | interface UseStateListReturn<T> {
function useStateList (line 17) | function useStateList<T>(stateSet: T[] = []): UseStateListReturn<T> {
FILE: src/useStateValidator.ts
type ValidityState (line 3) | type ValidityState = [boolean | undefined, ...any[]] | [undefined];
type StateValidator (line 5) | interface StateValidator<V, S> {
type UseStateValidatorReturn (line 11) | type UseStateValidatorReturn<V> = [V, () => void];
function useStateValidator (line 13) | function useStateValidator<V extends ValidityState, S>(
FILE: src/useStateWithHistory.ts
type HistoryState (line 5) | interface HistoryState<S> {
type UseStateHistoryReturn (line 14) | type UseStateHistoryReturn<S> = [S, Dispatch<IHookStateSetAction<S>>, Hi...
function useStateWithHistory (line 23) | function useStateWithHistory<S, I extends S>(
FILE: src/useTimeout.ts
type UseTimeoutReturn (line 4) | type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
function useTimeout (line 6) | function useTimeout(ms: number = 0): UseTimeoutReturn {
FILE: src/useTimeoutFn.ts
type UseTimeoutFnReturn (line 3) | type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
function useTimeoutFn (line 5) | function useTimeoutFn(fn: Function, ms: number = 0): UseTimeoutFnReturn {
FILE: src/useTitle.ts
type UseTitleOptions (line 3) | interface UseTitleOptions {
constant DEFAULT_USE_TITLE_OPTIONS (line 7) | const DEFAULT_USE_TITLE_OPTIONS: UseTitleOptions = {
function useTitle (line 11) | function useTitle(title: string, options: UseTitleOptions = DEFAULT_USE_...
FILE: src/useTween.ts
type Easing (line 4) | type Easing = (t: number) => number;
FILE: src/useUnmountPromise.ts
type Race (line 4) | type Race = <P extends Promise<any>, E = any>(promise: P, onError?: (err...
FILE: src/useUpdate.ts
function useUpdate (line 5) | function useUpdate(): () => void {
FILE: src/useUpsert.ts
type UpsertListActions (line 4) | interface UpsertListActions<T> extends Omit<ListActions<T>, 'upsert'> {
function useUpsert (line 11) | function useUpsert<T>(
FILE: src/useVibrate.ts
type VibrationPattern (line 4) | type VibrationPattern = number | number[];
function useVibrate (line 8) | function useVibrate(
FILE: src/useWindowScroll.ts
type State (line 6) | interface State {
FILE: src/useWindowSize.ts
type Options (line 7) | interface Options {
FILE: stories/createReducer.story.tsx
function init (line 12) | function init(initialCount) {
function reducer (line 16) | function reducer(state, action) {
FILE: stories/createReducerContext.story.tsx
type Action (line 7) | type Action = 'increment' | 'decrement';
FILE: stories/useEnsuredForwardedRef.story.tsx
constant INITIAL_SIZE (line 8) | const INITIAL_SIZE = {
FILE: stories/useError.story.tsx
class ErrorBoundary (line 6) | class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
method constructor (line 7) | constructor(props) {
method getDerivedStateFromError (line 12) | static getDerivedStateFromError(error) {
method render (line 16) | render() {
FILE: stories/useLatest.story.tsx
function handleAlertClick (line 11) | function handleAlertClick() {
FILE: stories/useList.story.tsx
type UpsertDemoType (line 47) | interface UpsertDemoType {
FILE: stories/useMethods.story.tsx
function createMethods (line 10) | function createMethods(state) {
FILE: stories/useTimeout.story.tsx
function TestComponent (line 6) | function TestComponent(props: { ms?: number } = {}) {
FILE: stories/useTimeoutFn.story.tsx
function fn (line 10) | function fn() {
FILE: stories/useUpsert.story.tsx
type DemoType (line 6) | interface DemoType {
FILE: tests/createReducer.test.ts
function reducer (line 22) | function reducer(state, action) {
FILE: tests/createReducerContext.test.tsx
type Action (line 6) | type Action = 'increment' | 'decrement';
FILE: tests/setupTests.ts
method observe (line 6) | observe() {}
method disconnect (line 8) | disconnect() {}
FILE: tests/useAsyncFn.test.tsx
type AdderFn (line 11) | type AdderFn = (a?: number, b?: number) => Promise<number>;
FILE: tests/useDebounce.test.ts
function getHook (line 31) | function getHook(
FILE: tests/useEvent.test.ts
type Props (line 4) | interface Props {
FILE: tests/useHash.test.ts
method get (line 8) | get() {
method set (line 11) | set(newHash) {
FILE: tests/useList.test.ts
function getHook (line 10) | function getHook<T>(initialArray?: T[]) {
FILE: tests/useMeasure.test.ts
method constructor (line 25) | constructor(ls) {
method observe (line 28) | observe() {}
method disconnect (line 29) | disconnect() {}
method constructor (line 45) | constructor(ls) {
method observe (line 48) | observe() {}
method disconnect (line 49) | disconnect() {}
method constructor (line 91) | constructor(ls) {
method observe (line 94) | observe() {}
method disconnect (line 95) | disconnect() {}
method observe (line 165) | observe() {}
method disconnect (line 166) | disconnect() {
FILE: tests/useMediatedState.test.ts
function getHook (line 11) | function getHook(
FILE: tests/useMethods.test.ts
method reset (line 24) | reset() {
method increment (line 27) | increment() {
method decrement (line 30) | decrement() {
method reset (line 49) | reset() {
method increment (line 52) | increment() {
method decrement (line 55) | decrement() {
FILE: tests/useMultiStateValidator.test.ts
type Mock (line 6) | interface Mock extends jest.Mock {}
function getHook (line 15) | function getHook(
FILE: tests/useOrientation.test.ts
function getHook (line 31) | function getHook(...args) {
function triggerOrientation (line 35) | function triggerOrientation(type: string, angle: number) {
FILE: tests/usePreviousDistinct.test.tsx
function getHook (line 9) | function getHook<T>(initialValue?: T, predicate?: Predicate<T>) {
FILE: tests/useRaf.test.ts
type RequestAnimationFrame (line 8) | interface RequestAnimationFrame {
FILE: tests/useRafState.test.ts
type RequestAnimationFrame (line 5) | interface RequestAnimationFrame {
FILE: tests/useSpring.test.ts
type Listener (line 13) | interface Listener {
FILE: tests/useStateList.test.ts
function getHook (line 9) | function getHook(list: any[] = ['a', 'b', 'c']) {
FILE: tests/useStateValidator.test.ts
type Mock (line 8) | interface Mock extends jest.Mock {}
function getHook (line 15) | function getHook(
FILE: tests/useStateWithHistory.test.ts
function getHook (line 11) | function getHook<S, I extends S>(
FILE: tests/useTimeout.test.ts
function getHook (line 30) | function getHook(
FILE: tests/useTimeoutFn.test.ts
function getHook (line 31) | function getHook(
FILE: tests/useUpsert.test.ts
type TestItem (line 4) | interface TestItem {
FILE: tests/useWindowScroll.test.tsx
function getHook (line 26) | function getHook() {
function setWindowScroll (line 32) | function setWindowScroll(x: number, y: number) {
function triggerScroll (line 37) | function triggerScroll(dimension: 'x' | 'y', value: number) {
FILE: tests/useWindowSize.test.tsx
function getHook (line 24) | function getHook(options?: any) {
function triggerResize (line 28) | function triggerResize(dimension: 'width' | 'height', value: number) {
Condensed preview — 465 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (744K chars).
[
{
"path": ".editorconfig",
"chars": 829,
"preview": "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_"
},
{
"path": ".eslintrc.js",
"chars": 480,
"preview": "module.exports = {\n extends: ['react-app', 'prettier'],\n plugins: ['prettier'],\n rules: {\n 'prettier/prettier': [\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 1508,
"preview": "# These are supported funding model platforms\n\ngithub: [\n \"streamich\",\n \"wardoost\",\n \"xobotyi\",\n \"Belco90\",\n \"ankit"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 668,
"preview": "---\nname: Bug report\nabout: Create a report if you having any problems using the package\ntitle: ''\nlabels: ''\nassignees:"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 544,
"preview": "---\nname: Feature request\nabout: Have an idea? Great! Let us know, maybe we`ve been waiting only for you =)\ntitle: ''\nla"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1124,
"preview": "# Description\n\n<!-- Please include a summary of the change along with relevant motivation and context. -->\n\n\n## Type of "
},
{
"path": ".github/workflows/check-codebase.yml",
"chars": 1849,
"preview": "name: Check codebase\n\non:\n push:\n branches:\n - master\n pull_request:\n branches:\n - master\n\njobs:\n bui"
},
{
"path": ".github/workflows/mirror.yml",
"chars": 531,
"preview": "name: Node.js CI\n\non:\n push:\n branches: [master]\n\njobs:\n mirror:\n runs-on: ubuntu-latest\n steps:\n - uses"
},
{
"path": ".github/workflows/release.yml",
"chars": 846,
"preview": "name: Node.js CI\n\non:\n push:\n branches: [master, next]\n\njobs:\n release:\n if: ${{ github.event_name == 'push' && "
},
{
"path": ".gitignore",
"chars": 1054,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# IDE fil"
},
{
"path": ".storybook/addons.js",
"chars": 172,
"preview": "import '@storybook/addon-knobs/register';\nimport '@storybook/addon-options/register';\nimport '@storybook/addon-actions/r"
},
{
"path": ".storybook/config.js",
"chars": 517,
"preview": "import {configure} from '@storybook/react';\nimport {setOptions} from '@storybook/addon-options';\n\nsetOptions({\n sortSto"
},
{
"path": ".storybook/webpack.config.js",
"chars": 990,
"preview": "const path = require('path');\nconst { compilerOptions } = require('../tsconfig.json');\nconst ForkTsCheckerWebpackPlugin "
},
{
"path": ".travis.yml",
"chars": 337,
"preview": "language: node_js\nos:\n - linux\ncache:\n yarn: true\n directories:\n - ~/.npm\nnotifications:\n email: false\nnode_js:\n "
},
{
"path": "CHANGELOG.md",
"chars": 86739,
"preview": "# [17.6.0](https://github.com/streamich/react-use/compare/v17.5.1...v17.6.0) (2024-12-09)\n\n\n### Features\n\n* add onChange"
},
{
"path": "CONTRIBUTING.md",
"chars": 3460,
"preview": "# Contributing\n\nThanks for being willing to contribute 🙌 If you contribute to this project, you agree to release your wo"
},
{
"path": "LICENSE",
"chars": 1211,
"preview": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, c"
},
{
"path": "README.md",
"chars": 16209,
"preview": "<div align=\"center\">\n <h1>\n <br/>\n <br/>\n 👍\n <br />\n react-use\n <br />\n <br />\n <br />\n <br "
},
{
"path": "SECURITY.md",
"chars": 423,
"preview": "# Security Policy\n\n## Supported Versions\n\nWe release patches for security vulnerabilities. The latest major version\nwill"
},
{
"path": "babel.config.js",
"chars": 359,
"preview": "module.exports = {\n presets: [\n [\n \"@babel/preset-env\",\n {\n targets: {\n node: \"current\"\n "
},
{
"path": "docs/Animations.md",
"chars": 80,
"preview": "# Animations\n\n*\"Animation Hooks\"* usually interpolate numeric values over time.\n"
},
{
"path": "docs/Lifecycles.md",
"chars": 125,
"preview": "# Lifecycle\n\n*\"Lifecycle Hooks\"* modify and extend built-in React hooks or imitate React Class component lifecycle patte"
},
{
"path": "docs/Sensors.md",
"chars": 146,
"preview": "# Sensors\n\n*\"Sensor Hooks\"* listen to changes in some interface and force your components\nto be re-rendered with the new"
},
{
"path": "docs/Side-effects.md",
"chars": 103,
"preview": "# Side-effects\n\n*\"Side-effect Hooks\"* allow your app trigger various side-effects using browser's API.\n"
},
{
"path": "docs/State.md",
"chars": 88,
"preview": "# State\n\n*\"State Hooks\"* allow you to easily manage state of booleans, arrays, and maps."
},
{
"path": "docs/UI.md",
"chars": 87,
"preview": "# UI\n\n*\"UI Hooks\"* allow you to control and subscribe to state changes of UI elements.\n"
},
{
"path": "docs/Usage.md",
"chars": 1233,
"preview": "# Usage\n\nYou need to have React [`16.8.0`](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to"
},
{
"path": "docs/createBreakpoint.md",
"chars": 1013,
"preview": "# `createBreakpoint`\n\n## Usage\n\n### use default breakpoint\n\nlaptopL: 1440, laptop: 1024, tablet: 768\n\n```jsx\nimport Reac"
},
{
"path": "docs/createGlobalState.md",
"chars": 1206,
"preview": "# `useGlobalState`\n\nA React hook that creates a globally shared state.\n\n## Usage\n\n```tsx\nconst useGlobalValue = createGl"
},
{
"path": "docs/createMemo.md",
"chars": 607,
"preview": "# `createMemo`\n\nHook factory, receives a function to be memoized, returns a memoized React hook,\nwhich receives the same"
},
{
"path": "docs/createReducer.md",
"chars": 1810,
"preview": "# `createReducer`\n\nFactory for reducer hooks with custom middleware with an identical API as [React's `useReducer`](http"
},
{
"path": "docs/createReducerContext.md",
"chars": 2113,
"preview": "# `createReducerContext`\n\nFactory for react context hooks that will behave just like [React's `useReducer`](https://reac"
},
{
"path": "docs/createStateContext.md",
"chars": 1566,
"preview": "# `createStateContext`\n\nFactory for react context hooks that will behave just like [React's `useState`](https://reactjs."
},
{
"path": "docs/useAsync.md",
"chars": 606,
"preview": "# `useAsync`\n\nReact hook that resolves an `async` function or a function that returns\na promise;\n\n## Usage\n\n```jsx\nimpor"
},
{
"path": "docs/useAsyncFn.md",
"chars": 807,
"preview": "# `useAsyncFn`\n\nReact hook that returns state and a callback for an `async` function or a\nfunction that returns a promis"
},
{
"path": "docs/useAsyncRetry.md",
"chars": 719,
"preview": "# `useAsyncRetry`\n\nUses `useAsync` with an additional `retry` method to easily retry/refresh the async function;\n\n## Usa"
},
{
"path": "docs/useAudio.md",
"chars": 2245,
"preview": "# `useAudio`\n\nCreates `<audio>` element, tracks its state and exposes playback controls.\n\n\n## Usage\n\n```jsx\nimport {useA"
},
{
"path": "docs/useBattery.md",
"chars": 2119,
"preview": "# `useBattery`\n\nReact sensor hook that tracks battery status.\n\n>**Note:** current `BatteryManager` API state is obsolete"
},
{
"path": "docs/useBeforeUnload.md",
"chars": 1189,
"preview": "# `useBeforeUnload`\n\nReact side-effect hook that shows browser alert when user try to reload or close the page.\n\n\n## Usa"
},
{
"path": "docs/useClickAway.md",
"chars": 566,
"preview": "# `useClickAway`\n\nReact UI hook that triggers a callback when user\nclicks outside the target element.\n\n\n## Usage\n\n```jsx"
},
{
"path": "docs/useCookie.md",
"chars": 825,
"preview": "# `useCookie`\n\nReact hook that returns the current value of a `cookie`, a callback to update the `cookie`\nand a callback"
},
{
"path": "docs/useCopyToClipboard.md",
"chars": 1019,
"preview": "# `useCopyToClipboard`\n\nCopy text to a user's clipboard.\n\n## Usage\n\n```jsx\nconst Demo = () => {\n const [text, setText] "
},
{
"path": "docs/useCounter.md",
"chars": 1815,
"preview": "# `useCounter`\n\nReact state hook that tracks a numeric value.\n\n`useNumber` is an alias for `useCounter`.\n\n\n## Usage\n\n```"
},
{
"path": "docs/useCss.md",
"chars": 1026,
"preview": "# `useCss`\n\nReact UI hook that changes [CSS dynamically][gen-5]. Works like \"virtual CSS\" —\nit re-renders only CSS"
},
{
"path": "docs/useCustomCompareEffect.md",
"chars": 776,
"preview": "# `useCustomCompareEffect`\n\nA modified useEffect hook that accepts a comparator which is used for comparison on dependen"
},
{
"path": "docs/useDebounce.md",
"chars": 1711,
"preview": "# `useDebounce`\n\nReact hook that delays invoking a function until after wait milliseconds have elapsed since the last ti"
},
{
"path": "docs/useDeepCompareEffect.md",
"chars": 575,
"preview": "# `useDeepCompareEffect`\n\nA modified useEffect hook that is using deep comparison on its dependencies instead of referen"
},
{
"path": "docs/useDefault.md",
"chars": 535,
"preview": "# `useDefault`\n\nReact state hook that returns the default value when state is null or undefined.\n\n## Usage\n\n```jsx\nimpor"
},
{
"path": "docs/useDrop.md",
"chars": 869,
"preview": "# `useDrop` and `useDropArea`\n\nTriggers on file, link drop and copy-paste.\n\n`useDrop` tracks events for the whole page, "
},
{
"path": "docs/useEffectOnce.md",
"chars": 402,
"preview": "# `useEffectOnce`\n\nReact lifecycle hook that runs an effect only once.\n\n## Usage\n\n```jsx\nimport {useEffectOnce} from 're"
},
{
"path": "docs/useEnsuredForwardedRef.md",
"chars": 1784,
"preview": "# `useEnsuredForwardedRef`\n\nReact hook to use a ForwardedRef safely.\n\nIn some scenarios, you may need to use a _ref_ fro"
},
{
"path": "docs/useError.md",
"chars": 560,
"preview": "# `useError`\n\nReact side-effect hook that returns an error dispatcher.\n\n## Usage\n\n```jsx\nimport { useError } from 'react"
},
{
"path": "docs/useEvent.md",
"chars": 677,
"preview": "# `useEvent`\n\nReact sensor hook that subscribes a `handler` to events.\n\n\n## Usage\n\n```jsx\nimport {useEvent, useList} fro"
},
{
"path": "docs/useFavicon.md",
"chars": 248,
"preview": "# `useFavicon`\n\nReact side-effect hook sets the favicon of the page.\n\n\n## Usage\n\n```jsx\nimport {useFavicon} from 'react-"
},
{
"path": "docs/useFirstMountState.md",
"chars": 589,
"preview": "# `useFirstMountState`\n\nReturns `true` if component is just mounted (on first render) and `false` otherwise.\n\n## Usage\n\n"
},
{
"path": "docs/useFullscreen.md",
"chars": 694,
"preview": "# `useFullscreen`\n\nDisplay an element full-screen, optional fallback for fullscreen video on iOS.\n\n## Usage\n\n```jsx\nimpo"
},
{
"path": "docs/useGeolocation.md",
"chars": 442,
"preview": "# `useGeolocation`\n\nReact sensor hook that tracks user's geographic location. This hook accepts [position options](https"
},
{
"path": "docs/useGetSet.md",
"chars": 915,
"preview": "# `useGetSet`\n\nReact state hook that returns state getter function instead of\nraw state itself, this prevents subtle bug"
},
{
"path": "docs/useGetSetState.md",
"chars": 387,
"preview": "# `useGetSetState`\n\nA mix of `useGetSet` and `useGetSetState`.\n\n\n## Usage\n\n```jsx\nimport {useGetSetState} from 'react-us"
},
{
"path": "docs/useHarmonicIntervalFn.md",
"chars": 326,
"preview": "# `useHarmonicIntervalFn`\n\nSame as [`useInterval`](./useInterval.md) hook, but triggers all effects with the same delay\n"
},
{
"path": "docs/useHash.md",
"chars": 840,
"preview": "# `useHash`\n\nReact sensor hook that tracks browser's location hash.\n\n## Usage\n\n```jsx\nimport {useHash} from 'react-use';"
},
{
"path": "docs/useHover.md",
"chars": 878,
"preview": "# `useHover` and `useHoverDirty`\n\nReact UI sensor hooks that track if some element is being hovered\nby a mouse.\n\n- `useH"
},
{
"path": "docs/useIdle.md",
"chars": 531,
"preview": "# `useIdle`\n\nReact sensor hook that tracks if user on the page is idle.\n\n\n## Usage\n\n```jsx\nimport {useIdle} from 'react-"
},
{
"path": "docs/useIntersection.md",
"chars": 1004,
"preview": "# `useIntersection`\n\nReact sensor hook that tracks the changes in the intersection of a target element with an ancestor "
},
{
"path": "docs/useInterval.md",
"chars": 955,
"preview": "# `useInterval`\n\nA declarative interval hook based on [Dan Abramov's article on overreacted.io](https://overreacted.io/m"
},
{
"path": "docs/useIsomorphicLayoutEffect.md",
"chars": 542,
"preview": "# `useIsomorphicLayoutEffect`\n\n`useLayoutEffect` that does not show warning when server-side rendering, see [Alex Reardo"
},
{
"path": "docs/useKey.md",
"chars": 726,
"preview": "# `useKey`\n\nReact UI sensor hook that executes a `handler` when a keyboard key is used.\n\n## Usage\n\n```jsx\nimport {useKey"
},
{
"path": "docs/useKeyPress.md",
"chars": 707,
"preview": "# `useKeyPress`\n\nReact UI sensor hook that detects when the user is pressing a specific\nkey on their keyboard.\n\n\n## Usag"
},
{
"path": "docs/useKeyPressEvent.md",
"chars": 1082,
"preview": "# `useKeyPressEvent`\n\nThis hook fires `keydown` and `keyup` callbacks, similar to how [`useKey`](./useKey.md)\nhook does,"
},
{
"path": "docs/useKeyboardJs.md",
"chars": 955,
"preview": "# `useKeyboardJs`\n\nReact UI sensor hook that detects complex key combos like detecting when\nmultiple keys are held down "
},
{
"path": "docs/useLatest.md",
"chars": 981,
"preview": "# `useLatest`\n\nReact state hook that returns the latest state as described in the [React hooks FAQ](https://reactjs.org/"
},
{
"path": "docs/useLifecycles.md",
"chars": 379,
"preview": "# `useLifecycles`\n\nReact lifecycle hook that call `mount` and `unmount` callbacks, when\ncomponent is mounted and un-moun"
},
{
"path": "docs/useList.md",
"chars": 3386,
"preview": "# `useList`\n\nTracks an array and provides methods to modify it. \nTo cause component re-render you have to use these met"
},
{
"path": "docs/useLocalStorage.md",
"chars": 1127,
"preview": "# `useLocalStorage`\n\nReact side-effect hook that manages a single `localStorage` key.\n\n## Usage\n\n```jsx\nimport { useLoca"
},
{
"path": "docs/useLocation.md",
"chars": 368,
"preview": "# `useLocation`\n\nReact sensor hook that tracks brower's location.\n\nFor Internet Explorer you need to [install a polyfill"
},
{
"path": "docs/useLockBodyScroll.md",
"chars": 1138,
"preview": "# `useLockBodyScroll`\n\nReact side-effect hook that locks scrolling on the body element. Useful for modal and other overl"
},
{
"path": "docs/useLogger.md",
"chars": 467,
"preview": "# `useLogger`\n\nReact lifecycle hook that console logs parameters as component transitions through lifecycles.\n\n## Usage\n"
},
{
"path": "docs/useLongPress.md",
"chars": 1067,
"preview": "# `useLongPress`\n\nReact sensor hook that fires a callback after long pressing.\n\n## Usage\n\n```jsx\nimport { useLongPress }"
},
{
"path": "docs/useMap.md",
"chars": 699,
"preview": "# `useMap`\n\nReact state hook that tracks a value of an object.\n\n## Usage\n\n```jsx\nimport {useMap} from 'react-use';\n\ncons"
},
{
"path": "docs/useMeasure.md",
"chars": 1164,
"preview": "# `useMeasure`\n\nReact sensor hook that tracks dimensions of an HTML element using the [Resize Observer API](https://deve"
},
{
"path": "docs/useMedia.md",
"chars": 861,
"preview": "# `useMedia`\n\nReact sensor hook that tracks state of a CSS media query.\n\n## Usage\n\n```jsx\nimport {useMedia} from 'react-"
},
{
"path": "docs/useMediaDevices.md",
"chars": 282,
"preview": "# `useMediaDevices`\n\nReact sensor hook that tracks connected hardware devices.\n\n\n## Usage\n\n```jsx\nimport {useMediaDevice"
},
{
"path": "docs/useMediatedState.md",
"chars": 1052,
"preview": "# `useMediatedState`\n\nA lot like the standard `useState`, but with mediation process.\n\n## Usage\n```ts\nimport * as React "
},
{
"path": "docs/useMethods.md",
"chars": 965,
"preview": "# `useMethods`\n\nReact hook that simplifies the `useReducer` implementation.\n\n## Usage\n\n```jsx\nimport { useMethods } from"
},
{
"path": "docs/useMotion.md",
"chars": 285,
"preview": "# `useMotion`\n\nReact sensor hook that uses device's acceleration sensor to track its motions.\n\n\n## Usage\n\n```jsx\nimport "
},
{
"path": "docs/useMount.md",
"chars": 341,
"preview": "# `useMount`\n\nReact lifecycle hook that calls a function after the component is mounted. Use `useLifecycles` if you need"
},
{
"path": "docs/useMountedState.md",
"chars": 674,
"preview": "# `useMountedState`\n\n> **NOTE!:** despite having `State` in its name **_this hook does not cause component re-render_**."
},
{
"path": "docs/useMouse.md",
"chars": 925,
"preview": "# `useMouse` and `useMouseHovered`\n\nReact sensor hooks that re-render on mouse position changes. `useMouse` simply track"
},
{
"path": "docs/useMouseWheel.md",
"chars": 278,
"preview": "# `useMouseWheel` \nReact Hook to get deltaY of mouse scrolled in window. \n\n## Usage\n\n```jsx\nimport { useMouseWheel } fro"
},
{
"path": "docs/useMultiStateValidator.md",
"chars": 2414,
"preview": "# `useMultiStateValidator`\n\nEach time any of given states changes - validator function is invoked. \n\n## Usage\n```ts \nim"
},
{
"path": "docs/useNetworkState.md",
"chars": 2106,
"preview": "# `useNetworkState`\n\nTracks the state of browser's network connection.\n\nAs of the standard it is not guaranteed that bro"
},
{
"path": "docs/useObservable.md",
"chars": 372,
"preview": "# `useObservable`\n\nReact state hook that tracks the latest value of an `Observable`.\n\n\n## Usage\n\n```jsx\nimport {useObser"
},
{
"path": "docs/useOrientation.md",
"chars": 381,
"preview": "# `useOrientation`\n\nReact sensor hook that tracks screen orientation of user's device.\n\nReturns state in the following s"
},
{
"path": "docs/usePageLeave.md",
"chars": 240,
"preview": "# `usePageLeave`\n\nReact sensor hook that fires a callback when mouse leaves the page.\n\n## Usage\n\n```jsx\nimport {usePageL"
},
{
"path": "docs/usePermission.md",
"chars": 306,
"preview": "# `usePermission`\n\nReact side-effect hook to query permission status of browser APIs.\n\n## Usage\n\n```jsx\nimport {usePermi"
},
{
"path": "docs/usePinchZoom.md",
"chars": 836,
"preview": "# `usePinchZoom`\n\nReact sensor hook that tracks the changes in pointer touch events and detects value of pinch differenc"
},
{
"path": "docs/usePrevious.md",
"chars": 652,
"preview": "# `usePrevious`\n\nReact state hook that returns the previous state as described in the [React hooks FAQ](https://reactjs."
},
{
"path": "docs/usePreviousDistinct.md",
"chars": 1406,
"preview": "# `usePreviousDistinct`\n\nJust like `usePrevious` but it will only update once the value actually changes. This is import"
},
{
"path": "docs/usePromise.md",
"chars": 534,
"preview": "# `usePromise`\n\nReact Lifecycle hook that returns a helper function for wrapping promises.\nPromises wrapped with this fu"
},
{
"path": "docs/useQueue.md",
"chars": 476,
"preview": "# `useQueue`\n\nReact state hook implements simple FIFO queue.\n\n\n## Usage\n\n```jsx\nimport { useQueue } from 'react-use';\n\nc"
},
{
"path": "docs/useRaf.md",
"chars": 587,
"preview": "# `useRaf`\n\nReact animation hook that forces component to re-render on each `requestAnimationFrame`,\nreturns percentage "
},
{
"path": "docs/useRafLoop.md",
"chars": 1605,
"preview": "# `useRafLoop`\n\nThis hook call given function within the RAF loop without re-rendering parent component.\nLoop stops auto"
},
{
"path": "docs/useRafState.md",
"chars": 697,
"preview": "# `useRafState`\n\nReact state hook that only updates state in the callback of [`requestAnimationFrame`](https://developer"
},
{
"path": "docs/useRendersCount.md",
"chars": 522,
"preview": "# `useRendersCount`\n\nTracks component's renders count including the first render.\n\n## Usage\n\n```typescript jsx\nimport * "
},
{
"path": "docs/useScratch.md",
"chars": 1377,
"preview": "# `useScratch`\n\nReact sensor hook that tracks state of mouse \"scrubs\" (or \"scratches\").\n\n## Usage\n\n```jsx\nimport useScra"
},
{
"path": "docs/useScroll.md",
"chars": 430,
"preview": "# `useScroll`\n\nReact sensor hook that re-renders when the scroll position in a DOM element changes.\n\n## Usage\n\n```jsx\nim"
},
{
"path": "docs/useScrollbarWidth.md",
"chars": 637,
"preview": "# `useScrollbarWidth`\n\nHook that will return current browser's scrollbar width. \nIn case hook been called before DOM re"
},
{
"path": "docs/useScrolling.md",
"chars": 453,
"preview": "# `useScrolling`\n\nReact sensor hook that keeps track of whether the user is scrolling or not.\n\n## Usage\n\n```jsx\nimport {"
},
{
"path": "docs/useSearchParam.md",
"chars": 1025,
"preview": "# `useSearchParam`\n\nReact sensor hook that tracks browser's location search param.\n\n## Usage\n\n```jsx\nimport {useSearchPa"
},
{
"path": "docs/useSessionStorage.md",
"chars": 799,
"preview": "# `useSessionStorage`\n\nReact side-effect hook that manages a single `sessionStorage` key.\n\n\n## Usage\n\n```jsx\nimport {use"
},
{
"path": "docs/useSet.md",
"chars": 968,
"preview": "# `useSet`\n\nReact state hook that tracks a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa"
},
{
"path": "docs/useSetState.md",
"chars": 891,
"preview": "# `useSetState`\n\nReact state hook that creates `setState` method which works similar to how\n`this.setState` works in cla"
},
{
"path": "docs/useShallowCompareEffect.md",
"chars": 601,
"preview": "# `useShallowCompareEffect`\n\nA modified useEffect hook that is using shallow comparison on each of its dependencies inst"
},
{
"path": "docs/useSize.md",
"chars": 649,
"preview": "# `useSize`\n\nReact sensor hook that tracks size of an HTML element.\n\n## Usage\n\n```jsx\nimport {useSize} from 'react-use';"
},
{
"path": "docs/useSlider.md",
"chars": 596,
"preview": "# `useSlider`\n\nReact UI hook that provides slide behavior over any HTML element. Supports both mouse and touch events.\n\n"
},
{
"path": "docs/useSpeech.md",
"chars": 390,
"preview": "# `useSpeech`\n\nReact UI hook that synthesizes human voice that speaks a given string.\n\n\n## Usage\n\n```jsx\nimport {useSpee"
},
{
"path": "docs/useSpring.md",
"chars": 850,
"preview": "# `useSpring`\n\nReact animation hook that updates a single numeric value over time according\nto spring dynamics.\n\n## Usag"
},
{
"path": "docs/useStartTyping.md",
"chars": 296,
"preview": "# `useStartTyping`\n\nReact sensor hook that fires a callback when user starts typing. Can be used\nto focus default input "
},
{
"path": "docs/useStateList.md",
"chars": 2503,
"preview": "# `useStateList`\n\nProvides handles for circular iteration over states list. \nSupports forward and backward iterations a"
},
{
"path": "docs/useStateValidator.md",
"chars": 1596,
"preview": "# `useStateValidator`\n\nEach time given state changes - validator function is invoked.\n\n## Usage\n```ts \nimport * as React"
},
{
"path": "docs/useStateWithHistory.md",
"chars": 1863,
"preview": "# `useStateHistory`\n\nStores defined amount of previous state values and provides handles to travel through them.\n\n## Usa"
},
{
"path": "docs/useThrottle.md",
"chars": 535,
"preview": "# `useThrottle` and `useThrottleFn`\n\nReact hooks that throttle.\n\n## Usage\n\n```jsx\nimport React, { useState } from 'react"
},
{
"path": "docs/useThrottleFn.md",
"chars": 1235,
"preview": "# `useThrottleFn`\n\nReact hook that invokes a function and then delays subsequent function calls until after wait millise"
},
{
"path": "docs/useTimeout.md",
"chars": 1139,
"preview": "# `useTimeout`\n\nRe-renders the component after a specified number of milliseconds. \nProvides handles to cancel and/or r"
},
{
"path": "docs/useTimeoutFn.md",
"chars": 1869,
"preview": "# `useTimeoutFn`\n\nCalls given function after specified amount of milliseconds.\n\nSeveral thing about it's work:\n- does no"
},
{
"path": "docs/useTitle.md",
"chars": 194,
"preview": "# `useTitle`\n\nReact side-effect hook that sets title of the page.\n\n\n## Usage\n\n```jsx\nimport {useTitle} from 'react-use';"
},
{
"path": "docs/useToggle.md",
"chars": 473,
"preview": "# `useToggle`\n\nReact state hook that tracks value of a boolean.\n\n`useBoolean` is an alias for `useToggle`.\n\n## Usage\n\n``"
},
{
"path": "docs/useTween.md",
"chars": 732,
"preview": "# `useTween`\n\nReact animation hook that tweens a number between 0 and 1.\n\n\n## Usage\n\n```jsx\nimport {useTween} from 'reac"
},
{
"path": "docs/useUnmount.md",
"chars": 364,
"preview": "# `useUnmount`\n\nReact lifecycle hook that calls a function when the component will unmount. Use `useLifecycles` if you n"
},
{
"path": "docs/useUnmountPromise.md",
"chars": 617,
"preview": "# `useUnmountPromise`\n\nA life-cycle hook that provides a higher order promise that does not resolve if component un-moun"
},
{
"path": "docs/useUpdate.md",
"chars": 335,
"preview": "# `useUpdate`\n\nReact utility hook that returns a function that forces component\nto re-render when called.\n\n\n## Usage\n\n``"
},
{
"path": "docs/useUpdateEffect.md",
"chars": 753,
"preview": "# `useUpdateEffect`\n\nReact effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the s"
},
{
"path": "docs/useUpsert.md",
"chars": 1029,
"preview": "# `useUpsert`\n\n> DEPRECATED! \n> Use `useList` hook's upsert action instead\n\nSuperset of [`useList`](./useList.md). Prov"
},
{
"path": "docs/useVibrate.md",
"chars": 650,
"preview": "# `useVibrate`\n\nReact UI hook to provide physical feedback with device vibration hardware using the [Vibration API](http"
},
{
"path": "docs/useVideo.md",
"chars": 2096,
"preview": "# `useVideo`\n\nCreates `<video>` element, tracks its state and exposes playback controls.\n\n\n## Usage\n\n```jsx\nimport {useV"
},
{
"path": "docs/useWindowScroll.md",
"chars": 285,
"preview": "# `useWindowScroll`\n\nReact sensor hook that re-renders on window scroll.\n\n## Usage\n\n```jsx\nimport {useWindowScroll} from"
},
{
"path": "docs/useWindowSize.md",
"chars": 658,
"preview": "# `useWindowSize`\n\nReact sensor hook that tracks dimensions of the browser window.\n\n\n## Usage\n\n```jsx\nimport {useWindowS"
},
{
"path": "jest.config.base.ts",
"chars": 302,
"preview": "import type { Config } from '@jest/types';\n\nexport const baseJestConfig: Config.InitialOptions = {\n 'preset': 'ts-jest'"
},
{
"path": "jest.config.node.ts",
"chars": 227,
"preview": "import type { Config } from '@jest/types';\nimport { baseJestConfig } from './jest.config.base';\n\nconst config: Config.In"
},
{
"path": "jest.config.ts",
"chars": 228,
"preview": "import type { Config } from '@jest/types';\nimport { baseJestConfig } from './jest.config.base';\n\nconst config: Config.In"
},
{
"path": "package.json",
"chars": 4754,
"preview": "{\n \"name\": \"react-use\",\n \"version\": \"17.6.0\",\n \"description\": \"Collection of React Hooks\",\n \"main\": \"lib/index.js\",\n"
},
{
"path": "renovate.json",
"chars": 228,
"preview": "{\n \"extends\": [\n \"config:base\"\n ],\n \"automerge\": true,\n \"pinVersions\": false,\n \"ignoreUnstable\": true,\n \"major\""
},
{
"path": "src/component/UseKey.tsx",
"chars": 230,
"preview": "import useKey from '../useKey';\nimport createRenderProp from '../factory/createRenderProp';\n\nconst UseKey = createRender"
},
{
"path": "src/factory/createBreakpoint.ts",
"chars": 975,
"preview": "import { useEffect, useMemo, useState } from 'react';\nimport { isBrowser, off, on } from '../misc/util';\n\nconst createBr"
},
{
"path": "src/factory/createGlobalState.ts",
"chars": 1396,
"preview": "import { useState } from 'react';\nimport { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/h"
},
{
"path": "src/factory/createHTMLMediaHook.ts",
"chars": 6797,
"preview": "import * as React from 'react';\nimport { useEffect, useRef } from 'react';\nimport useSetState from '../useSetState';\nimp"
},
{
"path": "src/factory/createMemo.ts",
"chars": 210,
"preview": "import { useMemo } from 'react';\n\nconst createMemo =\n <T extends (...args: any) => any>(fn: T) =>\n (...args: Parameter"
},
{
"path": "src/factory/createReducer.ts",
"chars": 1890,
"preview": "import { MutableRefObject, useCallback, useRef, useState } from 'react';\nimport useUpdateEffect from '../useUpdateEffect"
},
{
"path": "src/factory/createReducerContext.ts",
"chars": 1104,
"preview": "import { createContext, createElement, useContext, useReducer } from 'react';\n\nconst createReducerContext = <R extends R"
},
{
"path": "src/factory/createRenderProp.ts",
"chars": 336,
"preview": "const defaultMapPropsToArgs = (props) => [props];\n\nexport default function createRenderProp(hook, mapPropsToArgs = defau"
},
{
"path": "src/factory/createRouter.ts",
"chars": 825,
"preview": "import React from 'react';\n\nexport interface RouterProviderProps {\n route: string;\n fullRoute?: string;\n parent?: any"
},
{
"path": "src/factory/createStateContext.ts",
"chars": 936,
"preview": "import { createContext, createElement, useContext, useState } from 'react';\n\nconst createStateContext = <T>(defaultIniti"
},
{
"path": "src/index.ts",
"chars": 6789,
"preview": "export { default as createMemo } from './factory/createMemo';\nexport { default as createReducerContext } from './factory"
},
{
"path": "src/misc/hookState.ts",
"chars": 926,
"preview": "export type IHookStateInitialSetter<S> = () => S;\nexport type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;\n"
},
{
"path": "src/misc/isDeepEqual.ts",
"chars": 88,
"preview": "import isDeepEqualReact from 'fast-deep-equal/react';\n\nexport default isDeepEqualReact;\n"
},
{
"path": "src/misc/parseTimeRanges.ts",
"chars": 256,
"preview": "export default function parseTimeRanges(ranges) {\n const result: { start: number; end: number }[] = [];\n\n for (let i ="
},
{
"path": "src/misc/types.ts",
"chars": 164,
"preview": "export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;\n\nexport type FunctionReturning"
},
{
"path": "src/misc/util.ts",
"chars": 788,
"preview": "export const noop = () => {};\n\nexport function on<T extends Window | Document | HTMLElement | EventTarget>(\n obj: T | n"
},
{
"path": "src/useAsync.ts",
"chars": 468,
"preview": "import { DependencyList, useEffect } from 'react';\nimport useAsyncFn from './useAsyncFn';\nimport { FunctionReturningProm"
},
{
"path": "src/useAsyncFn.ts",
"chars": 1771,
"preview": "import { DependencyList, useCallback, useRef, useState } from 'react';\nimport useMountedState from './useMountedState';\n"
},
{
"path": "src/useAsyncRetry.ts",
"chars": 841,
"preview": "import { DependencyList, useCallback, useState } from 'react';\nimport useAsync, { AsyncState } from './useAsync';\n\nexpor"
},
{
"path": "src/useAudio.ts",
"chars": 156,
"preview": "import createHTMLMediaHook from './factory/createHTMLMediaHook';\n\nconst useAudio = createHTMLMediaHook<HTMLAudioElement>"
},
{
"path": "src/useBattery.ts",
"chars": 2520,
"preview": "import { useEffect, useState } from 'react';\nimport { isNavigator, off, on } from './misc/util';\nimport isDeepEqual from"
},
{
"path": "src/useBeforeUnload.ts",
"chars": 752,
"preview": "import { useCallback, useEffect } from 'react';\nimport { off, on } from './misc/util';\n\nconst useBeforeUnload = (enabled"
},
{
"path": "src/useBoolean.ts",
"chars": 66,
"preview": "import useBoolean from './useToggle';\n\nexport default useBoolean;\n"
},
{
"path": "src/useClickAway.ts",
"chars": 858,
"preview": "import { RefObject, useEffect, useRef } from 'react';\nimport { off, on } from './misc/util';\n\nconst defaultEvents = ['mo"
},
{
"path": "src/useCookie.ts",
"chars": 713,
"preview": "import { useCallback, useState } from 'react';\nimport Cookies from 'js-cookie';\n\nconst useCookie = (\n cookieName: strin"
},
{
"path": "src/useCopyToClipboard.ts",
"chars": 1947,
"preview": "import writeText from 'copy-to-clipboard';\nimport { useCallback } from 'react';\nimport useMountedState from './useMounte"
},
{
"path": "src/useCounter.ts",
"chars": 2867,
"preview": "import { useMemo } from 'react';\nimport useGetSet from './useGetSet';\nimport { IHookStateInitAction, IHookStateSetAction"
},
{
"path": "src/useCss.ts",
"chars": 910,
"preview": "import { create, NanoRenderer } from 'nano-css';\nimport { addon as addonCSSOM, CSSOMAddon } from 'nano-css/addon/cssom';"
},
{
"path": "src/useCustomCompareEffect.ts",
"chars": 1218,
"preview": "import { DependencyList, EffectCallback, useEffect, useRef } from 'react';\n\nconst isPrimitive = (val: any) => val !== Ob"
},
{
"path": "src/useDebounce.ts",
"chars": 401,
"preview": "import { DependencyList, useEffect } from 'react';\nimport useTimeoutFn from './useTimeoutFn';\n\nexport type UseDebounceRe"
},
{
"path": "src/useDeepCompareEffect.ts",
"chars": 840,
"preview": "import { DependencyList, EffectCallback } from 'react';\nimport useCustomCompareEffect from './useCustomCompareEffect';\ni"
},
{
"path": "src/useDefault.ts",
"chars": 401,
"preview": "import { useState } from 'react';\n\nconst useDefault = <TStateType>(\n defaultValue: TStateType,\n initialValue: TStateTy"
},
{
"path": "src/useDrop.ts",
"chars": 2558,
"preview": "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { noop, off, on } from './misc/util';\n\nexport "
},
{
"path": "src/useDropArea.ts",
"chars": 2206,
"preview": "import { useMemo, useState } from 'react';\nimport useMountedState from './useMountedState';\nimport { noop } from './misc"
},
{
"path": "src/useEffectOnce.ts",
"chars": 163,
"preview": "import { EffectCallback, useEffect } from 'react';\n\nconst useEffectOnce = (effect: EffectCallback) => {\n useEffect(effe"
},
{
"path": "src/useEnsuredForwardedRef.ts",
"chars": 876,
"preview": "import {\n forwardRef,\n ForwardRefExoticComponent,\n MutableRefObject,\n PropsWithChildren,\n PropsWithoutRef,\n RefAtt"
},
{
"path": "src/useError.ts",
"chars": 382,
"preview": "import { useCallback, useEffect, useState } from 'react';\n\nconst useError = (): ((err: Error) => void) => {\n const [err"
},
{
"path": "src/useEvent.ts",
"chars": 1768,
"preview": "import { useEffect } from 'react';\nimport { isBrowser, off, on } from './misc/util';\n\nexport interface ListenerType1 {\n "
},
{
"path": "src/useFavicon.ts",
"chars": 409,
"preview": "import { useEffect } from 'react';\n\nconst useFavicon = (href: string) => {\n useEffect(() => {\n const link: HTMLLinkE"
},
{
"path": "src/useFirstMountState.ts",
"chars": 219,
"preview": "import { useRef } from 'react';\n\nexport function useFirstMountState(): boolean {\n const isFirst = useRef(true);\n\n if ("
},
{
"path": "src/useFullscreen.ts",
"chars": 2216,
"preview": "import { RefObject, useState } from 'react';\nimport screenfull from 'screenfull';\nimport useIsomorphicLayoutEffect from "
},
{
"path": "src/useGeolocation.ts",
"chars": 2149,
"preview": "import { useEffect, useState } from 'react';\n\n/**\n * @desc Made compatible with {GeolocationPositionError} and {Position"
},
{
"path": "src/useGetSet.ts",
"chars": 632,
"preview": "import { Dispatch, useMemo, useRef } from 'react';\nimport useUpdate from './useUpdate';\nimport { IHookStateInitAction, I"
},
{
"path": "src/useGetSetState.ts",
"chars": 908,
"preview": "import { useCallback, useRef } from 'react';\nimport useUpdate from './useUpdate';\n\nconst useGetSetState = <T extends obj"
},
{
"path": "src/useHarmonicIntervalFn.ts",
"chars": 584,
"preview": "import { useEffect, useRef } from 'react';\nimport { clearHarmonicInterval, setHarmonicInterval } from 'set-harmonic-inte"
},
{
"path": "src/useHash.ts",
"chars": 734,
"preview": "import { useCallback, useState } from 'react';\nimport useLifecycles from './useLifecycles';\nimport { off, on } from './m"
},
{
"path": "src/useHover.ts",
"chars": 896,
"preview": "import * as React from 'react';\nimport { noop } from './misc/util';\n\nconst { useState } = React;\n\nexport type Element = "
},
{
"path": "src/useHoverDirty.ts",
"chars": 1047,
"preview": "import { RefObject, useEffect, useState } from 'react';\nimport { off, on } from './misc/util';\n\n// kudos: https://usehoo"
},
{
"path": "src/useIdle.ts",
"chars": 1416,
"preview": "import { useEffect, useState } from 'react';\nimport { throttle } from 'throttle-debounce';\nimport { off, on } from './mi"
},
{
"path": "src/useIntersection.ts",
"chars": 913,
"preview": "import { RefObject, useEffect, useState } from 'react';\n\nconst useIntersection = (\n ref: RefObject<HTMLElement>,\n opti"
},
{
"path": "src/useInterval.ts",
"chars": 476,
"preview": "import { useEffect, useRef } from 'react';\n\nconst useInterval = (callback: Function, delay?: number | null) => {\n const"
},
{
"path": "src/useIsomorphicLayoutEffect.ts",
"chars": 212,
"preview": "import { useEffect, useLayoutEffect } from 'react';\nimport { isBrowser } from './misc/util';\n\nconst useIsomorphicLayoutE"
},
{
"path": "src/useKey.ts",
"chars": 1339,
"preview": "import { DependencyList, useMemo } from 'react';\nimport useEvent, { UseEventOptions, UseEventTarget } from './useEvent';"
},
{
"path": "src/useKeyPress.ts",
"chars": 423,
"preview": "import { useState } from 'react';\nimport useKey, { KeyFilter } from './useKey';\n\nconst useKeyPress = (keyFilter: KeyFilt"
},
{
"path": "src/useKeyPressEvent.ts",
"chars": 560,
"preview": "import { Handler, KeyFilter } from './useKey';\nimport useKeyPressDefault from './useKeyPress';\nimport useUpdateEffect fr"
},
{
"path": "src/useKeyboardJs.ts",
"chars": 745,
"preview": "import { useEffect, useState } from 'react';\nimport useMount from './useMount';\n\nconst useKeyboardJs = (combination: str"
},
{
"path": "src/useLatest.ts",
"chars": 191,
"preview": "import { useRef } from 'react';\n\nconst useLatest = <T>(value: T): { readonly current: T } => {\n const ref = useRef(valu"
},
{
"path": "src/useLifecycles.ts",
"chars": 257,
"preview": "import { useEffect } from 'react';\n\nconst useLifecycles = (mount, unmount?) => {\n useEffect(() => {\n if (mount) {\n "
}
]
// ... and 265 more files (download for full content)
About this extraction
This page contains the full source code of the streamich/react-use GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 465 files (677.6 KB), approximately 201.2k tokens, and a symbol index with 223 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.