Collection of React Hooks
Collection of essential React Hooks. Port of
Translations: 🇨🇳 汉语
npm i react-use
useBattery— tracks device battery state.
useGeolocation— tracks geo location state of user's device.
useHoverDirty— tracks mouse hover state of some element.
useIdle— tracks whether user is being inactive.
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.
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.
useScrolling— tracks whether HTML element is scrolling.
useSize— tracks an HTML element's dimensions.
useStartTyping— detects when user starts typing.
useAudio— plays audio and exposes its controls.
useClickAway— triggers callback when user clicks outside target area.
useCss— dynamically adjusts CSS.
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.
useRaf— re-renders component on each
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.
useAsync— resolves an
useAsyncFn— state management for an async function
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
useLockBodyScroll— lock scrolling of the body element.
useSessionStorage— manages a value in
useThrottleFn— throttles a function.
useTitle— sets title of the page.
usePermission— query permission status for browser APIs.
useEffectOnce— a modified
useEffecthook that only runs once.
useEvent— subscribe to events.
useRefMounted— tracks if component is mounted.
usePromise— resolves promise only while component is mounted.
useLogger— logs in console as component goes through life-cycles.
useUpdateEffect— run an
effectonly on updates.
useLayoutEffectthat does not show warning when server-side rendering.
useDeepCompareEffect— run an
effectdepending on deep comparison of its dependencies
createMemo— factory of memoized hooks.
createReducer— factory of reducer hooks with custom middleware.
useGetSet— returns state getter
get()instead of raw state.
useGetSetState— as if
useSetStatehad a baby.
usePrevious— returns the previous state or props.
useObservable— tracks latest value of an
setStatemethod which works like
useBoolean— tracks state of a boolean.
useNumber— tracks state of a number.
useList— tracks state of an array.
useMap— tracks state of an object.