Skip to content

react-hookz/web

Repository files navigation

@react-hookz/web

NPM Version NPM Downloads NPM Dependents Build Coverage Types Tree Shaking

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

// 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.

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

Hooks list

  • Callback

  • Lifecycle

  • 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

  • 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

xobotyi
Anton Zinovyev
JoeDuncko
Joe Duncko
ArttuOll
Arttu Olli
kylemh
Kyle Holmberg
wesgro
Jake Ketcheson
Rey-Wang
Rey Wang
AndreasNel
Andreas Nel
fengkx
Fengkx
paul-sachs
Paul Sachs
Myzel394
Null
michaltarasiuk
Null
KonradLinkowski
Konrad Linkowski
jpwallace22
Justin Wallace
JoshuaStewartEntelect
Joshua Stewart
dantman
Daniel Friesen
ChloeMouret
Null
punkle
Brian Fletcher
birant
Birant İyigün
lensbart
Bart Lens
axelboc
Axel Bocciarelli
akd-io
Anders Kjær Damgaard