@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

React hooks for Mantine components library. All other @mantine/ packages depend on @mantine/hooks.

Package includes hooks that are used to build components in @mantine/ scoped packages. You can use these hooks in your applications with or without other @mantine/ packages.

Documentation

See full documentation on Mantine website

Installation

# With yarn
yarn add @mantine/hooks

# With npm
npm install @mantine/hooks

Included hooks

• use-click-outside – capture click and touch events from outside of given container
• use-clipboard – provides convenient interface to work with clipboard api
• use-document-title - set document.title property
• use-form – bare minimum form state management
• use-id – ensure id for form controls binding
• use-list-state – hook for convenient array state management
• use-media-query – execute and subscribe to window.matchMedia queries
• use-queue – add data to queue if given limit is exceeded
• use-reduced-motion – check if user prefers to reduce motion
• use-scroll-lock – lock document.body scroll at current position

Licence

All @mantine/ scoped packages, dependencies and peer dependencies have MIT licence.