Material-UIとともにNotistackを使用する方法

以下に、NotistackとMaterial-UIを組み合わせる方法と、いくつかのコード例を示します。

1. 必要なパッケージのインストール: まず、Reactプロジェクトで以下のパッケージをインストールします。

npm install notistack @mui/material @emotion/react @emotion/styled

2. Notistackのセットアップ: 次に、Notistackを使用するコンポーネントで、以下のようにライブラリをインポートします。

import { SnackbarProvider } from 'notistack';

そして、アプリケーションのルートコンポーネントでSnackbarProviderを使用します。

function App() {
  return (
    <SnackbarProvider>
      {/* アプリケーションのコンポーネント */}
    </SnackbarProvider>
  );
}

3. 通知の表示: 通知を表示するコンポーネント内で、以下のようにuseSnackbarフックを使用してNotistackを初期化します。

import { useSnackbar } from 'notistack';
function MyComponent() {
  const { enqueueSnackbar } = useSnackbar();
  const handleClick = () => {
    enqueueSnackbar('メッセージが表示されました', { variant: 'success' });
  };
  return (
    <Button onClick={handleClick}>通知を表示</Button>
  );
}

上記の例では、enqueueSnackbar関数を使用して通知を表示しています。第1引数に表示するメッセージを指定し、第2引数にオプションとして表示のスタイルや種類を指定することができます。

これらの手順を実行することで、Material-UIとNotistackを組み合わせて通知メッセージを表示することができます。さらに、Notistackは様々なオプションを提供しており、通知のカスタマイズも可能です。

以上が、Material-UIとNotistackを使用する方法といくつかのコード例です。これにより、見栄えの良い通知メッセージを簡単に作成することができます。