トーストプロバイダToastProviderExperimental

トーストの表示と管理を行います。

プレビュー

状態とバリエーション

成功通知をまとめて扱う

保存や更新の完了は Provider 経由で画面右上に集約します。

長めに出す失敗通知

失敗通知はユーザーが読めるように、成功通知より長めに表示できます。

ラベルのローカライズ

閉じるボタンのラベルは Provider に渡して全 Toast に反映します。

補足＋操作つき（オブジェクト形）

showToast にオブジェクトを渡すと description（2行目）と action（操作ボタン）を足せます。位置引数の呼び出しはそのまま使えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
childrenReact.ReactNode-useToast を呼び出すアプリ領域です。
labels.closestring'Close notification'Toast の閉じるボタンに使うラベルとツールチップです。
showToast(message, type?, duration?) | (options: ShowToastOptions)-useToast から取得する通知表示関数。従来の位置引数に加え、リッチ表示用のオブジェクト形も受け付けます: { message, type?, duration?, description?, action? }。

使い方

import { Button, ToastProvider, useToast } from "@gunjo/ui"

function ToastActions() {
  const { showToast } = useToast()

  return (
    <div className="flex flex-wrap gap-2">
      <Button onClick={() => showToast("設定を保存しました。", "success")}>
        成功通知
      </Button>
      <Button
        variant="destructive"
        onClick={() => showToast("保存できませんでした。接続を確認してください。", "error", 4500)}
      >
        失敗通知
      </Button>
      <Button variant="outline" onClick={() => showToast("同期をバックグラウンドで続行しています。", "info")}>
        情報通知
      </Button>
    </div>
  )
}

export function ToastProviderExample() {
  return (
    <ToastProvider labels={{ close: "通知を閉じる" }}>
      <ToastActions />
    </ToastProvider>
  )
}

使用コンポーネント

ToastProviderToastButton

関連コンポーネント

NotificationCenterBannerAlert