streamich/react-use

React Hooks for all sorts of things... very similar to VueUse

Summary

react-use is a TypeScript library that bundles a large collection of React Hooks covering sensors, UI, animations, lifecycles, side-effects, and state management. The README describes it as a port of libreact, distributed under the Unlicense (public domain), and installed via npm i react-use.

What it is useful for

The library is useful when engineers want ready-made hooks for common browser, DOM, and state patterns instead of writing them from scratch. Categories documented in the README include:

• Sensors — useBattery, useGeolocation, useHover/useHoverDirty, useIntersection, useKey/useKeyPress/useKeyboardJs/useKeyPressEvent, useLocation/useSearchParam, useMedia, useNetworkState, useWindowSize, useWindowScroll, useMouse/useMouseHovered, useMeasure/useSize, useOrientation, useScroll, and useIdle.
• UI — useAudio, useClickAway, useFullscreen, useSpeech, useVibrate, useVideo, useDrop/useDropArea, useSlider, and useCss.
• Animations — useRaf, useInterval/useHarmonicIntervalFn, useSpring, useTimeout/useTimeoutFn, useTween, and useUpdate.
• Side-effects — useAsync/useAsyncFn/useAsyncRetry, useBeforeUnload, useCookie, useCopyToClipboard, useDebounce, useFavicon, useLocalStorage, useSessionStorage, useThrottle/useThrottleFn, useTitle, useLockBodyScroll, and usePermission.
• Lifecycles — useEffectOnce, useEvent, useLifecycles, useMount/useUnmount, usePromise, useUpdateEffect, useIsomorphicLayoutEffect, and useDeepCompareEffect/useShallowCompareEffect/useCustomCompareEffect.
• State — useToggle/useBoolean, useCounter/useNumber, useList/useUpsert, useMap, useSet, useQueue, usePrevious/usePreviousDistinct, useRafState, useObservable, useStateWithHistory, createGlobalState, and useMethods.

Documented limitations: several hooks (useBattery, useGeolocation, useVibrate, useSpeech, useMediaDevices) wrap browser APIs that are unavailable or inconsistent in some environments, so SSR and unsupported browsers require guards. Per-hook docs in ./docs/ describe exact APIs and caveats.

How engineers can use it

The README documents installation as:

npm i react-use

Individual hooks can then be imported from the package. Detailed import patterns are in ./docs/Usage.md, and per-hook documentation lives in the linked files under ./docs/. Many hooks have linked CodeSandbox or Storybook demos for reference. Because the project is released under the Unlicense, it can be incorporated into commercial or personal projects without attribution obligations. Engineers should review each hook's individual doc page before depending on it in production code.