useDisclosure

useDisclosureは、一般的な開閉や切り替えのシナリオを処理するのに役立つカスタムフックです。Modal、Dialog、Drawerなどのコンポーネントを制御するために使用できます。

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

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

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

import { useDisclosure } from "@workspaces/ui"

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

コールバック関数を使う

コールバック関数を使う場合は、onOpenまたはonCloseに関数を設定します。これは、Modalなどのコンポーネントを開く前に、APIなどを実行するのに役立ちます。

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 Modal</Button>

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

デフォルトでは、コールバック関数の実行タイミングはonOpenまたはonCloseの実行前です。実行タイミングをonOpenまたはonCloseの実行後にする場合は、timingを"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 Modal</Button>

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。