5KBだけで通知UIの悩みを解決するReact-Hot-Toast

はじめに

フォーム送信後の成功メッセージ、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

react-hot-toastの基本的な使い方

使い方はとてもシンプルです。React-Hot-Toastでは、アプリのルートに<Toaster />を1つ配置しておけば、あとはどこからでもtoast()を呼ぶだけで通知が表示されます。中心となる部分だけを抜き出すと次のとおりです。

import toast, { Toaster } from 'react-hot-toast'

function App() {
  return (
    <div>
      <Toaster position="top-center" />
      <button onClick={() => toast('こんにちは！')}>
        通知を表示
      </button>
    </div>
  )
}

実際に動かして確かめられるサンプルが以下です。ボタンを押すとtoast()が呼ばれ、その場でトーストが表示されます。

ボタンを押すだけで、画面上部にトーストがふわっと表示されます。表示・消去のタイミングやスタック管理はすべてライブラリ側が面倒を見てくれるので、自分でアニメーションを書く必要はありません。<Toaster position="top-center" />のpositionを"bottom-right"に変えると、通知の表示位置を画面右下に変更できます。

実践的なユースケース

react-hot-toastのtoast.success()/toast.error()で成功・エラーを色分けする

フォーム送信やAPI呼び出しの結果を、成功は緑、エラーは赤といった具合に一目で分かるように出し分けたいケースは非常に多いです。React-Hot-Toastのtoast.success()とtoast.error()を使えば、専用のアイコン付きで簡単に実現できます。

import toast from 'react-hot-toast'

function handleSave() {
  toast.success('保存しました')
}

function handleFail() {
  toast.error('保存に失敗しました')
}

toast.success()は緑のチェックアイコン付き、toast.error()は赤の❌アイコン付きで、それぞれ専用のスタイルで表示されます。アイコンを差し替えたい場合はtoast.success('保存しました', { icon: '💾' })のように第2引数へiconオプションを渡すだけでカスタマイズできます。

react-hot-toastのtoast.promise()で非同期処理の進行状況を表示する

API通信のような非同期処理では、「送信中→成功 or 失敗」という状態遷移をそのまま通知に反映させたいことがよくあります。React-Hot-Toastのtoast.promise()を使えば、Promiseの状態に応じたメッセージを1回の呼び出しで定義できます。

import toast from 'react-hot-toast'

toast.promise(fetchData(), {
  loading: '送信中...',
  success: '送信が完了しました',
  error: '送信に失敗しました',
})

ローディング中の表示から結果に応じたメッセージへ、通知が自動的に切り替わる様子を確認できます。toast.promise()が成功・失敗のハンドリングを内部で行ってくれるためif文を書く必要がなく、コード量もぐっと減ります。fakeApiCall()を実際のfetch()呼び出しに差し替えれば、そのままAPI通信の進捗表示として使えます。

react-hot-toastのtoast.custom()でカスタムデザインの通知を作る

デフォルトの見た目だけでなく、アプリのデザインに合わせて独自のレイアウトを表示したい場合はReact-Hot-Toastのtoast.custom()が便利です。任意のJSXをそのままトーストとしてレンダリングできます。

import toast from 'react-hot-toast'

toast.custom((t) => (
  <div style={{ opacity: t.visible ? 1 : 0 }}>
    🎉 カスタム通知です
  </div>
))

toast.custom()のコールバックが受け取るt.visibleを使えばフェードイン・フェードアウトの状態も取得できるため、独自アニメーションとの組み合わせも自由自在です。background: '#333'を自社ブランドカラーに変更したり、絵文字の代わりにアイコン画像を差し込んだりすれば、そのままデザインシステムに沿った通知コンポーネントとして使えます。

まとめ

React-Hot-Toastは、軽量なバンドルサイズと直感的なAPIで、通知UIにまつわる面倒な実装を一気に解消してくれるライブラリです。基本的なtoast()から、成功・エラーの出し分け、toast.promise()による非同期処理連携、toast.custom()によるフルカスタマイズまで、シンプルな書き方のまま幅広いユースケースに対応できます。

「通知を出したいだけなのに実装が重い」と感じているなら、まずは<Toaster />を1つ置いてみることから始めてみてください。