👍


react-use

<sup>Collection of essential React Hooks.
Port of libreact.


Translations: 🇨🇳 汉语</sup>

npm i react-use

- Sensors
- useBattery — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww)
- useGeolocation — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)
- useHover and useHoverDirty — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
- useHash — tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)
- useIdle — tracks whether user is being inactive.
- useIntersection — tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)
- useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
- useLocation and useSearchParam — tracks page navigation bar location state.
- useLongPress — tracks long press gesture of some element.
- useMedia — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
- useMediaDevices — tracks state of connected hardware devices.
- useMotion — tracks state of device's motion sensor.
- useMouse and useMouseHovered — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
- useMouseWheel — tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)
- useNetworkState — tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)
- useOrientation — tracks state of device's screen orientation.
- usePageLeave — triggers when mouse leaves page boundaries.
- useScratch — tracks mouse click-and-scrub state.
- useScroll — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
- useScrolling — tracks whether HTML element is scrolling.
- useStartTyping — detects when user starts typing.
- useWindowScroll — tracks Window scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
- useWindowSize — tracks Window dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
- useMeasure and useSize — tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
- createBreakpoint — tracks innerWidth
- useScrollbarWidth — detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)
- usePinchZoom — tracks pointer events to detect pinch zoom in and out status. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)




- UI
- useAudio — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
- useClickAway — triggers callback when user clicks outside target area.
- useCss — dynamically adjusts CSS.
- useDrop and useDropArea — tracks file, link and copy-paste drops.
- useFullscreen — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)
- useSlider — provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)
- useSpeech — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
- useVibrate — provide physical feedback using the Vibration API. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo)
- useVideo — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)




- Animations
- useRaf — re-renders component on each requestAnimationFrame.
- useInterval and useHarmonicIntervalFn — re-renders component on a set interval using setInterval.
- useSpring — interpolates number over time according to spring dynamics.
- useTimeout — re-renders component after a timeout.
- useTimeoutFn — calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)
- useTween — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)
- useUpdate — returns a callback, which re-renders component when called.




- Side-effects
- useAsync, useAsyncFn, and useAsyncRetry — resolves an async function.
- useBeforeUnload — shows browser alert when user try to reload or close the page.
- useCookie — provides way to read, update and delete a cookie. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo)
- useCopyToClipboard — copies text to clipboard.
- useDebounce — debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)
- useError — error dispatcher. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo)
- useFavicon — sets favicon of the page.
- useLocalStorage — manages a value in localStorage.
- useLockBodyScroll — lock scrolling of the body element.
- useRafLoop — calls given function inside the RAF loop.
- useSessionStorage — manages a value in sessionStorage.
- useThrottle and useThrottleFn — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo)
- useTitle — sets title of the page.
- usePermission — query permission status for browser APIs.




- Lifecycles
- useEffectOnce — a modified useEffect hook that only runs once.
- useEvent — subscribe to events.
- useLifecycles — calls mount and unmount callbacks.
- useMountedState and useUnmountPromise — track if component is mounted.
- usePromise — resolves promise only while component is mounted.
- useLogger — logs in console as component goes through life-cycles.
- useMount — calls mount callbacks.
- useUnmount — calls unmount callbacks.
- useUpdateEffect — run an effect only on updates.
- useIsomorphicLayoutEffect — useLayoutEffect that that works on server.
- useDeepCompareEffect, useShallowCompareEffect, and useCustomCompareEffect




- State
- createMemo — factory of memoized hooks.
- createReducer — factory of reducer hooks with custom middleware.
- createReducerContext and createStateContext — factory of hooks for a sharing state between components.
- useDefault — returns the default value when state is null or undefined.
- useGetSet — returns state getter get() instead of raw state.
- useGetSetState — as if useGetSet and useSetState had a baby.
- useLatest — returns the latest state or props
- usePrevious — returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)
- usePreviousDistinct — like usePrevious but with a predicate to determine if previous should update.
- useObservable — tracks latest value of an Observable.
- useRafState — creates setState method which only updates after requestAnimationFrame. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo)
- useSetState — creates setState method which works like this.setState. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
- useStateList — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)
- useToggle and useBoolean — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)
- useCounter and useNumber — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)
- useList ~and useUpsert~ — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)
- useMap — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)
- useSet — tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)
- useQueue — implements simple queue.
- useStateValidator — tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo)
- useStateWithHistory — 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 — alike the useStateValidator, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo)
- useMediatedState — like the regular useState but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)
- useFirstMountState — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)
- useRendersCount — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)
- createGlobalState — cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)
- useMethods — neat alternative to useReducer. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)




- [Miscellaneous]()
- useEnsuredForwardedRef and ensuredForwardRef — use a React.forwardedRef safely. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)

Usage — how to import.


Unlicense — public domain.


Support — add yourself to backer list below.

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