---

@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:

``shell
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 don't either.

Usage

> This package distributed with ESNext language level and ES modules system. It means that depending on your browser
> target you might need to transpile it. Every major bundler provides a way to transpile node_modules fully or
> partially. Address your bundler documentation for more details.

You can import hooks two ways:

`ts
// from the root of package
import {useMountEffect} from '@react-hookz/web';
// or single hook directly
import {useMountEffect} from '@react-hookz/web/useMountEffect/index.js';
`

In case your bundler supports tree-shaking (most of modern does) - both variants are equal and only necessary code will
get into your bundle. Direct hook imports should be considered otherwise.

Migrating from react-use

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

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
given conditions match a given predicate.
- useCustomCompareEffect — Like useEffect but uses a 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 — Returns a boolean that is true only on first
render.
- useIntervalEffect — Like setInterval but in the form of a React hook.
- useIsMounted — Returns a function that yields current mount state.
- useIsomorphicLayoutEffect — Like useLayoutEffect but falls back
to useEffect during SSR.
- useMountEffect — Run an effect only when a component mounts.
- useRafEffect — Like useEffect, but the effect is only run within an animation
frame.
- useRerender — Returns a callback that re-renders the component.
- useThrottledEffect — Like useEffect, but the passed function is
throttled.
- useTimeoutEffect — Like setTimeout, but in the form of a React hook.
- useUnmountEffect — Run an effect only when a component unmounts.
- useUpdateEffect — An effect hook that ignores the first render (not invoked
on mount).
- useLifecycleLogger — This hook provides logging when the component
mounts, updates and unmounts.

- #### State
- useControlledRerenderState — Like useState, but its state
setter accepts an extra argument, that allows cancelling renders.
- useCounter — Tracks a numeric value and offers functions for manipulating it.
- useDebouncedState — Like useState but its state setter is debounced.
- useFunctionalState — Like useState but instead of raw state, a state
getter function is 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 renders.
- useQueue — A state hook implementing FIFO queue.
- useRafState — Like React.useState, but state is only updated within animation
frame.
- useRenderCount — Tracks component's render count including first render.
- useSet — Tracks the state of a Set.
- useToggle — Like useState, but can only be true or false.
- useThrottledState — Like useState but its state setter is throttled.
- useValidator — Performs validation when any of the provided dependencies
change.

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

- #### Miscellaneous
- useSyncedRef — Like useRef, but it returns an immutable ref that contains the
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 handlers for
getting and setting the value.

- #### Side-effect
- useAsync — Executes provided async function and tracks its results and errors.
- useAsyncAbortable — Like useAsync, but also provides AbortSignal as
first function argument to the 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 the viewport.
- useMeasure — Uses ResizeObserver to track an element's dimensions and to
re-render the component when they change.
- useMediaQuery — Tracks the state of a CSS media query.
- useResizeObserver — Invokes a callback whenever ResizeObserver detects a
change to the target's size.
- useScreenOrientation — Checks if the screen is in portrait or
landscape orientation and automatically re-renders on orientation change.
- useDocumentVisibility — Tracks document visibility state.

- #### Dom
- useClickOutside — Triggers a callback when the user clicks outside a target
element.
- useEventListener — Subscribes an event listener to a target element.
- useKeyboardEvent — Invokes a callback when a keyboard event occurs on the
chosen target.
- useWindowSize` — Tracks the inner dimensions of the browser window.

Contributors

Anton Zinovyev	Joe Duncko	Arttu Olli	Kyle Holmberg	Jake Ketcheson	Rey Wang	Andreas Nel	Fengkx
Paul Sachs	Null	Null	Konrad Linkowski	Justin Wallace	Joshua Stewart	Daniel Friesen	Null
Brian Fletcher	Birant İyigün	Bart Lens	Axel Bocciarelli	Anders Kjær Damgaard