useDisclosure is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as Modal, AlertDialog, Drawer.


import { useDisclosure } from '@dwarvesf/react-hooks'

Return value#

The useDisclosure hook returns an object with the following fields:

isOpenbooleanfalseIf true, it sets the controlled component to its visible state.
onClosefunction_Callback function to set a falsy value for the isOpen parameter.
onOpenfunction_Callback function to set a truthy value for the isOpen parameter.
onTogglefunction_Callback function to toggle the value of the isOpen parameter.


function Example() {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<Button onClick={onOpen}>Open Drawer</Button>
<Drawer placement="right" onClose={onClose} isOpen={isOpen}>
<DrawerOverlay />
<DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>


The useDisclosure hook accepts an optional object with the following properties:

defaultIsOpenbooleanfalseThe default value.
onClose() => void_The callback when the isOpen is set to false.
onOpen() => void_The callback when the isOpen is set to true.
Edit this page

Made with ❤️ by Dwarves Foundation