はじめに
フォーム送信後の成功メッセージ、API通信のエラー表示、非同期処理の進捗通知——どれもUIには欠かせない要素ですが、自前で実装しようとすると意外と面倒です。表示位置の管理、複数トーストのスタック、アニメーション、アクセシビリティ対応など、考えることは山ほどあります。
そんな「通知UIの面倒ごと」を、たった1つのコンポーネントと数行のAPI呼び出しだけで解決してくれるのがReact-Hot-Toastです。
React-Hot-Toastとは
React-Hot-Toastは、Reactアプリケーションに美しい通知（トースト）を追加するための軽量ライブラリです。<Toaster />をアプリのルートに置き、toast()を呼ぶだけで画面にメッセージを表示できます。
主な特徴
- 軽量設計 - gzip後5KB未満というコンパクトなバンドルサイズで、依存関係もありません
- シンプルなAPI -
toast("メッセージ")の1行で通知を出せる直感的な設計 - Promise API - 非同期処理のローディング・成功・失敗を1つの呼び出しでまとめて表現できる
- アクセシビリティ対応 - ARIAライブリージョンに対応し、スクリーンリーダーでも読み上げられる
- カスタマイズ性 - アイコン・スタイル・アニメーション・表示位置を自由に変更できる
インストール
npm install react-hot-toast
yarn add react-hot-toast
pnpm add react-hot-toast
基本的な使い方
使い方はとてもシンプルです。アプリのルートに<Toaster />を1つ配置しておけば、あとはどこからでもtoast()を呼ぶだけで通知が表示されます。
ボタンを押すだけで、画面上部にトーストがふわっと表示されます。表示・消去のタイミングやスタック管理はすべてライブラリ側が面倒を見てくれるので、自分でアニメーションを書く必要はありません。
実践的なユースケース
成功・エラーの色分け通知
フォーム送信やAPI呼び出しの結果を、成功は緑、エラーは赤といった具合に一目で分かるように出し分けたいケースは非常に多いです。toast.success()とtoast.error()を使えば、専用のアイコン付きで簡単に実現できます。
Promiseと連動した進行状況の表示
API通信のような非同期処理では、「送信中→成功 or 失敗」という状態遷移をそのまま通知に反映させたいことがよくあります。toast.promise()を使えば、Promiseの状態に応じたメッセージを1回の呼び出しで定義できます。
ローディング中の表示から結果に応じたメッセージへ、通知が自動的に切り替わる様子を確認できます。成功・失敗のハンドリングをif文で書く必要がないため、コード量もぐっと減ります。
カスタムデザインの通知
デフォルトの見た目だけでなく、アプリのデザインに合わせて独自のレイアウトを表示したい場合はtoast.custom()が便利です。任意のJSXをそのままトーストとしてレンダリングできます。
t.visibleを使えばフェードイン・フェードアウトの状態も取得できるため、独自アニメーションとの組み合わせも自由自在です。
まとめ
React-Hot-Toastは、軽量なバンドルサイズと直感的なAPIで、通知UIにまつわる面倒な実装を一気に解消してくれるライブラリです。基本的なtoast()から、成功・エラーの出し分け、toast.promise()による非同期処理連携、toast.custom()によるフルカスタマイズまで、シンプルな書き方のまま幅広いユースケースに対応できます。
「通知を出したいだけなのに実装が重い」と感じているなら、まずは<Toaster />を1つ置いてみることから始めてみてください。