- 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.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.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 size.useStartTyping
— detects when user starts typing.useWindowScroll
— tracksWindow
scroll position.useWindowSize
— tracksWindow
dimensions.useMeasure
— tracks an HTML element's dimensions using the Resize Observer API.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.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.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.
- Miscellaneous
useEnsuredForwardedRef
andensuredForwardRef
— use a React.forwardedRef safely.
Usage — how to import.
Unlicense — public domain.
Support — add yourself to backer list below.