useDisclosure

useDisclosure is a custom hook 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/core";

import { useDisclosure } from "@chakra-ui/core";

Return value#

The useDisclosure hook returns an object with the following fields:

Name	Type	Default	Description
`isOpen`	`boolean`	`false`	If `true`, it sets the component to it's visible state.
`onClose`	`function`		Function that sets `isOpen` to `false`.
`onOpen`	`function`		Function that sets `isOpen` to `true`.
`onToggle`	`function`		Function that toggles `isOpen` between `true` and `false`

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>
    </>
  );
}

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

useDisclosure

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Return value#

Usage#

Import#