@react-hookz/web

What is @react-hookz/web?

@react-hookz/web is a collection of React hooks designed to simplify common web development tasks. It provides a wide range of hooks for state management, side effects, DOM interactions, and more, making it easier to build complex web applications with React.

What are @react-hookz/web's main functionalities?

State Management

The useToggle hook provides a simple way to manage boolean state. It returns the current state and a function to toggle the state.

import { useToggle } from '@react-hookz/web';

function ToggleComponent() {
  const [value, toggle] = useToggle();

  return (
    <div>
      <p>{value ? 'ON' : 'OFF'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

Side Effects

The useDebounce hook delays the update of a value until after a specified delay. This is useful for scenarios like search input where you want to wait for the user to stop typing before performing an action.

import { useDebounce } from '@react-hookz/web';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      // Perform search
    }
  }, [debouncedQuery]);

  return (
    <input
      type="text"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

DOM Interactions

The useEventListener hook allows you to easily add and clean up event listeners. In this example, a click event listener is added to the window object.

import { useEventListener } from '@react-hookz/web';

function ClickLogger() {
  useEventListener(window, 'click', () => {
    console.log('Window clicked');
  });

  return <div>Click anywhere to log a message</div>;
}

Other packages similar to @react-hookz/web

react-use

react-use is a collection of essential React hooks. It offers a wide range of hooks for state management, side effects, lifecycle events, and more. Compared to @react-hookz/web, react-use has a larger community and more extensive documentation.

ahooks

ahooks is a React hooks library that provides a set of high-quality and reliable hooks. It focuses on performance and ease of use. ahooks offers similar functionalities to @react-hookz/web but also includes some unique hooks for advanced use cases.

usehooks-ts

usehooks-ts is a collection of React hooks written in TypeScript. It provides type-safe hooks for common tasks in React applications. Compared to @react-hookz/web, usehooks-ts is more focused on TypeScript users and offers type safety out of the box.

README

× 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

  • 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.
  • useConditionalUpdateEffect — Like useUpdateEffect but callback invoked only if conditions match predicate.
  • useDebouncedEffect — Like useEffect, but passed function is debounced.
  • useFirstMountState — Return boolean that is true only on first render.
  • 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.
  • useRerender — Return callback that re-renders component.
  • useThrottledEffect — Like useEffect, but passed function is throttled.
  • useUnmountEffect — Run effect only when component unmounted.
  • useUpdateEffect — Effect hook that ignores the first render (not invoked on mount).

• State

  • useDebouncedState — Lise useSafeState but its state setter is debounced.
  • 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.
  • 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.
  • usePermission — Tracks a permission state.

• Miscellaneous

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

• Side-effect

  • useAsync — Executes provided async function and tracks its result and error.
  • useCookieValue — Manages a single cookie.
  • useLocalStorageValue — Manages a single LocalStorage key.
  • useSessionStorageValue — Manages a single SessionStorage key.

• Sensor

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

• Dom

  • useDocumentTitle — Sets title of the page.