Repository files navigation

👍
react-use

^{Collection of essentialReact Hooks.Port oflibreact.
Translations:🇨🇳 汉语}

npm ireact-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.
  • 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 theVibration 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.
  • useListanduseUpsert — tracks state of an array.
  • 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.