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

はじめに

notistack は Material UI の Snackbar コンポーネントをラップしたライブラリでうす。



添付した画像のように、いくつかのカラーパターンを出し分けることができます。
また、notistack の最大の特徴は、ポップアップを積み重ねて表示できることです。

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

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/core の makeStyles を用います。

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。
もし良ければ使ってみてください。