---
title: useDisclosure
description: "`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."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-disclosure
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-usedisclosure--basic
---

# 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.

```tsx
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}
    />
  </>
)
```

## Usage

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

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

```tsx
import { useDisclosure } from "@workspaces/ui"
```

```tsx
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](https://yamada-ui.com/docs/components/modal.md).

```tsx
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")}
    />
  </>
)
```

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"`.

```tsx
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")}
    />
  </>
)
```

## Used By Components & Hooks

- [ActionBar](https://yamada-ui.com/docs/components/action-bar.md): `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
- [Menu](https://yamada-ui.com/docs/components/menu.md): `Menu` is a component that displays a common dropdown menu.
- [Modal](https://yamada-ui.com/docs/components/modal.md): `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
- [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information.
- [Sidebar](https://yamada-ui.com/docs/components/sidebar.md): `Sidebar` is a component used to display a list of items in a sidebar.
- [Tooltip](https://yamada-ui.com/docs/components/tooltip.md): `Tooltip` is a component that displays short information, such as supplementary details for an element.
- [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format.