use-disclosure

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();
}

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();
}

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