Skip to main content

​
Overview

useDisclosure is a hook for managing the visibility state of UI elements like modals, drawers, dropdowns, and other disclosure widgets. It provides a complete API for opening, closing, and toggling visibility, with optional scroll locking when the element is open.

​
Import

import { useDisclosure } from "@zayne-labs/toolkit-react";

​
Signature

const useDisclosure = (options?: DisclosureOptions) => {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
  onToggle: <TValue>(value?: TValue) => void;
}

​
Parameters

​
options
DisclosureOptions
Configuration options for the disclosure behavior.
​
options.hasScrollControl
boolean
default:"false"
Whether to lock/unlock page scrolling when the disclosure opens/closes. Useful for modals and drawers.
​
options.initialState
boolean | (() => boolean)
default:"false"
The initial open state. Can be a boolean or a function that returns a boolean.

​
Return Value

Returns an object with the following properties:
​
isOpen
boolean
The current open/closed state of the disclosure.
​
onOpen
() => void
Function to open the disclosure. If hasScrollControl is enabled, also locks page scrolling.
​
onClose
() => void
Function to close the disclosure. If hasScrollControl is enabled, also unlocks page scrolling.
​
onToggle
<TValue>(value?: TValue) => void
Function to toggle the disclosure state:
  • When called with no arguments: toggles between open and closed
  • When called with a boolean: sets the state to that boolean value
  • Manages scroll locking if hasScrollControl is enabled

​
Usage

​
Basic Modal

import { useDisclosure } from "@zayne-labs/toolkit-react";

function ModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <div>
      <button onClick={onOpen}>Open Modal</button>
      
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>Modal content goes here</p>
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

import { useDisclosure } from "@zayne-labs/toolkit-react";

function ScrollLockModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure({
    hasScrollControl: true,
  });

  return (
    <div>
      <button onClick={onOpen}>Open Modal</button>
      
      {isOpen && (
        <div className="modal-overlay" onClick={onClose}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <h2>Modal with Scroll Lock</h2>
            <p>The page scroll is locked while this modal is open</p>
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

import { useDisclosure } from "@zayne-labs/toolkit-react";

function DropdownExample() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <div className="dropdown">
      <button onClick={() => onToggle()}>
        Menu {isOpen ? "▲" : "▼"}
      </button>
      
      {isOpen && (
        <ul className="dropdown-menu">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      )}
    </div>
  );
}

​
Initially Open State

import { useDisclosure } from "@zayne-labs/toolkit-react";

function InitiallyOpenExample() {
  const { isOpen, onClose } = useDisclosure({
    initialState: true,
  });

  return (
    <div>
      {isOpen && (
        <div className="banner">
          <p>Welcome! This banner is shown by default.</p>
          <button onClick={onClose}>Dismiss</button>
        </div>
      )}
    </div>
  );
}

​
Notes

  • All callback functions (onOpen, onClose, onToggle) are memoized for stable references
  • The returned API object is memoized and only updates when isOpen changes
  • When hasScrollControl is enabled, the hook uses the lockScroll utility from @zayne-labs/toolkit-core
  • Built on top of the useToggle hook for state management

Build docs developers (and LLMs) love

Get started for freeTalk to us