use-disclosure

Manages boolean state and provides controls to toggle it

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

use-disclosure hook manages boolean state. It provides open, close and toggle handlers and accepts optional onOpen and onClose callbacks. It can be used to manage controlled modals, popovers and other similar components:

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

function Demo() {
  const [opened, handlers] = useDisclosure(false);

  // Sets opened to true
  handlers.open();

  // Sets opened to false
  handlers.close();

  // Sets opened to true if it was false and vice versa
  handlers.toggle();
}

Callbacks

onOpen and onClose callbacks are called when opened state changes:

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

function Demo() {
  const [opened, handlers] = useDisclosure(false, {
    onOpen: () => console.log('Opened'),
    onClose: () => console.log('Closed'),
  });

  // Calls onOpen callback and sets opened to true
  handlers.open();

  // Does nothing, opened is already true
  handlers.open();

  // Calls onClose callback and sets opened to false
  handlers.close();

  // Does nothing, opened is already false
  handlers.close();

  // Calls onOpen or onClose depending on next state
  handlers.toggle();
}

Definition

function useDisclosure(
  initialState: boolean,
  callbacks?: {
    onOpen?(): void;
    onClose?(): void;
  }
): [
  boolean,
  {
    open: () => void;
    close: () => void;
    toggle: () => void;
  }
];

use-debounced-value

use-id

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter