useDisclosure

useDisclosure is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as Modal, Dialog, Drawer, etc.

Source @yamada-ui/use-disclosure

Import

import { useDisclosure } from "@yamada-ui/react"

Copied!

Usage

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open Dialog</Button>

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="Son Goku"
      cancel="No way"
      onCancel={onClose}
      success="Share"
      onSuccess={onClose}
    >
      Earth, sea, and all living things... Please share a little bit of your
      energy with me...!!!
    </Dialog>
  </>
)

Copied!

Using Callback Functions

By defining a callback function as an argument, you can call the callback function when executing onOpen or onClose. This is useful for executing things like APIs before opening components such as modals.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure({
  onOpen: (...args: string[]) => {
    console.log("Args:", args)
  },
  onClose: (...args: string[]) => {
    console.log("Args:", args)
  },
})

return (
  <>
    <Button onClick={() => onOpen("This is arg")}>Open Dialog</Button>

    <Dialog
      isOpen={isOpen}
      onClose={() => onClose("This is arg")}
      header="Son Goku"
      cancel="No way"
      onCancel={() => onClose("This is arg")}
      success="Divide"
      onSuccess={() => onClose("This is arg")}
    >
      Earth, sea, and all living things... Please share a little bit of energy
      with me...!!!
    </Dialog>
  </>
)

Copied!

By default, the callback function is called before executing onOpen or onClose.

If you want to call the callback function after executing onOpen or onClose, set after to timing.

Editable example

const { isOpen, onOpen, onClose } = useDisclosure({
  onOpen: (...args: string[]) => {
    console.log("Args:", args)
  },
  onClose: (...args: string[]) => {
    console.log("Args:", args)
  },
  timing: "after",
})

return (
  <>
    <Button onClick={() => onOpen("This is arg")}>Open Dialog</Button>

    <Dialog
      isOpen={isOpen}
      onClose={() => onClose("This is arg")}
      header="Son Goku"
      cancel="No way"
      onCancel={() => onClose("This is arg")}
      success="Divide"
      onSuccess={() => onClose("This is arg")}
    >
      Earth, sea, and all living things... Please share a little bit of energy
      with me...!!!
    </Dialog>
  </>
)

Copied!

Edit this page on GitHub

PrevioususeColorModeValue NextuseDynamicAnimation