React Material-UI Snackbarの表示できる上限（Max Number）は変更できるのか？

公開日:

2025/03/15

更新日:

2025/03/15

完成デモ

今回はSnackbarの最大数を3に設定しています。

やり方：ライブラリ「notistack」を使用すればsnackbarの数を変更できる

MUIのSnackbarはとても便利ですが「複数のSnackbarの表示」に対応することができません。※2025年3月時点（今後アップデートがあるかもしれないです。）

なのでもしSnackbarの表示数を増やしたい場合はnotistackがおすすめです。

ライブラリ「notistack」は MUI Snackbar コンポーネントをラップしています。

そのため使い方や見た目などもMUIと似ているので使いやすいです。

notistackの使い方

App.js

1import "./styles.css";
2import { SnackbarProvider } from "notistack";
3import { enqueueSnackbar } from "notistack";
4import { Button } from "@mui/material";
5
6export default function App() {
7  const handleClick = () => {
8    enqueueSnackbar("Hello World!");
9  };
10
11  return (
12    <SnackbarProvider maxSnack={3}>
13      <div className="App">
14        <Button variant="contained" onClick={handleClick}>
15          ボタン
16        </Button>
17      </div>
18    </SnackbarProvider>
19  );
20}
21

使い方のポイントは下記になります。

・Snackbarを表示したい画面をSnackbarProviderで囲む

・SnackbarのトリガーはenqueueSnackbarメソッド

・SnackbarProviderにプロップスmaxSnackを設定し任意の数を渡してあげればSnackbarの数が変更される

本記事は以上になります。

ご一読頂きありがとうございました。