useDisclosure

useDisclosure 是一個提供了創建披露小部件所需的所有工具的 hook。披露小部件用於顯示或隱藏內容。此 hook 提供了控制內容可見性的狀態和函數。

useDisclosure 管理一個布林狀態及其 open、close 和 toggle 操作，並支援可選的 onOpen 和 onClose 回呼。此 hook 是建構模態框、抽屜、折疊面板等需要開啟/關閉狀態管理的 UI 元件的理想選擇。

使用場景

• 管理模態框或對話框的開啟和關閉狀態
• 控制側邊欄、抽屜或折疊面板的展開/收合
• 實作帶有開啟/關閉回呼的通知或 toast 系統

注意事項

• 回呼：onOpen 和 onClose 回呼在狀態改變時觸發，適合進行副作用操作（如焦點管理、分析追蹤）。
• 初始狀態：接受可選的初始開啟狀態（預設：false）。
• 相關 hooks：另請參閱 useBoolean 用於更簡單的布林切換，以及 useToggle 用於通用的雙值切換。

Usage

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

  return (
    <>
      <button onClick={onOpen}>開啟</button>
      <button onClick={onClose}>關閉</button>
      <p>{isOpen ? "開啟" : "關閉"}</p>
    </>
  );
}

API

UseDisclosureProps

useDisclosure

Returns

{ isOpen: boolean; onOpen: () => void; onClose: () => void; onOpenChange: () => void; isControlled: boolean; }

Arguments