muskanmahajan37/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";

Hooks list

• Callback

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

• Lifecycle

  • useConditionalEffect — Like useEffect but callback invoked only if conditions match predicate.
  • useConditionalUpdateEffect — Like useUpdateEffect but callback invoked only if conditions match predicate.
  • useFirstMountState — Return boolean that is true only on first render.
  • useIsMounted — Returns function that yields current mount state.
  • useMountEffect — Run effect only when component is first mounted.
  • useRerender — Return callback that re-renders component.
  • useUnmountEffect — Run effect only when component is unmounted.
  • useUpdateEffect — Effect hook that ignores the first render (not invoked on mount).
  • useIsomorphicLayoutEffect — useLayoutEffect for browser with fallback to useEffect for SSR.

• State

  • useMediatedState — Like useState, but every value set is passed through a mediator function.
  • usePrevious — Returns the value passed to the hook on previous render.
  • useSafeState — Like useState, but its state setter is guarded against sets on unmounted component.
  • useToggle — Like useState, but can only become true or false.

• Navigator

  • useNetworkState — Tracks the state of browser's network connection.

• Miscellaneous

  • useSyncedRef — Like useRef, but it returns immutable ref that contains actual value.

• Side-effect

  • useLocalStorageValue — Manages a single LocalStorage key.
  • useSessionStorageValue — Manages a single SessionStorage key.

• Sensor

  • useResizeObserver — Invokes a callback whenever ResizeObserver detects a change to target's size.
  • useMeasure — Uses ResizeObserver to track element dimensions and re-render component when they change.

• Dom

  • useDocumentTitle — Sets title of the page.