useProcessing

useProcessing は処理状態を管理するためのカスタムフックです。

const { loading, start, finish } = useProcessing()

const onClick = () => {
  start()

  setTimeout(() => finish(), 3000)
}

return (
  <Button loading={loading} onClick={onClick}>
    Click me
  </Button>
)

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

使い方

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

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

import { useProcessing } from "@workspaces/ui"

const { loading, start, finish } = useProcessing()