👍 react-use

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



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



Translations: <a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a>

npm i react-use

• Sensors
• useBattery — tracks device battery state. ![][img-demo]
• useGeolocation — tracks geo location state of user's device. ![][img-demo]
• useHover and useHoverDirty — tracks mouse hover state of some element. ![][img-demo]
• useHash — tracks location hash value. ![][img-demo]
• useIdle — tracks whether user is being inactive.
• useIntersection — tracks an HTML element's intersection. ![][img-demo]
• useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. ![][img-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]
• 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]
• useMouseWheel — tracks deltaY of scrolled mouse wheel. ![][img-demo]
• useNetworkState — tracks the state of browser's network connection. ![][img-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]
• useScrolling — tracks whether HTML element is scrolling.
• useStartTyping — detects when user starts typing.
• useWindowScroll — tracks Window scroll position. ![][img-demo]
• useWindowSize — tracks Window dimensions. ![][img-demo]
• useMeasure and useSize — tracks an HTML element's dimensions. ![][img-demo]
• createBreakpoint — tracks innerWidth
• useScrollbarWidth — detects browser's native scrollbars width. ![][img-demo]

• usePinchZoom — tracks pointer events to detect pinch zoom in and out status. ![][img-demo]

• UI

• useAudio — plays audio and exposes its controls. ![][img-demo]
• 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]
• useSlider — provides slide behavior over any HTML element. ![][img-demo]
• useSpeech — synthesizes speech from a text string. ![][img-demo]
• useVibrate — provide physical feedback using the Vibration API. ![][img-demo]

• useVideo — plays video, tracks its state, and exposes playback controls. ![][img-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]
• useTween — re-renders component, while tweening a number from 0 to 1. ![][img-demo]

• 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]
• useCopyToClipboard — copies text to clipboard.
• useDebounce — debounces a function. ![][img-demo]
• useError — error dispatcher. ![][img-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]
• 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]
• 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]
• useSetState — creates setState method which works like this.setState. ![][img-demo]
• useStateList — circularly iterates over an array. ![][img-demo]
• useToggle and useBoolean — tracks state of a boolean. ![][img-demo]
• useCounter and useNumber — tracks state of a number. ![][img-demo]
• useList ~and useUpsert~ — tracks state of an array. ![][img-demo]
• useMap — tracks state of an object. ![][img-demo]
• useSet — tracks state of a Set. ![][img-demo]
• useQueue — implements simple queue.
• useStateValidator — tracks state of an object. ![][img-demo]
• useStateWithHistory — stores previous state values and provides handles to travel through them. ![][img-demo]
• useMultiStateValidator — alike