thinkryan/web

React hooks done right, for browser and SSR.

× DOCS × DISCORD × CHANGELOG ×

---

@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility in mind.

Install

This one is pretty simple, everyone knows what to do:

npm i @react-hookz/web
# or
yarn add @react-hookz/web

As hooks was introduced to the world in React 16.8, @react-hookz/web requires - you guessed it - react and react-dom 16.8+. Also, as React does not support IE, @react-hookz/web does not do so either. You'll have to transpile your node-modules in order to run in IE.

Usage

This package provides three levels of compilation:

1. Main, the /cjs folder — CommonJS modules, with ES5 lang level.
2. ESM, the /esm folder — it is ES modules (browser compatible), with ES5 lang level.
3. ESNext, the /esnext folder — it is ES modules (browser compatible), with ESNext lang level.

So, if you need the useMountEffect hook, depending on your needs, you can import in three ways (there are actually more, but these are the three most common):

// in case you need cjs modules
import { useMountEffect } from '@react-hookz/web';
// in case you need esm modules
import { useMountEffect } from '@react-hookz/web/esm';
// in case you want all the recent ES features
import { useMountEffect } from '@react-hookz/web/esnext';

Migrating from react-use

@react-hookz/web was built as a spiritual successor of react-use by one of its former maintainers.

Coming from react-use? Check out our migration guide.

Hooks list

• Callback

  • useDebouncedCallback — Makes passed function debounced, otherwise acts like useCallback.
  • useRafCallback — Makes passed function to be called within next animation frame.
  • useThrottledCallback — Makes passed function throttled, otherwise acts like useCallback.

• Lifecycle

  • useConditionalEffect — Like useEffect but callback invoked only if conditions match predicate.
  • useCustomCompareEffect — Like useEffect but uses provided comparator function to validate dependency changes.
  • useDebouncedEffect — Like useEffect, but passed function is debounced.
  • useDeepCompareEffect — Like useEffect but uses @react-hookz/deep-equal comparator function to validate deep dependency changes.
  • useFirstMountState — Return boolean that is true only on first render.
  • useIntervalEffect — Like setInterval but in form of react hook.
  • useIsMounted — Returns function that yields current mount state.
  • useIsomorphicLayoutEffect — useLayoutEffect for browser with fallback to useEffect for SSR.
  • useMountEffect — Run effect only when component first-mounted.
  • useRafEffect — Like React.useEffect, but effect is only run within animation frame.
  • useRerender — Return callback that re-renders component.
  • useThrottledEffect — Like useEffect, but passed function is throttled.
  • useTimeoutEffect — Like setTimeout, but in the form of a react hook.
  • useUnmountEffect — Run effect only when component unmounted.
  • useUpdateEffect — Effect hook that ignores the first render (not invoked on mount).
  • useLifecycleLogger — This hook provides a console log when the component mounts, updates and unmounts.

• State

  • useControlledRerenderState — Like React.useState, but its state setter accepts extra argument, that allows to cancel rerender.
  • useCounter — Tracks a numeric value and offers functions for manipulating it.
  • useDebouncedState — Like useSafeState but its state setter is debounced.
  • useFunctionalState — Like useState but instead of raw state, state getter returned.
  • useList — Tracks a list and offers functions for manipulating it.
  • useMap — Tracks the state of a Map.
  • useMediatedState — Like useState, but every value set is passed through a mediator function.
  • usePrevious — Returns the value passed to the hook on previous render.
  • usePreviousDistinct — Returns the most recent distinct value passed to the hook on previous render.
  • useRafState — Like React.useState, but state is only updated within animation frame.
  • useSafeState — Like useState, but its state setter is guarded against sets on unmounted component.
  • useSet — Tracks the state of a Set.
  • useToggle — Like useState, but can only become true or false.
  • useThrottledState — Like useSafeState but its state setter is throttled.
  • useValidator — Performs validation when any of provided dependencies has changed.

• Navigator

  • useNetworkState — Tracks the state of browser's network connection.
  • useVibrate — Provides vibration feedback using the Vibration API.
  • usePermission — Tracks a permission state.

• Miscellaneous

  • useSyncedRef — Like useRef, but it returns immutable ref that contains actual value.
  • useCustomCompareMemo — Like useMemo but uses provided comparator function to validate dependency changes.
  • useDeepCompareMemo — Like useMemo but uses @react-hookz/deep-equal comparator function to validate deep dependency changes.
  • useHookableRef — Like useRef but it is possible to define get and set handlers.

• Side-effect

  • useAsync — Executes provided async function and tracks its result and error.
  • useAsyncAbortable — Like useAsync, but also provides AbortSignal as first function argument to async function.
  • useCookieValue — Manages a single cookie.
  • useLocalStorageValue — Manages a single LocalStorage key.
  • useSessionStorageValue — Manages a single SessionStorage key.

• Sensor

  • useIntersectionObserver — Observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
  • useMeasure — Uses ResizeObserver to track element dimensions and re-render component when they change.
  • useMediaQuery — Tracks the state of CSS media query.
  • useResizeObserver — Invokes a callback whenever ResizeObserver detects a change to target's size.
  • useScreenOrientation — Checks if screen is in portrait or landscape orientation and automatically re-renders on orientation change.

• Dom

  • useClickOutside — Triggers callback when user clicks outside the target element.
  • useEventListener — Subscribes an event listener to the target, and automatically unsubscribes it on unmount.
  • useKeyboardEvent — Executes callback when keyboard event occurred on target.
  • useWindowSize — Tracks window inner dimensions.

Contributors

Anton Zinovyev	Joe Duncko	Arttu Olli	Kyle Holmberg	Andreas Nel	Rey Wang	Axel Bocciarelli	Bart Lens
Birant İyigün	Brian Fletcher	Daniel Friesen	Jake Ketcheson	Joshua Stewart	Konrad Linkowski	Michał Tarasiuk	Fengkx