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:

NameTypeDefaultDescription
isOpenbooleanfalseIf true, it sets the controlled component to its visible state.
onClosefunctionCallback function to set a falsy value for the isOpen parameter.
onOpenfunctionCallback function to set a truthy value for the isOpen parameter.
onTogglefunctionCallback 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

Type
boolean

id

Type
string

isOpen

Type
boolean

onClose

Type
(() => void)

onOpen

Type
(() => void)

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License