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
anduseHoverDirty
โ tracks mouse hover state of some element.useIdle
โ tracks whether user is being inactive.useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
โ track keys.useLocation
anduseSearchParam
โ 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.useScrolling
โ tracks whether HTML element is scrolling.useSize
โ tracks an HTML element's dimensions.useStartTyping
โ detects when user starts typing.useWindowScroll
โ tracksWindow
scroll position.useWindowSize
โ tracksWindow
dimensions.useMeasure
โ tracks an HTML element's dimensions by Resize Observer.
- 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
.useInterval
anduseHarmonicIntervalFn
โ re-renders component on a set interval usingsetInterval
.useSpring
โ interpolates number over time according to spring dynamics.useTimeout
โ re-renders component after a timeout.useTimeoutFn
โ calls given function 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.useRafLoop
โ calls given function inside the RAF loop.useSessionStorage
โ manages a value insessionStorage
.useThrottle
anduseThrottleFn
โ throttles a function.useTitle
โ sets title of the page.usePermission
โ query permission status for browser APIs.
- Lifecycles
useEffectOnce
โ a modifieduseEffect
hook that only runs once.useEvent
โ subscribe to events.useLifecycles
โ callsmount
andunmount
callbacks.useMountedState
anduseRefMounted
โ track 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.useIsomorphicLayoutEffect
โuseLayoutEffect
that does not show warning when server-side rendering.useDeepCompareEffect
โ run aneffect
depending on deep comparison of its dependencies
- State
createMemo
โ factory of memoized hooks.createReducer
โ factory of reducer hooks with custom middleware.useDefault
โ returns the default value when state isnull
orundefined
.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
.useStateList
โ circularly iterates over an array.useToggle
anduseBoolean
โ tracks state of a boolean.useCounter
anduseNumber
โ tracks state of a number.useList
anduseUpsert
โ tracks state of an array.useMap
โ tracks state of an object.
Usage โ how to import.
Unlicense โ public domain.
Support โ add yourself to backer list below.