useBattery — track device battery state
useGeolocation — track geo location state of user's device
useHover and useHoverDirty — track mouse hover state of some element
useIdle — track whether user is being inactive
useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keyboard input
useLocation — track window location state
useMedia — track a CSS media query
useMediaDevices — track state of connected hardware devices
useMotion — track state of device's motion sensor
useMouse and useMouseHovered — track state of mouse position
useNetwork — track state of user's internet connection
useOrientation — track state of device's screen orientation
usePageLeave — trigger callback when mouse leaves page boundaries
useScroll — track an HTML element's scroll position
useSize — track an HTML element's dimensions
useWindowScroll — track Window scroll position
useWindowSize — track Window dimensions

UI

useAudio — play audio, track its state and hook up controls
useClickAway — trigger callback when user clicks outside target area
useCss — dynamically adjusts CSS
useDrop and useDropArea — track file, link and copy-paste drops
useFullscreen — display an element or video full-screen
useSpeech — synthesize speech audio from a text string
useVideo — play video, track its state and hook up playback controls
useWait — complex waiting management for UIs

Animation

useRaf — re-render component on each requestAnimationFrame
useSpring — interpolate 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 — resolve an async function
useAsyncRetry — useAsync with a retry() callback
useDebounce — debounce a function
useFavicon — set favicon of the page
useLocalStorage — manage a value in localStorage
useLockBodyScroll — lock scrolling of the body element
useSessionStorage — manage a value in sessionStorage
useThrottle and useThrottleFn — throttle a function
useTitle — set title of the page

Lifecycle

useEffectOnce — a modified useEffect hook that runs an effect only once
useEvent — subscribe to events
useLifecycles — call mount and unmount callbacks
useRefMounted — track if component is mounted
usePromise — resolve promise only while component is mounted
useLogger — console.log as component goes through lifecycles
useMount — run an effect on mount
useUnmount — run an effect on unmount
useUpdateEffect — run an effect only on updates

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 — track latest value of an Observable.
useSetState — creates setState method which works like this.setState
useToggle and useBoolean — track state of a boolean
useCounter and useNumber — track state of a number
useList — track state of an array
useMap — track state of an object

Usage

You can import each hook individually

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

or use ES6 named import

import {useToggle} from 'react-use'

Depending on your bundler you might run into a missing dependency error. 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
  }
]

Translations

🇨🇳_汉语

License

Unlicense — public domain.