Easily Customize Notistack with MUI Snackbars (v5)

While exploring MUI Snackbar I ran across a third-party library called Notistack. It is a clever tool whose core feature is the ability to control how many Snackbars are shown. Kudos to iamhosseindhv for creating this resource.

I decided to create a Notistack demo to evaluate how much value it adds when using snackbars. I found it was still easy to pass MUI Snackbar props to underlying Snackbar. Also, the Notistack features were clearly documented and had good examples. Here’s the (simple looking) example I created:

Some notable Notistack features include:

• Preventing duplicate Snackbars from showing
• Creating custom variants
• Controlling the amount of Snackbars visible
• Controlling icon variants

I will explore some of these aspects in this post. I will also explain how to apply styling to the underlying Snackbar.

Notistack Docs and Basic Usage

The docs were excellent. Each prop was demonstrated in three useful ways:

• A brief explanation
• An interactive example
• The relevant code snippet

I recommend you read the “Basic Usage” section before exploring particular props. Naturally, I did this backwards and wound up confused about how to get enqueueSnackbar working.

There were roughly thirteen features, as of my testing. All of them seemed to work well except for custom variants. I couldn’t get my custom styling for the error variant to show. Either my code was bad or there may be a bug with MUI v5 integration.

Here is the most basic example of how to use Notistack:

import React from "react";
import Button from "@mui/material/Button";
import { SnackbarProvider, useSnackbar } from "notistack";

function CustomStack() {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar("Test");
  };

  return (
    <>
      <Button onClick={handleClick}>Show snackbar</Button>
    </>
  );
}

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider>
      <CustomStack />
    </SnackbarProvider>
  );
}

The simple steps are:

• Wrap a component with SnackbarProvider
• In that component, fire enqueueSnackbar and pass it some text and optional parameters

A good tool is simple to use.

Notistack Snackbar Variants

Notistack uses the four variants of MUI Snackbars: Success, Error, Warning, and Info.

Simply pass the variant as a property:

enqueueSnackbar(
  "Test",
  {
    variant: "error"
  }
)

Notistack gives the option to customize the four original variants. These should be customizable at the provider level so child Snackbar has access to the variants.

const styles = {

  error: { backgroundColor: "blue", color: "orange" }
};

return (
  <SnackbarProvider
    //not working
    classes={{
      variantError: styles.error
    }}
  >
    <CustomStack />
  </SnackbarProvider>
);

As mentioned above, this was one feature that I was unable to get working. I am using Notistack with MUI v5, possibly this feature still works with v4.

Regardless, the logic is simple for creating variants. Pass an object to the variant field (i.e. variantError) in the Provider’s classes prop and you should be successful.

Notistack Set Max Visible Snackbars

The core feature of Notistack is it’s flow control for Snackbars. It will “remember” how many Snackbars are created and throttle their display.

As part of this, developers can set a max visible number at the Provider level:

<SnackbarProvider
  maxSnack={4}
>

I tested this with up to 10 showing at a time. It seems the only limiting factor is the vertical screen size available.

Notistack Styling – Background Color, Text Color, and Width

An alternative method for styling Snackbars using Notistack is to utilize the new MUI v5 sx prop. Using this, I was able to style my error variant Snackbar as I wanted:

sx: {
  "& .SnackbarContent-root": {
    color: "grey",
    backgroundColor: "rgb(34,139,34)"
    //width: 600
  }
}

Notice how I had to use a nested selector in order to target the proper DOM element. If I had not used the nested selector, the styling would have applied to the top level of the Snackbar and would have been covered by the SnackbarContent component.

Targeting SnackbarContent allowed me to apply color and background color. Interestingly, this is also where you need to add width if you want a fixed width. Unfortunately, it would be difficult to dynamically set a width even to the full screen size. It might be possible using useRef and passing a ref with a containing element’s width.

Notistack New Line

Adding a line break to the Snackbar text was tricky. Here’s what did not work:

• Adding <br> to the text string
• Adding \n to the text string
• Passing an Alert to the underlying snackbar‘s children prop

Here’s what did finally work:

enqueueSnackbar(
  <div>
    Testing Linebreak. <br />
    Linebreak successful.
  </div>
)

I had to pass HTML instead of a string as the message prop value. This allowed a <br> line break to be properly consumed and interpreted as HTML.

Resources

Code Sandbox Link

Notistack Docs