useLoading

useLoadingは、アプリケーションのローディングを制御するカスタムフックです。

インポート

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

Copied!

使い方

useLoadingは、screen・page・background・customのインスタンスを返します。インスタンスには、いくつかのメソッドが含まれています。

isLoading: ローディングアニメーション中かどうかを取得します。
start: ローディングアニメーションを開始します。
update: ローディングアニメーションの情報を更新します。
finish: ローディングアニメーションを終了します。

customは、デフォルトのコンフィグで設定されていません。カスタムローディングを設定したい場合は、こちらをご覧ください。

編集可能な例

const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start()

    await wait(5000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start()

    await wait(5000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start()

    await wait(5000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start screen loading</Button>
    <Button onClick={onLoadingPage}>Start page loading</Button>
    <Button onClick={onLoadingBackground}>Start background loading</Button>
  </Wrap>
)

Copied!

ローディングをもっと学びたい場合は、こちらをご覧ください。

タイムアウトを付与する

通信などのケースでは、タイムアウトを付与する必要があります。その場合は、durationを使います。

編集可能な例

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button onClick={() => screen.start({ duration: 5000 })}>
      Start screen loading
    </Button>
    <Button onClick={() => page.start({ duration: 5000 })}>
      Start page loading
    </Button>
    <Button onClick={() => background.start({ duration: 5000 })}>
      Start background loading
    </Button>
  </Wrap>
)

Copied!

メッセージを付与する

ローディングにメッセージを付与する場合は、messageを使います。

編集可能な例

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button
      onClick={() => screen.start({ message: "Loading", duration: 5000 })}
    >
      Start screen loading
    </Button>
    <Button onClick={() => page.start({ message: "Loading", duration: 5000 })}>
      Start page loading
    </Button>
    <Button
      onClick={() => background.start({ message: "Loading", duration: 5000 })}
    >
      Start background loading
    </Button>
  </Wrap>
)

Copied!

messageは、JSXエレメントを渡せます。

編集可能な例

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button
      onClick={() =>
        screen.start({
          message: <Text color="primary">Loading</Text>,
          duration: 5000,
        })
      }
    >
      Start screen loading
    </Button>
    <Button
      onClick={() =>
        page.start({
          message: <Text color="primary">Loading</Text>,
          duration: 5000,
        })
      }
    >
      Start page loading
    </Button>
    <Button
      onClick={() =>
        background.start({
          message: <Text color="primary">Loading</Text>,
          duration: 5000,
        })
      }
    >
      Start background loading
    </Button>
  </Wrap>
)

Copied!

メッセージを更新する

メッセージを更新する場合は、メソッドのupdateを使用してオプションを渡します。

編集可能な例

const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start({ message: "Loading" })

    await wait(3000)

    screen.update({ message: "Please wait" })

    await wait(3000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start({ message: "Loading" })

    await wait(3000)

    page.update({ message: "Please wait" })

    await wait(3000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start({ message: "Loading" })

    await wait(3000)

    background.update({ message: "Please wait" })

    await wait(3000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start screen loading</Button>
    <Button onClick={onLoadingPage}>Start page loading</Button>
    <Button onClick={onLoadingBackground}>Start background loading</Button>
  </Wrap>
)

Copied!

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

前useInterval 次useLocalStorage