Notistack npm library documentation website logo
npm downloads

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.

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>

You can entirely customize your snackbars using the content which can be passed as a prop to SnackbarProvider or in options parameter ofenqueueSnackbar. Use the provided key to do actions specific to this snackbar (e.g. to close it).

import ReportCompleteSnackbar from './ReportComplete'

enqueueSnackbar('Your report is ready', {
  persist: true,
  content: (key, message) => (
    <ReportCompleteSnackbar id={key} message={message} />
  ),
})

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 } from 'notistack'

interface RexportCompleteProps {
  id: string
  message: string
}

const ReportComplete = React.forwardRef<HTMLDivElement, ReportCompleteProps>((props, ref) => {
  const { id, message, ...other } = props
  return (
    <SnackbarContent ref={ref} role="alert" {...other}>
      {message}
    </SnackbarContent>
  )
})