Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mantine/hooks

Package Overview
Dependencies
Maintainers
1
Versions
385
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mantine/hooks

A collection of 50+ hooks for state and UI management

  • 7.15.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
547K
increased by3.99%
Maintainers
1
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 12 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc