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

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