アプリ内通知（Toast）

Toast とは#

通知ポップアップのことを Toast と呼びます。フォームの送信が成功したり失敗した時にメッセージを表示する目的で使われます。

以下のライブラリを使うことで簡単に通知を実装できます。

インストール#

ターミナル
npm install react-hot-toast

実装#

_app.tsx に Toast を設置することでアプリケーション全体において任意のタイミングで通知を出せるようになります。

pages/_app.tsx
import { Toaster } from 'react-hot-toast';

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      {/* 追加 */}
      <Toaster />
    </div>
  );
};

通知を出したいコンポーネントで以下のように使用します。

import toast from 'react-hot-toast';

const submit = () => {
  toast.success('フォームの送信に成功しました');
}

種類#

成功や失敗のステータスに合わせてメソッドを切り分けます。

// ノーマル

// 成功時
toast.success('処理に成功しました');

// 成功時
toast.error('エラーが発生しました');


// ローディング中
toast.loading('処理中...');