【トースト通知機能】React-Toastifyの使い方
【トースト通知機能】React-Toastifyの使い方
投稿日: 2025年04月05日
- React-Toastifyを使ってトースト通知を実装する方法を解説した。
- ToastContainerをルートのlayout.tsxに配置し、トーストの表示を全ページで可能にする。
- トーストのカスタマイズオプションや複数行の表示方法についても触れた。
はじめに
ポートフォリオにトースト通知を実装したので備忘録として残しておきます。
ユーザーがアクションを起こした際に、その処理結果を伝えるためによく使われる機能です。（↓こんな感じの通知です）
JS Gym でも、コードを下書き保存したときなどに表示されますよね。
使い方
インストール
公式npmページ
に記載されている以下のコマンドでインストールします。
npm install --save react-toastifyまず：app/layout.tsxにToastContainerを配置
まずは、React-Toastifyを使うために必要なコンポーネントとスタイルをインポートします。
ルートのlayout.tsxで読み込んでおくと、全ページで利用可能になります。
// app/layout.tsx
import React from 'react';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
{children}
<ToastContainer />
</body>
</html>
);
}これで、どのページでも toast 関数を呼び出すだけで通知が表示されます。
次に：使用したいページでの実装例
次に、実際にトースト通知を表示する方法です。
今回は、app/admin/categories/new/page.tsx でカテゴリーを新規作成する際に通知を出す例を紹介します。
// app/admin/categories/new/page.tsx
import React, { useState } from 'react';
import { toast } from 'react-toastify';
const NewCategoryPage: React.FC = () => {
const [categoryName, setCategoryName] = useState('');
const handleCreateCategory = async (e: React.FormEvent) => {
e.preventDefault();
try {
// ここにカテゴリー作成の処理（API呼び出しなど）が入ります
// 処理が成功した場合、成功通知を表示
toast.success('カテゴリーが正常に作成されました！');
setCategoryName('');
} catch (error) {
// エラーが発生した場合、エラー通知を表示
toast.error('カテゴリーの作成に失敗しました。');
}
};
return (
<div>
<h1>新規カテゴリー作成</h1>
<form onSubmit={handleCreateCategory}>
<label>
カテゴリー名:
<input
type="text"
value={categoryName}
onChange={(e) => setCategoryName(e.target.value)}
/>
</label>
<button type="submit">作成</button>
</form>
</div>
);
};
export default NewCategoryPage;カスタマイズについて
トースト通知はカスタマイズが可能です。通知の表示位置や自動閉じるまでの時間、アニメーションの設定など、ToastContainerやtoast関数にオプションを渡すことで細かく調整できます。
ToastContainer でカスタマイズする例
<ToastContainer
position="top-right" // 通知の表示位置を右上に設定
autoClose={5000} // 5000ミリ秒（5秒）後に自動で閉じる
hideProgressBar={false} // プログレスバーを表示（falseで表示）
newestOnTop={false} // 新しい通知を上に表示しない（falseの場合は順番通り）
closeOnClick // 通知をクリックすると閉じる
rtl={false} // テキストの表示を右から左にしない（falseの場合は通常表示）
pauseOnFocusLoss // ウィンドウのフォーカスが外れたときに自動閉じを一時停止しない
draggable // 通知をドラッグして位置を変更可能にする
pauseOnHover // マウスホバー時に自動閉じのタイマーを一時停止する
/>toast関数でカスタマイズする例
toast.success('操作が成功しました！', {
position: 'top-right',
autoClose: 3000,
});これらのカスタマイズオプションについては、React-Toastifyの公式ドキュメントに詳しく記載されているので、ぜひチェックしてみてください。
トースト内で改行を表示させる方法
また、トースト通知に複数行のテキストを表示させたい場合、toast 関数に文字列ではなく React 要素を渡すことで、<br /> タグなどを利用して改行を入れることができます。
toast(
<div>
1行目のテキスト<br />
2行目のテキスト
</div>
);以上、基本的な使い方とカスタマイズの方法についての解説でした。
おわりに
「React-Toastify」は可愛らしいトースト通知を簡単に実装できるライブラリなのでおすすめです。
似たような「react-hot-toast」というライブラリの使い方については、茜さんが記事を書いてくださっているので、気になる方は以下の記事も参考にしてみてください。
ちなみに、個人的な印象としては、
react-hot-toast → 軽量でシンプル
React-Toastify → 機能が豊富で、カスタマイズ性が高い
という感じです。
シェア！
