usePromiseDisclosure
usePromiseDisclosure
は、一般的な開閉や切り替えのシナリオを非同期処理するのに役立つカスタムフックです。Modal
、Dialog
、Drawer
などのコンポーネントを制御するために使用できます。
インポート
import { usePromiseDisclosure } from "@yamada-ui/react"
使い方
onClose
が実行された場合、内部のPromise
はreject
を実行します。そのため、onOpen
をtry...catchやPromise.prototype.catchを使用して、エラーをハンドリングしてください。
編集可能な例
const { isOpen, onClose, onOpen, onSuccess } = usePromiseDisclosure() const onClick = async () => { try { // Subsequent processing will be blocked until `onSuccess` is executed. await onOpen() console.log("あるじゃねえか、サタン!!!") console.log("おめえはホントに世界の…") console.log("救世主かもな!!!!") } catch { console.error("地球は滅亡しました") } } return ( <VStack alignItems="start"> <Text>だ…大地よ海よ そして生きているすべての みんな…</Text> <Text>このオラにほんのちょっとずつだけ元気をわけてくれ…!!!</Text> <Button onClick={onClick}>わけない</Button> <Dialog size="2xl" cancel="わけない" header="ミスター・サタン" isOpen={isOpen} success="わける" onCancel={onClose} onClose={onClose} onSuccess={onSuccess} > <Text>き、きさまらいいかげんにしろーーーっ!!!</Text> <Text>さっさと協力しないかーーーっ!!!</Text> <Text> このミスター・サタンさまのたのみも、きけんというのかーーーっ!!! </Text> </Dialog> </VStack> )
GitHubでこのページを編集する