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, AlertDialog, 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#

Editable Example

Parameters#

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

NameTypeDescriptionDefault
defaultIsOpenboolean-
idstring-
isOpenboolean-
onClose(() => void)-
onOpen(() => void)-