React で積み重なる Snackbar を簡単に実装する (Material UI 使用)

アイキャッチ画像はこのまま採用するとして、右下とかにポコっと出てくるアレです。

実際に実装しようとしてコンポーネントを探していたわけなのですが、Material UI のドキュメントを読んでいて Thirdparty Module の紹介があったため使用させていただきました。

はじめに
使い方
まとめ

はじめに

notistack.com

こちらのモジュールを使うと、非常に簡単に Snackbar を積むことができます。

使い方

$ yarn add notistack

[CustomTheme.tsx]

import { SnackbarProvider } from 'notistack'

export const CustomTheme: React.FC<CustomThemeProps> = ({ children }) => {
  const theme = createTheme({
    // ～省略～
  })

  return (
    <ThemeProvider theme={theme} disableTransitionOnChange>
      <SnackbarProvider>{children}</SnackbarProvider>
    </ThemeProvider>
  )
}

[App.tsx]

import { enqueueSnackbar } from 'notistack'
import { Box, Button, CssBaseline } from '@mui/material'
import { CustomTheme } from './themes/CustomTheme'

function App() {
  const handleClick = () => {
    enqueueSnackbar('Hello World!')
  }
  
  return (
    <>
      <CustomTheme>
        <CssBaseline enableColorScheme />
        <Box sx={{ display: 'flex', justifyContent: 'center', width: '100dvw' }}>
          <Button variant="contained" onClick={handleClick}>
            ボタン
          </Button>
        </Box>
      </CustomTheme>
    </>
  )
}

export default App