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.

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

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

    <Modal.Root
      body="だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！"
      cancel="わけない"
      open={open}
      success="わける"
      title="孫悟空"
      onCancel={onClose}
      onClose={onClose}
      onSuccess={onClose}
    />
  </>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

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

import { useDisclosure } from "@/components/ui"

import { useDisclosure } from "@workspaces/ui"

const { open, onOpen, onClose, onToggle } = useDisclosure()

Using Callback Functions

To use callback functions, assign a function to onOpen or onClose. This is useful for executing APIs or other logic before opening components such as Modal.

const { open, onClose, onOpen } = useDisclosure<string, string>({
  onClose: (value) => {
    console.log("onClose:", value)
  },
  onOpen: (value) => {
    console.log("onOpen:", value)
  },
})

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

    <Modal.Root
      body="だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！"
      cancel="わけない"
      open={open}
      success="わける"
      title="孫悟空"
      onCancel={() => onClose("This is arg")}
      onClose={() => onClose("This is arg")}
      onSuccess={() => onClose("This is arg")}
    />
  </>
)

If you use this code, you need to add "use client" to the top of the file.

By default, the callback functions are executed before onOpen or onClose. If you want the callbacks to be executed after onOpen or onClose, set the timing option to "after".

const { open, onClose, onOpen } = useDisclosure<string, string>({
  onClose: (value) => {
    console.log("onClose:", value)
  },
  onOpen: (value) => {
    console.log("onOpen:", value)
  },
  timing: "after",
})

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

    <Modal.Root
      body="だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！"
      cancel="わけない"
      open={open}
      success="わける"
      title="孫悟空"
      onCancel={() => onClose("This is arg")}
      onClose={() => onClose("This is arg")}
      onSuccess={() => onClose("This is arg")}
    />
  </>
)

If you use this code, you need to add "use client" to the top of the file.

Used By Components & Hooks

ActionBar is a component that is used to display a bottom action bar with a set of actions.

Menu is a component that displays a common dropdown menu.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Popover is a component that floats around an element to display information.

Sidebar is a component used to display a list of items in a sidebar.

Tooltip is a component that displays short information, such as supplementary details for an element.

Tree is a component used to display hierarchical data structures in an expandable tree format.