LoginSignup
2

More than 3 years have passed since last update.

notistack で複数のポップアップを同時に表示する

Last updated at Posted at 2021-01-20

はじめに

notistackMaterial UISnackbar コンポーネントをラップしたライブラリでうす。
Screen Shot 2021-01-20 at 13.39.18.png
Screen Shot 2021-01-20 at 13.38.40.png
Screen Shot 2021-01-20 at 13.38.55.png
添付した画像のように、いくつかのカラーパターンを出し分けることができます。
また、notistack の最大の特徴は、ポップアップを積み重ねて表示できることです。
Screen Shot 2021-01-20 at 13.43.20.png

スタイルをカスタマイズする

notistack@1.0.0 でいくつかの breaking change がありましたが、私の環境は notistack@0.9.17 を利用しています。

notistack からプロバイダーと Custom Hooks をインポートします。

import { SnackbarProvider, useSnackbar } from 'notistack';

... 

SnackbarProvider は下記のように使います。

<SnackbarProvider
  iconVariant={{
    success: <SuccessIcon />
    error: <ErrorIcon />
  }}
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
  ContentProps={{
    style: { minWidth: 0, height: 33, alignContent: 'center' }}
    className: useCustomStyle().variantDefault,
  }}
  classes={useStayle()}
>
  {children}
</SnackbarProvider>

スタイルは @material-ui/coremakeStyles を用います。

import { makeStyles } from '@material-ui/core';

...

const useCustomStyles = makeStyles((theme) => ({
  variantDefault: { backgroundColor: 'black' },
}));

const useStyles = makeStyles((theme) => ({
  variantSuccess: { backgroundColor: 'green' },
  variantError: { backgroundColor: 'red' },
  containerAnchorOriginTopCenter: {
    top: 12,
  },
  collapseWrapper: {
    marginTop: 4,
    marginBottom: 4,
  },
}));

今回の例では

  • variantSuccess, variantError で variant の値によってスタイルを変えています
  • containerAnchorOriginTopCenter で上からの余白を設定しています
  • collapseWrapper で、個々の Snackbar に余白を設定しています

注意すべき点として、classes には variantDefault が存在しません。
参考
そのため、className として設定してあげる必要があります。
このようにして、Snackbar を自分が使いやすいようにカスタマイズできました。

※ 1.0.0 からは ContentProps がなくなっているので設定方法が異なります。

ポップアップを表示する

Snackbar を表示させる際は、Custom Hooks を利用します。

const { enqueueSnackbar, closeSnackbar } = useSnackbar();

...

const key = enqueueSnackbar(message, options);
closeSnackbar(key);

enqueSnackbar で取得した key を渡すことで対象のポップアップを消すことができます。
表示の際には個別にオプションを渡すことも可能です。
これにより、個々のポップアップに違いを出すことができます。

おわりに

ユーザの目を引くポップアップを出すシーンは多いと思います。
例えばエラーですが、複数のエラーが出た場合にはすべてを一度に見せてあげたほうがユーザフレンドリーかもしれません。

Material UI の Snackbar をきれいに整列して表示することができる notisnack
もし良ければ使ってみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2