useDisclosure

useDisclosure is a hook that provides all the tools you need to create a disclosure widget. Disclosure widgets are used to show or hide content. This hook provides the state and functions to control the visibility of the content.

Usage

Live Editor

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

  return (
    <>
      <button onClick={onOpen}>Open</button>
      <button onClick={onClose}>Close</button>
      <p>{isOpen ? "Open" : "Close"}</p>
    </>
  );
};

Result

Close

API

UseDisclosureProps

Property	Description	Type	DefaultValue
isOpen	Whether the disclosure is open, if passed, it will be controlled	boolean	-
defaultOpen	default open state	boolean	-
onClose	Callback when disclosure is closed	() => void	-
onOpen	Callback when disclosure is opened	() => void	-
onChange	Callback when disclosure is changed	(isOpen: boolean | undefined) => void	-

useDisclosure

Returns

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

Arguments

Argument	Description	Type	DefaultValue
props	-	UseDisclosureProps | undefined	-