Toast

どこからでも出せます

トーストの状態は React の外で持っています。深い階層からでも、React の外 （読み込みの失敗処理など）からでも、showToast() をそのまま呼べます。

showToast({ message: '保存しました', tone: 'success' });

コンテキストでは配っていません。配ると、呼び出す場所がすべて Provider の内側に なければならず、React の外からは出せなくなります。

出ているトーストを読みたいときは useToast() を使います。出すだけなら showToast() で足ります。

<Toaster /> をアプリに1つだけ置いてください。

読み上げの領域は、文言より先に描かれています

1つも出ていないときも領域だけは描いています。後から領域ごと現れると、 読み上げは中身の追加に気づきません。

見た目には何も出ない誤りなので、テストが測っています。

調子は4つです

warning は「在庫が足りず一部だけ入った」「保存はしたが同期は後で」のようなときに使ってください。

danger で出すと取り消しや再試行を促す文面と混ざり、default で出すと求めたとおり済んだ場合と見分けが付きません。

info は持っていません。知らせは作業の結果を伝えるものなので、default と役割が重なります。

すぐに気づいてほしい内容には向きません

読み上げの領域は1つだけで、polite（読み終わるのを待つ）です。 重要度で領域を分けると、重要なものが上・そうでないものが下と並び順が固定され、 出た順に読めなくなります。

読み上げに割り込んででも伝えたい内容は、トーストではなく Modal を使ってください。

表示時間の既定は4秒です

何も渡さなければ 4秒で消えます。この値はトークンの滞在時間スケールから来ていて、 コンポーネントに数値を直接書いていません。

3秒を下回ると読み切れません。 長い文言や、読んでから操作するものは スケールの長い側（5.7秒・8秒）を渡してください。10秒を超えると、 気づかないまま消えたのか出ていないのかが分からなくなります。

読み終わるまで残したいものは duration: null を渡してください。

ポインタが乗っている間は消しません。 離れたらもう一度はじめから数えます—— 残り時間を持つと時計が2箇所に増えるためで、長く出る側へ倒れます。

トークンを入れていない環境ではスケールを読めません。そのときは消さない側に倒します ——適当な数値を書くと、スケールに無い値が1つ増えてしまうためです。

<Toaster /> はアプリに1つだけ置いてください

2つ置いても先に置いた方しか描かれません。 2つ目は何もしません。

そうしているのは、両方が描くと読み上げの領域が2つになり、同じ文言が2回読まれる ためです。先に置いた方が外れたときは、残っている方が引き継ぎます。

最前面の層に出ます

overflow を持つ祖先があっても切り取られません。枠は何も塗らず押せないので、 後ろのページはそのまま押せます。

残り時間をバーで示します

トーストの下にバーが出て、満ちた状態から空へまっすぐ減ります。 加減速は付けていません——時間そのものを表しているので、速さが変わると嘘になります。

ポインタを乗せているあいだは止まります。外すと、止めた続きから数え直します。

duration: null を渡したものには出ません。消えないものに残り時間はありません。

動きを減らす設定（prefers-reduced-motion）でも止まりません。 これは装飾ではなく、 あと何秒で消えるかという情報です。止めると読み取れなくなります。

読み上げには出しません。時間の経過を読ませると、文言が繰り返し流れます。

表示と消去にアニメーションが付きます

現れるときは薄れながら少し上がり、消えるときは薄れながら高さが縮みます。 高さを縮めるのは、後ろに並んでいるトーストが跳ねて動かないようにするためです。

閉じてもその場では消えません。アニメーションが終わってから DOM から外れます。

動きを減らす設定ではアニメーションが止まります。 これは装飾なので、 無くても内容は伝わります。ただし閉じたトーストはすぐに外れます—— 止めた結果いつまでも残ってしまうと困るためです。

残り時間を数えている場所は1つだけです

消えるタイミングはバーのアニメーションそのものが決めています。 別にタイマーを持っていません。バーが止まれば消えるのも止まり、 再開すれば続きから進みます。2つがずれることがありません。