React-toastifyはユーザーに対してエラーその他アラートを表示させるときに便利な機能です。トーストメッセージやトーストアラート、単にトーストと呼ばれることもあります。本稿ではReactのプロジェクトでReact-toastifyを使う方法をご紹介します。
下記は、私の手元のプロジェクトにおけるトーストの完成イメージ（gifファイル）です。メールとパスワードを空欄でサインインしようとすると、右上にエラーのトーストが表示されます（本gifではデモの目的で同じ動きを3回繰り返しますが、実際は1回で止まります）。
インストールとApp.jsでの設定
まずはReact-toastifyをnpmインストールします（下記上段）。yarnインストールの方は下段です。
$ npm install react-toastify
$ yarn add react-toastify
続いて、最上位のコンポーネントであるApp.jsでToastContainerと、toastifyのcssスタイル（ReactToastify.css）をインポートします。ToastContainerを含むコンポーネントの小コンポーネントでtoastが動くので、App.jsにToastConatinerを配置するとプロジェクト内の全ての子コンポーネントでtoastが使えます。他方、公式のドキュメンテーションではToastContainerとtoastを同じコンポーネント（Appl.jsではない小コンポーネント）でインポートしています。例えば複数ページあるWebアプリで、ページ毎にトーストの表示方法を変えたい場合は、公式ドキュメントの方法を採用します。
下記はApp.jsにgithub上の公式ドキュメントからコピーしたToastContainerを貼り付けたものです。positionからthemeまでは後述オプションの章で詳しくご紹介します。
import React from "react";
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
function App() {
return (
< div className="App">
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
/>
{/* Same as */}
<ToastContainer />
</ div>
);
}
export default App;
コンポーネントでの設定
App.jsでToastContainerの設定を終えた後、各コンポーネントで実際にトースト（toast）を使用します。下記SingUp.jsは、私の別の記事（メールとパスワードによるユーザー認証の実装方法 – Firebase + React）で紹介したtry catch構造でのtoastの使用例です。ユーザーのサインアップの入力に対して、tryブロックの中でバックエンドへのリクエストと応答を処理します。tryブロックでの処理に失敗したとき、catchブロックでエラーを処理、本件の場合はトーストでユーザーにエラーを表示します。
import { useState } from "react";
import { toast } from "react-toastify";
// 本稿に無関係なインポートを省略
function SignUp() {
const [formData, setFormData] = useState({
// 省略
});
// 本稿に無関係なコードを省略
const onChange = (e) => {
// 省略
});
};
const onSubmit = async (e) => {
e.preventDefault();
try {
// 省略
} catch (error) {
toast.error("Something went wrong");
}
};
return (
<div>
// 省略
</div>
);
}
export default SignUp;
上から2行目でtoastをreact-toastifyからインポートしています。そしてcatchブロックの中でインポートしたtoastを記述します（下記に抜粋）。”Something went wrong”の部分はユーザーに表示するエラーメッセージの部分で、任意のメッセージを記述可能です。
toast.error(“Something went wrong”);
SignUpコンポーネント全体の構造について知りたい方は、先ほどの別記事へのリンクをご覧ください（別記事ではtoastを使わず）。
React-toastifyのオプション
先ほどApp.jsでご紹介したコードの、positionからthemeまでがオプションです。各オプションの意味と設定方法を以降順に説明します。また、これらの設定はgithub上の公式ドキュメントで各オプションのチェックボックスをクリックしながら設定することもできます（完成したコードをコピペ可）。
position
文字通りトーストが表示されるポジションを指定します。top-right, top-left, top-center, bottom-left, bottom-right, bottom-centerから選べます。
autoClose
トーストはautoCloseで設定したミリ秒経過時に閉じます。デフォルトでは5,000ミリ秒（5秒）です。反対にautoCloseの設定を完全に外すことができないので、外したい場合はミリ秒を極端に長く設定します。また、トーストはユーザーがクリックして閉じることも可能です（後述、closeOnClick）。
hideProgressBar
autoCloseで設定したミリ秒の経過を、プログレスバーで表示する機能です。上記のデフォルト設定では表示されますが、={false}の部分を削除して、単にhideProgressBarとすると非表示になります。
newestOnTop
複数のトーストが同時に表示される場合に、トーストを重ねるか否かを選択できます。デフォルトでは重ねず上下に表示されます。
closeOnClick
トーストをクリックで消せるか否かを設定します。デフォルトでは可能です。不可としたい場合は、={false}を追記します。
続く4つのオプション（rtl, pauseOnFocusLoss, draggable, pauseOnHover）はやや細かいので、またUXの観点からはデフォルト値のままがいいと思いますので、関心のとくに高い方以外は読み飛ばして最後のthemeに進んでください。
rtl
ritht to leftの略です。トースト内で表示される文字はデフォルトでは左寄せですが（rtl={false}）、文字を右寄せにしたい場合は={false}を外して単にrtlとします。右寄せは見にくいので、デフォルトの左寄せがお勧めです。
pauseOnFocusLoss
ユーザーのフォーカスが外れた場合、すなわち、ユーザーがブラウザの外側をクリックして別のことを始めた場合に、autoCloseで設定したミリ秒の経過を一時停止するオプションです。デフォルトの一時停止（有効）がお勧めです。
draggable
トーストをドラッグしながら消すことができます。画面外に押しやるイメージです。こちらもデフォルト値（有効）のままでいいと思います。
pauseOnHover
トーストをホバーすると（マウスが上に重なると）、autoCloseで設定したミリ秒の進行が止まります。
theme
デフォルトでは白い背景のトーストが表示されますが、ダークモードにもすることができます。ダークモードにする場合はtheme=”dark”とします。
toast.success
これまでご紹介したのはエラーメッセージを表示するためのtoastでしたが、toast.error(“テキスト”)の代わりにtoast.success(“テキスト”)とすることで、下記のように処理が成功したときのtoastも表示させることもできます。違い下段の色と、テキストの左側のアイコンです。
今日も最後まで読んで頂きありがとうございました。
