useAsyncCallback
useAsyncCallbackは、非同期コールバックを管理するためのカスタムフックです。
インポート
import { useAsyncCallback } from "@yamada-ui/react"
使い方
編集可能な例
const [isLoading, onClick] = useAsyncCallback(async () => { await wait(3000) }, []) return ( <Button isLoading={isLoading} onClick={onClick}> Click me </Button> )
ローディングを併用する
ローディングを併用する場合は、loadingに"screen"や"page"などを設定します。
ローディングをもっと知りたい場合は、こちらをご覧ください。
編集可能な例
const [isLoading, onClick] = useAsyncCallback( async () => { await wait(3000) }, [], { loading: "page" }, ) return ( <Button isLoading={isLoading} onClick={onClick}> Click me </Button> )
コンフィグからカスタマイズする
アプリケーション全体でuseAsyncCallbackの実行時にローディングを併用したい場合は、コンフィグのloading.defaultComponentに"screen"や"page"を設定します。
編集可能な例
const customConfig = extendConfig({ loading: { defaultComponent: "page", }, }) function App() { const [isLoading, onClick] = useAsyncCallback(async () => { await wait(3000) }, []) return ( <Button isLoading={isLoading} onClick={onClick}> Click me </Button> ) } return ( <UIProvider config={customConfig}> <App /> </UIProvider> )
GitHubでこのページを編集する