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 コンポーネントを使用できますか？

はい、React-Toastify はトーストコンテンツとしてカスタム React コンポーネントをサポートしています。

通知を閉じるまで表示し続けるにはどうすればよいですか？

トーストオプションで `autoClose: false` を設定すると、通知が持続します。

既存のトーストを更新できますか？

はい、トーストの ID を使用して `toast.update(toastId, options)` を使用できます。

複数のトーストを同時に処理するにはどうすればよいですか？

`ToastContainer` の `limit` プロパティを使用して、同時通知を制御できます。

React-Toastify は SSR をサポートしていますか？

はい、特に Next.js のようなフレームワークでは、クライアントサイドのインポートとレンダリングを確保してください。