React hooks done right, for browser and SSR.
npm install @react-hookz/web



---
@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility in mind.
This one is pretty simple, everyone knows what to do:
``shell`
npm i @react-hookz/webor
yarn add @react-hookz/web
As hooks was introduced to the world in React 16.8, @react-hookz/web requires - you guessed it - react andreact-dom 16.8+. Also, as React does not support IE, @react-hookz/web don't either.
> 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.
@react-hookz/web was built as a spiritual successor ofreact-use by one of its former maintainers.
- #### Callback
- useDebouncedCallback — Makes passed function debounced, otherwise acts
like useCallback.useRafCallback
- — Makes passed function to be called within next animationuseThrottledCallback
frame.
- — Makes passed function throttled, otherwise actsuseCallback
like .
- #### Lifecycle
- useConditionalEffect — Like useEffect but callback invoked only ifuseCustomCompareEffect
given conditions match a given predicate.
- — Like useEffect but uses a provideduseDebouncedEffect
comparator function to validate dependency changes.
- — 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 firstuseIntervalEffect
render.
- — Like setInterval but in the form of a React hook.useIsMounted
- — Returns a function that yields current mount state.useIsomorphicLayoutEffect
- — Like useLayoutEffect but falls backuseEffect
to during SSR.useMountEffect
- — Run an effect only when a component mounts.useRafEffect
- — Like useEffect, but the effect is only run within an animationuseRerender
frame.
- — Returns a callback that re-renders the component.useThrottledEffect
- — Like useEffect, but the passed function isuseTimeoutEffect
throttled.
- — 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 invokeduseLifecycleLogger
on mount).
- — This hook provides logging when the component
mounts, updates and unmounts.
- #### State
- useControlledRerenderState — Like useState, but its stateuseCounter
setter accepts an extra argument, that allows cancelling renders.
- — 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 stateuseList
getter function is returned.
- — 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 ausePrevious
mediator function.
- — Returns the value passed to the hook on previous render.usePreviousDistinct
- — Returns the most recent distinct value passed touseQueue
the hook on previous renders.
- — A state hook implementing FIFO queue.useRafState
- — Like React.useState, but state is only updated within animationuseRenderCount
frame.
- — 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 theuseCustomCompareMemo
actual value.
- — Like useMemo but uses provided comparatoruseDeepCompareMemo
function to validate dependency changes.
- — Like useMemo but uses @react-hookz/deep-equaluseHookableRef
comparator function to validate deep dependency changes.
- — 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 asuseCookieValue
first function argument to the async function.
- — 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 touseMediaQuery
re-render the component when they change.
- — Tracks the state of a CSS media query.useResizeObserver
- — Invokes a callback whenever ResizeObserver detects auseScreenOrientation
change to the target's size.
- — Checks if the screen is in portrait orlandscape
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.