About this project
react-use is an open-source collection of reusable React Hooks, described in its README as a port of the libreact project. It is distributed as the npm package `react-use` and is released into the public domain under the Unlicense.
The README organizes the hooks into several groups:
- Sensors: hooks such as useBattery, useGeolocation, useHover, useHash, useIdle, useIntersection, useKey/useKeyPress/useKeyboardJs/useKeyPressEvent, useLocation/useSearchParam, useLongPress, useMedia, useMediaDevices, useMotion, useMouse/useMouseHovered, useMouseWheel, useNetworkState, useOrientation, usePageLeave, useScratch, useScroll, useScrolling, useStartTyping, useWindowScroll, useWindowSize, useMeasure/useSize, createBreakpoint, useScrollbarWidth and usePinchZoom.
- UI: useAudio, useClickAway, useCss, useDrop/useDropArea, useFullscreen, useSlider, useSpeech, useVibrate and useVideo.
- Animations: useRaf, useInterval/useHarmonicIntervalFn, useSpring, useTimeout, useTimeoutFn, useTween and useUpdate.
- Side-effects: useAsync/useAsyncFn/useAsyncRetry, useBeforeUnload, useCookie, useCopyToClipboard, useDebounce, useError, useFavicon, useLocalStorage, useLockBodyScroll, useRafLoop, useSessionStorage, useThrottle/useThrottleFn, useTitle and usePermission.
- Lifecycles: useEffectOnce, useEvent, useLifecycles, useMountedState/useUnmountPromise, usePromise, useLogger, useMount, useUnmount, useUpdateEffect, useIsomorphicLayoutEffect and the compare-effect hooks (useDeepCompareEffect, useShallowCompareEffect, useCustomCompareEffect).
- State: createMemo, createReducer, createReducerContext/createStateContext, useDefault, useGetSet, useGetSetState, useLatest, usePrevious, usePreviousDistinct, useObservable, useRafState, useSetState, useStateList, useToggle/useBoolean, useCounter/useNumber, useList, useMap, useSet, useQueue, useStateValidator, useStateWithHistory, useMultiStateValidator, useMediatedState, useFirstMountState, useRendersCount, createGlobalState and useMethods.
- Miscellaneous: useEnsuredForwardedRef and ensuredForwardRef.
Each hook is documented in its own file under the docs directory, and many entries link to live demos hosted on the project's Storybook site or CodeSandbox. The README also links to a Chinese translation of the documentation and notes that the project is supported through Open Collective. Installation is shown as `npm i react-use`.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.