@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

@react-hookz/web

WIP

Changelog

1.1.0 (2021-04-15)

Features

• implement useMountEffect and useUnmountEffect hooks (98ec434)