---
title: usePromiseDisclosure
description: "`usePromiseDisclosure`は、一般的な開閉や切り替えのシナリオを非同期処理するのに役立つカスタムフックです。`Modal`、`Dialog`、`Drawer`などのコンポーネントを制御するために使用できます。"
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-usepromisedisclosure--basic
---

```tsx
const { open, onClose, onOpen, onSuccess } = usePromiseDisclosure()

const onClick = async () => {
  try {
    await onOpen()

    console.log("やるじゃねえか、サタン!!!")
    console.log("おめえはホントに世界の…")
    console.log("救世主かもな!!!!")
  } catch {
    console.error("地球は滅亡しました")
  }
}

return (
  <VStack alignItems="flex-start">
    <VStack gap="0">
      <Text>だ…大地よ海よ　そして生きているすべての　みんな…</Text>
      <Text>このオラにほんのちょっとずつだけ元気をわけてくれ…！！！</Text>
    </VStack>

    <Button onClick={onClick}>わけない</Button>

    <Modal.Root
      size="2xl"
      body={
        <VStack gap="0">
          <Text>き、きさまらいいかげんにしろーーーっ!!!</Text>
          <Text>さっさと協力しないかーーーっ!!!</Text>
          <Text>
            このミスター・サタンさまのたのみも、きけんというのかーーーっ!!!
          </Text>
        </VStack>
      }
      cancel="わけない"
      open={open}
      success="わける"
      title="ミスター・サタン"
      onCancel={onClose}
      onClose={onClose}
      onSuccess={onSuccess}
    />
  </VStack>
)
```

## 使い方

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

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

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

```tsx
const { open, onClose, onOpen, onSuccess } = usePromiseDisclosure()
```