useDisclosure

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

インポート

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

Copied!

使い方

編集可能な例

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

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

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

Copied!

コールバック関数を使う

引数にコールバック関数を定義することで、onOpenやonCloseを実行したときに、コールバック関数を呼び出します。これは、モーダルなどのコンポーネントを開く前に、APIなどを実行するのに役立ちます。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure({
  onOpen: (...args: string[]) => {
    console.log("Args:", args)
  },
  onClose: (...args: string[]) => {
    console.log("Args:", args)
  },
})

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

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

Copied!

デフォルトでは、onOpenやonCloseの実行前にコールバック関数を呼び出されます。

コールバック関数をonOpenやonCloseの実行後にしたい場合は、timingにafterを設定します。

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure({
  onOpen: (...args: string[]) => {
    console.log("Args:", args)
  },
  onClose: (...args: string[]) => {
    console.log("Args:", args)
  },
  timing: "after",
})

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

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

Copied!

GitHubでこのページを編集する

前useColorModeValue 次useDynamicAnimation