React-toastifyをインストールすると、アラート機能を簡単に実装することができます。
React-toastifyをインストール
npm install react-toastify
# or
yarn add react-toastify使い方
基本的にはドキュメントに書かれている通りに実装すれば問題なく動きます。
スポットで使いたい場合はドキュメント通り以下のように記載するとtoastが使えます
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';
function App() {
const notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
<ToastContainer />
</div>
);
}最上位のコンポーネントで読み込む
Reactの最上位のコンポーネントでToastContainerと、toastifyのcssスタイル（ReactToastify.css）をインポートするとプロジェクト内の全ての子コンポーネントでtoastが使えるようになり、ページを跨いでアラートを表示できるようにもなります。
//一例
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import App from "./App";
ReactDOM.render(
<RecoilRoot>
<ToastContainer />
<BrowserRouter>
<App />
</BrowserRouter>
</RecoilRoot>,
document.getElementById("app")
);
最上位のコンポーネントでToastContainerとスタイルをインポートしているので子コンポートでは以下のように呼び出すことができます。
import React from "react";
import { toast } from "react-toastify";
const Hoge = () => {
const notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
</div>
);
};
export default Hoge;
共通化
保存、更新、削除等、定型文で何度も使い回すアラートが出てくるかと思いますので以下のように共通化しておくと便利です。
import { toast } from "react-toastify";
const useNotification = () => {
const saved = () => {
toast.success("保存しました。", {
position: "top-right", //ポジションを指定。top-right, top-left, top-center, bottom-left, bottom-right, bottom-centerから選択
autoClose: 3000, //設定したミリ秒経過時にclose defaultは5000
hideProgressBar: true, //プログレスバーを制御
closeOnClick: true, //クリックで消せるか否かを制御
pauseOnHover: true, //ホバーするとミリ秒の進行が止まる
draggable: true, //ドラッグしながら消すことができる
progress: undefined, //プログレスバーの長さを制御 undefinedで問題なし
theme: "colored", //背景をlight,dark,cloredから選択
});
};
const updated = () => {
toast.info("更新しました。", {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
};
const deleted = () => {
toast.error("削除しました。", {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
};
//任意のエラーメッセージを表示できるように引数を持たせる
const error = (msg: string) => {
toast.warning(msg, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
};
const success = (msg: string) => {
toast.success(msg, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
};
return { saved, updated, deleted, error, success };
};
export default useNotification;import React from "react";
import useNotification from "@/lib/useNotification";
const Hoge = () => {
const { saved, error } = useNotification(); //使いたいアラートメッセージを呼び出す
return (
<div>
<button onClick={saved()}>Saved !</button>
<button onClick={error("エラーです！")}>Error !</button>
</div>
);
};
export default Hoge;
関連記事
