Notistack npm library documentation website logo

Customization

Variants are an easy way to display snackbars that are visually different. Notistack comes with 5 variants out of the box: default, success, error, warning and info. These variants may not be suitable for your application. For example, you may want to use the colors from your application's theme.

Depending on your requirements, you have 2 ways of customizing the Snackbars:
1. Override styles - Suitable for small changes (e.g. changing background color)
2. Create custom components - See custom components to find out how you can customize each variant, or define your own variants.

// globally set the variant for all snackbars
<SnackbarProvider>
  <App />
</SnackbarProvider>

const message = 'Your notification here'
enqueueSnackbar(message, { variant: 'default' })
// OR simply: enqueueSnackbar(message)

By default, Notistack displays an icon in each Snackbar, according to their variant. Use iconVariant prop to display an icon of your choice, or hide them altogether using hideIconVariant.

<SnackbarProvider>
  <App />
</SnackbarProvider>

By default, the styling of Snackbars is based on Material Design Snackbars. It would makes sense to override styles, if all you need is to make small changes (for example, change error variant background color).

To do this, you can import notistack's Material Snackbar and override its styles. The class names are called: notistack-MuiContent and notistack-MuiContent-<variant_name>

import { MaterialDesignContent } from 'notistack'

const StyledMaterialDesignContent = styled(MaterialDesignContent)(() => ({
  '&.notistack-MuiContent-success': {
    backgroundColor: '#2D7738',
  },
  '&.notistack-MuiContent-error': {
    backgroundColor: '#970C0C',
  },
}));

<SnackbarProvider
  Components={{
    success: StyledMaterialDesignContent,
    error: StyledMaterialDesignContent,
  }}
>

By default, the styling of Snackbars is based on Material Design Snackbars. But the sky is your limit when it comes to customization.

You can define your own variants and show entirely customized Snackbars. A custom component accepts all props passed toenqueueSnackbar or SnackbarProvider, so you have full control over it. Passing additional options in options parameter of enqueueSnackbar is also supported. This is achieved by specifying a mapping between variant names and their custom components in the Components prop.

import ReportCompleteSnackbar from './ReportComplete'

<SnackbarProvider
  Components={{
    reportComplete: ReportCompleteSnackbar,
  }}
>
  <App />
</SnackbarProvider>

enqueueSnackbar('Your report is ready', {
  variant: 'reportComplete',
  persist: true,
  allowDownload: true, // <-- pass any additional options
})

In order for transitions to work as expected, your custom component has to:

  • Forward the ref using React.forwardRef

    - const MySuccessSnackbar = () => <div />
    + const MySuccessSnackbar = React.forwardRef((props, ref) =>
    +   <div {...props} ref={ref} />)
    
    <SnackbarProvider
      Components={{
        success: MySuccessSnackbar
      }}
    />
  • Forward the style

    - const MySnackbar = () => <div />
    + const MySnackbar = ({ style, ...otherProps }) => <div style={style} />
  • Be a single element (React.Fragment is not allowed)

    const MySnackbar = () => (
    -   <React.Fragment>
    +   <div>
          <div>your report is ready</div>
          <button>close</button>
    +   </div>
    -   </React.Fragment>
    )

Snackbars should have a background color which has enough constrast with the text, so it remains readable and legible. Avoid non-opaque backgrounds and use a color contrast tool to check if there is enough contrast between a background color and the text.

Regardless of what you display inside of your component, it needs to be responsive. For example, it needs to occupy full width of the view on mobile screens and have some minWidth on larger screens. To acheive such responsiveness, notistack exposes SnackbarContent component. Even though you don't have to, it is recommended to use this component as a base for your custom Snackbars.

import { SnackbarContent, CustomContentProps } from 'notistack'

interface ReportCompleteProps extends CustomContentProps {
  allowDownload: boolean
}

const ReportComplete = React.forwardRef<HTMLDivElement, ReportCompleteProps>((props, ref) => {
  const {
    // You have access to notistack props and options 👇🏼
    id,
    message,
    // as well as your own custom props 👇🏼
    allowDownload,
    ...other
  } = props

  return (
    <SnackbarContent ref={ref} role="alert" {...other}>
      {message}
    </SnackbarContent>
  )
})

Variants are defined in Components prop of SnackbarProvider. By default, notistack comes with 5 variants out of the box: default, success, error, warning and info.

As demonstrated above, you can have as many variants as you like and name them as you wish. If you are using TypeScript, you would also need to use module augmentation. As an example, you can put the code below somewhere in your codebase:

declare module 'notistack' {
  interface VariantOverrides {
    // removes the `warning` variant
    warning: false;     
    // adds `myCustomVariant` variant      
    myCustomVariant: true;    
    // adds `reportComplete` variant and specifies the
    // "extra" props it takes in options of `enqueueSnackbar`
    reportComplete: {         
      allowDownload: boolean  
    }
  }
}