useDisclosure

A custom React hook to manage the open/closed state of a component, providing helper methods to toggle, open, or close the state.
> useDisclosure({ initialState = false, options }: Props):
      readonly [boolean, {
                open: () => void;
                close: () => void;
                toggle: () => void
            }]
Parameters
  • initialState: (Optional) A boolean value representing the initial state of the disclosure. Defaults to `false`.
  • options: (Optional) An object containing callbacks:
    • onOpen: A function called when the state is opened.
    • onClose: A function called when the state is closed.
  • Returns: A tuple with the current state (`boolean`) and an object containing methods (`open`, `close`, and `toggle`).

Example

import { useDisclosure } from "daily-toolset/hooks";

function ExampleComponent() {
  const [isOpen, { open, close, toggle }] = useDisclosure({
    initialState: false,
    options: {
      onOpen: () => console.log("Opened!"),
      onClose: () => console.log("Closed!"),
    },
  });

  return (
    <div>
      <p>{isOpen ? "The component is open!" : "The component is closed."}</p>
      <button onClick={open}>Open</button>
      <button onClick={close}>Close</button>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

Use Cases

  • Managing modal open/close state with optional callbacks.
  • Handling dropdown visibility with toggle functionality.
  • Controlling the display state of tooltips or other UI components.