Reactuse

<div align="center"> <h1> <br/> <br/> 👍 <br /> react-use <br /> <br /> <br /> <br /> </h1> ^{<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>} <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
  • 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] <br/> <br/>
• 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] <br/> <br/>
• 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. <br/> <br/>
• 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. <br/> <br/>
• Lifecycles
  • useEffectOnce — a modified useEffect hook that only runs once.
  • useEvent — subscribe to events.
  • useLifecycles — calls mount and unmount callbacks.
  • [useMountedState](./