-
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. -
usePinchZoom
— tracks pointer events to detect pinch zoom in and out status.
-
-
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 that works on server. -
useDeepCompareEffect
,useShallowCompareEffect
, anduseCustomCompareEffect
-
-
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 props -
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. -
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.