@mantine/hooks

What is @mantine/hooks?

@mantine/hooks is a collection of React hooks that provide a wide range of functionalities to simplify state management, UI interactions, and other common tasks in React applications.

What are @mantine/hooks's main functionalities?

useLocalStorage

The `useLocalStorage` hook allows you to easily manage state that is synchronized with localStorage. This is useful for persisting user preferences or other data that should be retained across page reloads.

import { useLocalStorage } from '@mantine/hooks';

function Demo() {
  const [value, setValue] = useLocalStorage({ key: 'my-key', defaultValue: 'default' });
  return (
    <div>
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
      <p>Stored value: {value}</p>
    </div>
  );
}

useDebouncedValue

The `useDebouncedValue` hook helps to manage a debounced state value. This is particularly useful for scenarios like search input where you want to delay the execution of a function until the user has stopped typing.

import { useDebouncedValue } from '@mantine/hooks';
import { useState } from 'react';

function Demo() {
  const [value, setValue] = useState('');
  const [debouncedValue] = useDebouncedValue(value, 200);

  return (
    <div>
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
      <p>Debounced value: {debouncedValue}</p>
    </div>
  );
}

useClickOutside

The `useClickOutside` hook allows you to detect clicks outside of a specified element. This is useful for closing dropdowns, modals, or other pop-up elements when the user clicks outside of them.

import { useClickOutside } from '@mantine/hooks';
import { useRef, useState } from 'react';

function Demo() {
  const [opened, setOpened] = useState(false);
  const ref = useRef();
  useClickOutside(ref, () => setOpened(false));

  return (
    <div>
      <button onClick={() => setOpened((o) => !o)}>Toggle dropdown</button>
      {opened && (
        <div ref={ref}>
          <p>Click outside this element to close it</p>
        </div>
      )}
    </div>
  );
}

Other packages similar to @mantine/hooks

react-use

react-use is a collection of essential React hooks that cover a wide range of use cases, from state management to side effects and UI interactions. It is similar to @mantine/hooks in terms of the breadth of hooks provided, but it has a larger community and more extensive documentation.

ahooks

ahooks is a React hooks library that provides a comprehensive set of high-quality hooks. It is similar to @mantine/hooks in that it aims to simplify common tasks in React development, but it also includes some unique hooks and utilities not found in @mantine/hooks.

usehooks-ts

usehooks-ts is a collection of React hooks written in TypeScript. It offers a similar range of hooks as @mantine/hooks but is specifically designed for TypeScript users, providing type-safe hooks out of the box.

README

Mantine Hooks

A set of react hooks for state and UI management

View documentation

Installation

# With yarn
yarn add @mantine/hooks

# With npm
npm install @mantine/hooks

License

MIT