React で Toastify を使用してトーストメッセージを作成する方法

トースト通知は、ユーザーの作業の流れを妨げることなく情報を提供する、素早く非侵入的なアラートです。React-Toastify は、使いやすさとカスタマイズのバランスを取りながら、これらの通知の実装を簡素化します。
重要なポイント
- React-Toastify はトースト通知の追加を簡素化します。
- 複数の通知タイプ(成功、エラー、警告、情報)をサポートしています。
- 位置とスタイルのカスタマイズが可能です。
- プロミスベースの通知などの高度な機能を提供します。
React-Toastify を始める
インストール
React-Toastify をインストールします:
npm install react-toastify
# または
yarn add react-toastify
基本的なセットアップ
必要なコンポーネントと CSS をインポートします:
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
メインの App に ToastContainer
を配置します:
function App() {
return (
<div>
<button onClick={() => toast(""Hello, Toastify!"")}>Notify</button>
<ToastContainer />
</div>
);
}
トースト通知のタイプ
明確さのために特定のトーストタイプを使用します:
- 成功:
toast.success(""正常に保存されました!"");
- エラー:
toast.error(""エラーが発生しました!"");
- 警告:
toast.warning(""入力を確認してください!"");
- 情報:
toast.info(""更新が利用可能です!"");
- デフォルト:
toast(""中立的なメッセージ"");
トースト通知のカスタマイズ
位置の設定
トーストの位置をカスタマイズします:
toast(""メッセージ"", { position: ""bottom-center"" });
位置には top-right
、top-center
、top-left
、bottom-right
、bottom-center
、bottom-left
があります。
スタイリング
カスタムスタイルを適用します:
toast(""スタイル付きトースト"", { className: ""custom-toast"" });
CSS の例:
.custom-toast {
background: navy;
color: white;
border-radius: 4px;
}
条件付きスタイリング
タイプに基づいてスタイルを設定します:
const notify = (type, message) => {
toast[type](message, { className: `${type}-toast` });
};
高度な機能
プロミスベースのトースト
非同期操作をシームレスに処理します:
const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
pending: ""読み込み中..."",
success: ""正常に読み込まれました!"",
error: ""データの読み込みに失敗しました。""
});
カスタムコンテンツ
React コンポーネントを含めることができます:
toast(<div>カスタム HTML コンテンツ <button onClick={() => alert('クリックされました!')}>クリック</button></div>);
通知センター
通知を簡単に追跡できます:
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
const NotificationCenter = () => {
const { notifications, markAllAsRead } = useNotificationCenter();
return (
<div>
<button onClick={markAllAsRead}>すべて既読にする</button>
{notifications.map(n => <div key={n.id}>{n.content}</div>)}
</div>
);
};
ベストプラクティス
- 適度に使用する: ユーザーに過剰な情報を与えないようにします。
- 適切なタイプを選択する: メッセージの意図を明確に伝えます。
- 表示時間を適切に設定する: 重要なメッセージはより長く表示する必要があります。
- アクセシビリティ: 読みやすいコンテンツと明確なコントラストを確保します。
- 簡潔なメッセージ: 必要なことを明確に示します。
完全な実装例
import React, { useState } from ""react"";
import { ToastContainer, toast } from ""react-toastify"";
import ""react-toastify/dist/ReactToastify.css"";
function ProfileForm() {
const [data, setData] = useState({ username: """", email: """" });
const handleSubmit = (e) => {
e.preventDefault();
if (!data.username || !data.email) {
toast.warning(""すべてのフィールドが必要です!"");
return;
}
const saveData = new Promise((resolve, reject) => {
setTimeout(() => {
data.email.includes(""@"") ? resolve() : reject();
}, 1500);
});
toast.promise(saveData, {
pending: ""保存中..."",
success: ""プロフィールが更新されました!"",
error: ""無効なメールアドレスです!""
});
};
return (
<form onSubmit={handleSubmit}>
<input
type=""text""
placeholder=""ユーザー名""
value={data.username}
onChange={(e) => setData({ ...data, username: e.target.value })}
/>
<input
type=""email""
placeholder=""メールアドレス""
value={data.email}
onChange={(e) => setData({ ...data, email: e.target.value })}
/>
<button type=""submit"">送信</button>
<ToastContainer />
</form>
);
}
結論
React-Toastify は、React アプリケーションで効果的で控えめな通知を作成するのに役立ちます。その単純さと柔軟性により、迅速な統合が可能になると同時に、アプリのニーズに合わせた深いカスタマイズも可能です。
よくある質問
はい、React-Toastify はトーストコンテンツとしてカスタム React コンポーネントをサポートしています。
トーストオプションで `autoClose: false` を設定すると、通知が持続します。
はい、トーストの ID を使用して `toast.update(toastId, options)` を使用できます。
`ToastContainer` の `limit` プロパティを使用して、同時通知を制御できます。
はい、特に Next.js のようなフレームワークでは、クライアントサイドのインポートとレンダリングを確保してください。