🌈 Track progress of notistack v3

[iamhosseindhv]

Notistack v3 primarily focuses on flexibility, scalibity and customisation. There has been numerous issues and pull requests on the repository asking support for customising snackbars more easily, and removing the dependency on Material-UI.

So far, customisation was only possible by overriding the existing styles, but this is not always enough. There is only so much you can do by overriding styles. Since we can't cover everyone's requirements natively on notistack, in v3, we give you the tools to build your own snackbars. This is achieved through Components prop.

You can track the progress on alpha branch.
Download the latest alpha using npm i notistack@alpha

Go-live Checklist:

• Allow defining custom variants
• Improved typescript support
• Process and merge props from SnackbarProvider and enqueueSnackbar and pass them to the custom component
• Pass additional props through enqueueSnackbar to your custom component
• Remove instances of things getting imported from @material-ui/core
• Use alternative styling solution - goober
• Create Slide, Grow, Zoom and Collapse transition components
• Update documentation website with new examples.
• Keep the old docs and serve them under a new url (v2 docs are now served as https://notistack.com/v2.x)
• Wait for some more people to update to v3 (by npm i notistack@alpha) and report bugs if any

[iamhosseindhv]

Define custom component

const ReportCompleteNotification = React.forwardRef<HTMLDivElement, { allowDownload: boolean }>((props, ref) => {
  return (
    <div ref={ref}>
        <span>{props.message}</span>
        {props.allowDownload && (
             <Button>Click to download</Button>
        )}
    </div>
  )
})

<SnackbarProvider
    Components={{
         error: MyCustomErrorNotification,
         reportComplete: ReportCompleteNotification,
    }}
>
</SnackbarProvider>

// ...
enqueueSnackbar('Your report is ready to download', {
   variant: 'reportComplete',
   persist: true,
   // pass any additional props to your component.
   // notistack works well with typescript, so it'll help you pass any additional props
   // that ReportCompleteNotification expects to receive
   allowDownload: true,  
})

[adriana-olszak]

Hello! @iamhosseindhv

How is the progress on releasing the V3 going?
Is the work on the animation components in progress?
Do you need help with finishing this up, if yes with, what exactly?

[emielvanseveren]

I noticed improved typescript support is checked. Is there already a way to show the custom prop types within enqueueSnackbar() based on the variant? As far as I used it now, typescript doesn't complain but is not aware either.

[iamhosseindhv]

Is there already a way to show the custom prop types within enqueueSnackbar() based on the variant

Yes @emielvanseveren, I finally found some time to document this. See more details.

But in a nutshell, in v3 (npm i notistack@alpha) you can do:

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

[iamhosseindhv]

I will be publishing v3 as stable soon. The delay in doing so was caused by lack of enough documentation. In the past couple of weeks, I've made a new doc website (https://notistack.com/) which has sufficient docs for both <v2.x (latest) and v3 (alpha).

In the meantime, it'd be great to have some early adapters and get feedback :)

[MattCarr147]

Thanks for all the hard work with this library, @iamhosseindhv. We've started using Notistack in our product (opted for v3 so we could use 'enqueueSnackbar' outside of a component) for chat notifications and it's working great so far!

Looking forward to the stable release, let me know if there's anything we can help with to that end

[j-castellanos]

This will be huge @iamhosseindhv , thanks for this and let me know if I can help

[Everston]

I had an issue with the Custom Components feature. It seems that there is a minimum width being enforced that makes it so pointer events no longer pass through as expected when your custom notifications are defined to be small.

Here's a code sandbox reproducing the issue:
https://codesandbox.io/s/notistack-v3-alpha-custom-notification-cm9nlg?file=/src/App.jsx

When you click the "Show Snackbar" button, you won't be able to click it again because clicks are being blocked by an invisible div.

[castamir]

@Everston I think that it corresponds to SnackbarContent component, isn't it? And if I'm not mistaken, you can adjust its styles (i.e. with emoution or styled-components).

[Hideman85]

Please 🙏 allow to change the default colors of the exsiting variants 🙏
I would like to be able to consume the mui theme and set the color of notistack because right now this is library specific 🙁
colors: { default: { background: theme.background.paper, color: theme.palette.primary.main } }

[wt0m]

Hello @iamhosseindhv
Thanks for making this awesome library! I've been using it for a long time and I like every aspect of it.
I decided to switch to v3 and I really like the added Components prop to SnackbarProvider and the ability to import enqueueSnackbar directly without useSnackbar.

I stumbled upon an issue though: I cannot pass a React Node as the message to enqueueSnackbar, it displays an empty snackbar instead. This was possible in notistack v2 and I think it was really useful for occasional use (no need to create a custom variant with all the styling).
To overcome this, I decided to use the Components prop, but I had to apply custom styling to the snackbar, even though I just wanted to use the error variant with an added collapsible list.
Of course, this prop aims to allow us to make custom snackbars with custom styling, but it would save us much time if we could import the default notistack styles for a variant (instead of writing all the styles like in your example).

To summarize the issue above, the following code produces an empty snackbar (a SnackbarProvider has been added to the app of course):

enqueueSnackbar(
  <div>Some <strong>bold</strong> text</div>,
  { variant: 'error' }
)

[Koli14]

@iamhosseindhv, you wrote in last summer that you will be publishing v3 as stable soon. How do you see it now? Do you still maintain this project? Do you plan to maintain it long term?

[albertlatacz]

No bugs to reports so far but will keep an eye for any 🙂

[Yard-Daniel]

Ran into the same problem as mentioned in: #485

[vimutti77]

How to customize the SnackbarContainer style in v3?

I want to change the position of it. Now, I use the global style.

<GlobalStyles
  styles={{
    '.notistack-SnackbarContainer': {
      left: 96,
      bottom: 60,
    },
  }}
/>

[iamhosseindhv]

After a long time I'm happy to announce v3 is published as stable which doesn't require @mui/core as a peer dependency. Hence closing this issue.