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.useHoveranduseHoverDirtyβ 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.useLocationanduseSearchParamβ 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.useMouseanduseMouseHoveredβ 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β tracksWindowscroll position.useWindowSizeβ tracksWindowdimensions.useMeasureanduseSizeβ tracks an HTML element's dimensions.createBreakpointβ tracksinnerWidthuseScrollbarWidthβ 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.useDropanduseDropAreaβ 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.useIntervalanduseHarmonicIntervalFnβ 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 anasyncfunction.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.useThrottleanduseThrottleFnβ throttles a function.useTitleβ sets title of the page.usePermissionβ query permission status for browser APIs.
- Lifecycles
useEffectOnceβ a modifieduseEffecthook that only runs once.useEventβ subscribe to events.useLifecyclesβ callsmountandunmountcallbacks.useMountedStateanduseUnmountPromiseβ track if component is mounted.usePromiseβ resolves promise only while component is mounted.useLoggerβ logs in console as component goes through life-cycles.useMountβ callsmountcallbacks.useUnmountβ callsunmountcallbacks.useUpdateEffectβ run aneffectonly on updates.useIsomorphicLayoutEffectβuseLayoutEffectthat that works on server.useDeepCompareEffect,useShallowCompareEffect, anduseCustomCompareEffect
- State
createMemoβ factory of memoized hooks.createReducerβ factory of reducer hooks with custom middleware.createReducerContextandcreateStateContextβ factory of hooks for a sharing state between components.useDefaultβ returns the default value when state isnullorundefined.useGetSetβ returns state getterget()instead of raw state.useGetSetStateβ as ifuseGetSetanduseSetStatehad a baby.useLatestβ returns the latest state or propsusePreviousβ returns the previous state or props.usePreviousDistinctβ likeusePreviousbut with a predicate to determine ifpreviousshould update.useObservableβ tracks latest value of anObservable.useRafStateβ createssetStatemethod which only updates afterrequestAnimationFrame.useSetStateβ createssetStatemethod which works likethis.setState.useStateListβ circularly iterates over an array.useToggleanduseBooleanβ tracks state of a boolean.useCounteranduseNumberβ tracks state of a number.useListandβ tracks state of an array.useUpsertuseMapβ 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 regularuseStatebut 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
useEnsuredForwardedRefandensuredForwardRefβ use a React.forwardedRef safely.
Usage β how to import.
Unlicense β public domain.
Support β add yourself to backer list below.
