boolean
useDisclosure
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,
Drawer, etc.
Import#
import { useDisclosure } from "@chakra-ui/react"
Return value#
The useDisclosure
hook returns an object with the following fields:
Name | Type | Default | Description |
---|---|---|---|
isOpen | boolean | false | If true , it sets the controlled component to its visible state. |
onClose | function | Callback function to set a falsy value for the isOpen parameter. | |
onOpen | function | Callback function to set a truthy value for the isOpen parameter. | |
onToggle | function | Callback function to toggle the value of the isOpen parameter. |
Usage#
function Example() {const { isOpen, onOpen, onClose } = useDisclosure()return (<><Button onClick={onOpen}>Open Drawer</Button><Drawer placement="right" onClose={onClose} isOpen={isOpen}><DrawerOverlay /><DrawerContent><DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader><DrawerBody><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></DrawerBody></DrawerContent></Drawer></>)}
function Example() {const { isOpen, onOpen, onClose } = useDisclosure()return (<><Button onClick={onOpen}>Open Drawer</Button><Drawer placement="right" onClose={onClose} isOpen={isOpen}><DrawerOverlay /><DrawerContent><DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader><DrawerBody><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></DrawerBody></DrawerContent></Drawer></>)}
Parameters#
The useDisclosure
hook accepts an optional object with the following
properties:
defaultIsOpen
defaultIsOpen
Type
id
id
Type
string
isOpen
isOpen
Type
boolean
onClose
onClose
Type
(() => void)
onOpen
onOpen
Type
(() => void)
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web