はやと
【トースト通知機能】React-Toastifyの使い方
2025年04月05日
学習振り返り
Tips
見出しはありません
要約
ポートフォリオにトースト通知を実装したので備忘録として残しておきます。
ユーザーがアクションを起こした際に、その処理結果を伝えるためによく使われる機能です。（↓こんな感じの通知です）
JS Gym でも、コードを下書き保存したときなどに表示されますよね。
公式npmページ
に記載されている以下のコマンドでインストールします。
npm install --save react-toastifyまずは、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 → 機能が豊富で、カスタマイズ性が高い
という感じです。
本気で学ぶなら、ShiftB
本気で学ぶなら、ShiftB
コメント
まだコメントはありません。
