Customization

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

  Show code

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

• Forward the style

  Show code

  - const MySnackbar = () => <div />
  + const MySnackbar = ({ style, ...otherProps }) => <div style={style} />

• Be a single element (React.Fragment is not allowed)

  Show code

  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  
    }
  }
}