👍
react-use

^{Collection of essential React Hooks. Port of libreact.
Translations: 🇨🇳 汉语}

npm i react-use

• Sensors
  • useBattery — tracks device battery state.
  • useGeolocation — tracks geo location state of user's device.
  • useHover and useHoverDirty — tracks mouse hover state of some element.
  • useIdle — tracks whether user is being inactive.
  • useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys.
  • useLocation — tracks page navigation bar location state.
  • useMedia — tracks state of a CSS media query.
  • useMediaDevices — tracks state of connected hardware devices.
  • useMotion — tracks state of device's motion sensor.
  • useMouse and useMouseHovered — tracks state of mouse position.
  • useNetwork — tracks state of user's internet connection.
  • useOrientation — tracks state of device's screen orientation.
  • usePageLeave — triggers when mouse leaves page boundaries.
  • useScroll — tracks an HTML element's scroll position.
  • useSize — tracks an HTML element's dimensions.
  • useStartTyping — detects when user starts typing.
  • useWindowScroll — tracks Window scroll position.
  • useWindowSize — tracks Window dimensions.
    
    
• UI
  • useAudio — plays audio and exposes its controls.
  • 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.
  • useSpeech — synthesizes speech from a text string.
  • useVideo — plays video, tracks its state, and exposes playback controls.
  • useWait — complex waiting management for UIs.
    
    
• Animations
  • useRaf — re-renders component on each requestAnimationFrame.
  • useSpring — interpolates number over time according to spring dynamics.
  • useTimeout — returns true after a timeout.
  • useTween — re-renders component, while tweening a number from 0 to 1.
  • useUpdate — returns a callback, which re-renders component when called.
    
    
• Side-effects
  • useAsync — resolves an async function.
  • useAsyncFn — state management for an async function
  • useAsyncRetry — useAsync with retry() method.
  • useBeforeUnload — shows browser alert when user try to reload or close the page.
  • useCopyToClipboard — copies text to clipboard.
  • useDebounce — debounces a function.
  • useFavicon — sets favicon of the page.
  • useLocalStorage — manages a value in localStorage.
  • useLockBodyScroll — lock scrolling of the body element.
  • useSessionStorage — manages a value in sessionStorage.
  • useThrottle and useThrottleFn — throttles a function.
  • useTitle — sets title of the page.
    
    
• Lifecycles
  • useEffectOnce — a modified useEffect hook that only runs once.
  • useEvent — subscribe to events.
  • useLifecycles — calls mount and unmount callbacks.
  • useRefMounted — tracks 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.
  • useDeepCompareEffect — run an effect depending on deep comparison of its dependencies
    
    
• State
  • createMemo — factory of memoized hooks.
  • useGetSet — returns state getter get() instead of raw state.
  • useGetSetState — as if useGetSet and useSetState had a baby.
  • useObservable — tracks latest value of an Observable.
  • useSetState — creates setState method which works like this.setState.
  • useToggle and useBoolean — tracks state of a boolean.
  • useCounter and useNumber — tracks state of a number.
  • useList — tracks state of an array.
  • useMap — tracks state of an object.

Usage

You need to have React 16.8.0 or later installed to use the Hooks API. You can import each hook individually

import useToggle from 'react-use/lib/useToggle'

or use ES6 named imports

import {useToggle} from 'react-use'

Depending on your bundler you might run into a missing dependency error with ES6 named import statements. Some hooks require you to install peer dependencies so we recommend using individual imports. If you want the best of both worlds you can transform the named import statements to individual import statements with babel-plugin-import by adding the following config to your .babelrc file:

[
  "import", {
    "libraryName": "react-use",
    "libraryDirectory": "lib",
    "camel2DashComponentName": false
  }
]

_License

Unlicense — public domain.