useDisclosure

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

Usage

即時編輯器

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

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

結果

關閉

API

UseDisclosureProps

參數名	描述	類型	預設值
isOpen	是否打开，传了则为受控	boolean	-
defaultOpen	默认打开状态	boolean	-
onClose	关闭时的回调	() => void	-
onOpen	打开时的回调	() => void	-
onChange	状态改变时的回调	(isOpen: boolean | undefined) => void	-

useDisclosure

Returns

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

Arguments

參數名	描述	類型	預設值
props	-	UseDisclosureProps | undefined	-