Reactに簡単にトースト通知機能を追加

トーストとは

Reactのトーストは、通常、ユーザーに短いメッセージや通知を表示するための小さなポップアップコンポーネントです。
トーストは、一時的に表示され、自動的に消えることが多いです。
一般的には、成功、エラー、情報、警告などの通知に使用されます。

Reactでトーストを実装するには、いくつかのライブラリがよく使われます。
その中でも人気のあるものをいくつか紹介します。

1. React Toastify

React Toastifyは、非常に使いやすく、カスタマイズ性の高いトースト通知ライブラリです。

インストール

npmの場合

npm install react-toastify

yarnの場合

yarn add react-toastify

使用例

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
  const notify = () => toast("Wow so easy!");

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
};

export default App;

2. React Hot Toast

React Hot Toastは、シンプルで軽量なトースト通知ライブラリです。

インストール

npmの場合

npm install react-hot-toast

yarnの場合

yarn add react-hot-toast

使用例

import React from 'react';
import toast, { Toaster } from 'react-hot-toast';

const App = () => {
  const notify = () => toast('Here is your toast!');

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <Toaster />
    </div>
  );
};

export default App;

3. Notistack

Notistackは、Material-UIと一緒に使用できるトースト通知ライブラリです。
複数の通知を簡単にスタックして表示することができます。

インストール

npmの場合

npm install notistack

yarnの場合

yarn add notistack

使用例

import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';

const App = () => {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar('I love snacks.');
  };

  return (
    <div>
      <button onClick={handleClick}>Show snackbar</button>
    </div>
  );
};

const Root = () => (
  <SnackbarProvider maxSnack={3}>
    <App />
  </SnackbarProvider>
);

export default Root;

これらのライブラリを使用することで、Reactアプリケーションに簡単にトースト通知機能を追加することができます。