- Sensors
useBattery
— tracks device battery state.useGeolocation
— tracks geo location state of user's device.useHover
anduseHoverDirty
— tracks mouse hover state of some element.useIdle
— tracks whether user is being inactive.useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
— 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
anduseMouseHovered
— 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
— tracksWindow
scroll position.useWindowSize
— tracksWindow
dimensions.
- UI
useAudio
— plays audio and exposes its controls.useClickAway
— triggers callback when user clicks outside target area.useCss
— dynamically adjusts CSS.useDrop
anduseDropArea
— 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 eachrequestAnimationFrame
.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 anasync
function.useAsyncFn
— state management for an async functionuseAsyncRetry
—useAsync
withretry()
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 inlocalStorage
.useLockBodyScroll
— lock scrolling of the body element.useSessionStorage
— manages a value insessionStorage
.useThrottle
anduseThrottleFn
— throttles a function.useTitle
— sets title of the page.
- Lifecycles
useEffectOnce
— a modifieduseEffect
hook that only runs once.useEvent
— subscribe to events.useLifecycles
— callsmount
andunmount
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
— callsmount
callbacks.useUnmount
— callsunmount
callbacks.useUpdateEffect
— run aneffect
only on updates.useDeepCompareEffect
— run aneffect
depending on deep comparison of its dependencies
- State
createMemo
— factory of memoized hooks.useGetSet
— returns state getterget()
instead of raw state.useGetSetState
— as ifuseGetSet
anduseSetState
had a baby.usePrevious
— returns the previous state or props.useObservable
— tracks latest value of anObservable
.useSetState
— createssetState
method which works likethis.setState
.useToggle
anduseBoolean
— tracks state of a boolean.useCounter
anduseNumber
— tracks state of a number.useList
— tracks state of an array.useMap
— tracks state of an object.
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
}
]
Unlicense — public domain.