react-toastify は、React アプリケーションで簡単に通知（トースト）を表示するためのライブラリです。使いやすく、カスタマイズ性も高いため、多くの開発者に利用されています。以下に、react-toastify の基本的な使い方をステップバイステップで説明します。
1. インストール
まず、プロジェクトに react-toastify をインストールします。npm または yarn を使用できます。
# npm を使用する場合
npm install react-toastify
# yarn を使用する場合
yarn add react-toastify2. 基本的な設定
インストールが完了したら、アプリケーションで react-toastify を設定します。一般的には、アプリケーションのエントリーポイント（例: App.js）で設定します。
例: App.js
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
const notify = () => toast("デフォルトの通知!");
return (
<div>
<h1>react-toastify の使い方</h1>
<button onClick={notify}>通知を表示</button>
<ToastContainer />
</div>
);
}
export default App;説明
- インポート
ToastContainer: 通知を表示するコンテナコンポーネント。toast: 通知をトリガーする関数。- CSS ファイルのインポート: デフォルトのスタイルを適用します。
- 通知を表示する関数
notify関数内でtoastを呼び出し、通知メッセージを指定します。
- コンポーネントのレンダリング
- ボタンをクリックすると
notify関数が実行され、通知が表示されます。 <ToastContainer />はアプリケーション内のどこにでも配置できますが、通常はアプリケーションのルートに配置します。
- ボタンをクリックすると
3. 通知の種類
react-toastify では、さまざまな種類の通知を簡単に表示できます。
成功通知
toast.success("成功しました!");エラー通知
toast.error("エラーが発生しました!");警告通知
toast.warn("警告メッセージ");情報通知
toast.info("情報メッセージ");カスタム通知
カスタムコンポーネントを使用して通知をカスタマイズすることもできます。
const CustomToast = ({ closeToast }) => (
<div>
<h4>カスタム通知</h4>
<button onClick={closeToast}>閉じる</button>
</div>
);
// 使用例
toast(<CustomToast />);4. オプション設定
通知にはさまざまなオプションを設定できます。ToastContainer や toast 関数にプロパティを追加することでカスタマイズが可能です。
ToastContainer の主なオプション
position: 通知の表示位置。例:top-right,top-center,bottom-leftなど。autoClose: 自動で閉じるまでの時間（ミリ秒）。falseにすると自動閉鎖しません。hideProgressBar: プログレスバーを非表示にするか。newestOnTop: 新しい通知を上に表示するか。closeOnClick: クリックで通知を閉じるか。pauseOnHover: ホバー時にタイマーを一時停止するか。
例: カスタマイズされた ToastContainer
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>5. グローバル設定
アプリケーション全体で共通の設定を行いたい場合、ToastContainer を一度だけ設定し、必要に応じて toast 関数を使用します。
例: index.js に配置
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render(
<React.StrictMode>
<App />
<ToastContainer
position="bottom-left"
autoClose={3000}
hideProgressBar
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</React.StrictMode>,
document.getElementById('root')
);6. アニメーションとテーマ
react-toastify では、通知のアニメーションやテーマをカスタマイズできます。
アニメーションの変更
デフォルトのアニメーション以外にも、さまざまなアニメーションを選択できます。例えば、Slide, Zoom, Flip, Bounce など。
import { Slide } from 'react-toastify';
// 使用例
<ToastContainer transition={Slide} />テーマの変更
ライトテーマとダークテーマが用意されています。
<ToastContainer theme="dark" />7. TypeScript を使用している場合
TypeScript プロジェクトでも react-toastify は問題なく使用できます。型定義も提供されているため、型エラーを気にする必要はありません。
例: TypeScript での使用
import React from 'react';
import { ToastContainer, toast, ToastOptions } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App: React.FC = () => {
const notify = () => {
const options: ToastOptions = {
position: "top-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
};
toast.success("成功しました!", options);
};
return (
<div>
<button onClick={notify}>通知を表示</button>
<ToastContainer />
</div>
);
};
export default App;8. まとめ
react-toastify を使用することで、React アプリケーションに簡単かつ効果的に通知機能を追加できます。基本的な設定から高度なカスタマイズまで、多くのオプションが用意されているため、プロジェクトのニーズに合わせて柔軟に対応できます。公式ドキュメントも充実しているので、さらに詳細な情報や最新の機能については react-toastify の公式サイト を参照してください。
