Toast

一時的な通知を表示するトースト。プログラマティックなAPI(toast.success等)で呼び出し可能。

インストール

import { Toast } from "@ginga-ui/core";

基本的な使い方

ToastRegionをアプリのルートに1回だけ設置し、toast.showで通知を表示します。toast関数はクライアントのイベントハンドラから呼び出してください。

export function BasicExample() {
  return (
    <>
      <ToastRegion />
      <Button variant="filled" onPress={() => toast.show("通知が届きました")}>
        トーストを表示
      </Button>
    </>
  );
}

バリアント

toast.info、toast.success、toast.warning、toast.dangerで状態に応じた通知を表示できます。

export function VariantsExample() {
  return (
    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
      <Button
        variant="outline"
        onPress={() => toast.info("新しいバージョンが利用可能です")}
      >
        Info
      </Button>
      <Button
        variant="outline"
        onPress={() => toast.success("変更が保存されました")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onPress={() =>
          toast.warning("ストレージの空き容量が少なくなっています")
        }
      >
        Warning
      </Button>
      <Button
        variant="outline"
        onPress={() => toast.danger("データの読み込みに失敗しました")}
      >
        Danger
      </Button>
    </div>
  );
}

自動クローズ

timeoutオプションを指定すると自動的に閉じます。ホバーやフォーカス中はタイマーが一時停止します。

export function TimeoutExample() {
  return (
    <Button
      variant="filled"
      onPress={() =>
        toast.success("アップロード完了", {
          description: "5秒後に自動的に閉じます。",
          timeout: 5000,
        })
      }
    >
      自動で閉じるトースト
    </Button>
  );
}