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)

  - [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)

- [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. [![][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)

- [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.

- [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.

- [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)

- [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)

- [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)

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