Back

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

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-righttop-centertop-leftbottom-rightbottom-centerbottom-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 のようなフレームワークでは、クライアントサイドのインポートとレンダリングを確保してください。

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers