π
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
anduseHoverDirty
β tracks mouse hover state of some element.useHash
β tracks location hash value.useIdle
β tracks whether user is being inactive.useIntersection
β tracks an HTML element's intersection.useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
β track keys.useLocation
anduseSearchParam
β tracks page navigation bar location state.useLongPress
β tracks long press gesture of some element.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.useMouseWheel
β tracks deltaY of scrolled mouse wheel.useNetworkState
β tracks the state of browser's network connection.useOrientation
β tracks state of device's screen orientation.usePageLeave
β triggers when mouse leaves page boundaries.useScratch
β tracks mouse click-and-scrub state.useScroll
β tracks an HTML element's scroll position.useScrolling
β tracks whether HTML element is scrolling.useStartTyping
β detects when user starts typing.useWindowScroll
β tracksWindow
scroll position.useWindowSize
β tracksWindow
dimensions.useMeasure
anduseSize
β tracks an HTML element's dimensions.createBreakpoint
β tracksinnerWidth
useScrollbarWidth
β detects browser's native scrollbars width.
- 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.useSlider
β provides slide behavior over any HTML element.useSpeech
β synthesizes speech from a text string.useVibrate
β provide physical feedback using the Vibration API.useVideo
β plays video, tracks its state, and exposes playback controls.
- 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
,useAsyncFn
, anduseAsyncRetry
β resolves anasync
function.useBeforeUnload
β shows browser alert when user try to reload or close the page.useCookie
β provides way to read, update and delete a cookie.useCopyToClipboard
β copies text to clipboard.useDebounce
β debounces a function.useError
β error dispatcher.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
anduseUnmountPromise
β 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
,useShallowCompareEffect
, anduseCustomCompareEffect
β run aneffect
depending on deep comparison of its dependencies
- State
createMemo
β factory of memoized hooks.createReducer
β factory of reducer hooks with custom middleware.createReducerContext
andcreateStateContext
β factory of hooks for a sharing state between components.useDefault
β returns the default value when state isnull
orundefined
.useGetSet
β returns state getterget()
instead of raw state.useGetSetState
β as ifuseGetSet
anduseSetState
had a baby.useLatest
β returns the latest state or propsusePrevious
β returns the previous state or props.usePreviousDistinct
β likeusePrevious
but with a predicate to determine ifprevious
should update.useObservable
β tracks latest value of anObservable
.useRafState
β createssetState
method which only updates afterrequestAnimationFrame
.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
andβ tracks state of an array.useUpsert
useMap
β tracks state of an object.useSet
β tracks state of a Set.useQueue
β implements simple queue.useStateValidator
β tracks state of an object.useStateWithHistory
β stores previous state values and provides handles to travel through them.useMultiStateValidator
β alike theuseStateValidator
, but tracks multiple states at a time.useMediatedState
β like the regularuseState
but with mediation by custom function.useFirstMountState
β check if current render is first.useRendersCount
β count component renders.createGlobalState
β cross component shared state.useMethods
β neat alternative touseReducer
.
- Miscellaneous
useEnsuredForwardedRef
andensuredForwardRef
β use a React.forwardedRef safely.
Usage β how to import.
Unlicense β public domain.
Support β add yourself to backer list below.