👍
react-use





npm package CircleCI master npm downloads demos
Collection of essential React Hooks. Port of libreact.
Translations: 🇨🇳 汉语




npm i react-use





- [**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) - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive. - [`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) — tracks page navigation bar location state. - [`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) - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection. - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation. - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries. - [`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. - [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. - [`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)

- [**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) - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m) - [`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) - [`useWait`](./docs/useWait.md) — complex waiting management for UIs.

- [**Animations**](./docs/Animations.md) - [`useRaf`](./docs/useRaf.md) — re-renders component on each `requestAnimationFrame`. - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout. - [`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.

- [**Side-effects**](./docs/Side-effects.md) - [`useAsync`](./docs/useAsync.md) — resolves an `async` function. - [`useAsyncFn`](./docs/useAsyncFn.md) — state management for an async function - [`useAsyncRetry`](./docs/useAsyncRetry.md) — `useAsync` with `retry()` method. - [`useBeforeUnload`](./docs/useBeforeUnload.md) — shows browser alert when user try to reload or close the page. - [`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) - [`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. - [`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.

- [**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. - [`useRefMounted`](./docs/useRefMounted.md) — tracks 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. - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md) — run an `effect` depending on deep comparison of its dependencies

- [**State**](./docs/State.md) - [`createMemo`](./docs/createMemo.md) — factory of memoized hooks. - [`createReducer`](./docs/createReducer.md) — factory of reducer hooks with custom middleware. - [`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. - [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props. - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. - [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. - [`useList`](./docs/useList.md) — tracks state of an array. - [`useMap`](./docs/useMap.md) — tracks state of an object.






Usage — how to import.
Unlicense — public domain.






[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg