Reactjs Snackbar that show progress on its self

Question

I learn React JavaScript and wanted to have snackbar that could show progress once it is showen. Like the Snackbar is showed as usual sliding out from the lover left and immediately start to show % progress for let's say some download.

I tried the notistack but it need to show the snackbar again with the new progress but I want to show progress on one snackbar

This below is notistack example. Every time I click button the onClick() show the Snackbar again with the incremented xc, when I want the xc increment to be showen on the same snackbar not pop out again

let xc = 0;

function onClick() {
    xc += 1;
    enqueueSnackbar({
        message: xc,
        preventDuplicate: false,
        options: {
            key: 'item.name',
            variant: 'success',
            //  action: key => <Button onClick={() => closeSnackbar(key)}>dismiss me</Button>,
        },
    });
}

I have looked into a number of Snackbars like
material-ui
notistack
material-ui-snackbar-provider

Can anyone give some hint if this is possible or if there some library that can do this. Preferable some Redux supported lib

Answer 1

react-toastify supports this incredibly easily out of the box, and has a whole page dedicated to this use case in the documentation: https://fkhadra.github.io/react-toastify/update-toast.

notistack

As far as I can tell, you can't really do this with notistack. While you can pass in a key and use preventDuplicate: true to ensure that it only shows one of each message with key, if you try to call enqueueSnackbar on a key that already exists, you won't see an update, unless you manually call closeSnackbar(key) on that key to dismiss it first, and wait for the UI to update before calling enqueueSnackbar() again. I have a CodeSandbox demonstrating this.

That's almost certainly not what you're looking for.

Note: if you don't want to pre-determine a key, you can just use the return value of enqueueSnackbar(), which will be a randomly generated key if you don't specify one in the options parameter.

Answer 2

You can write your custom variant as pointed out by the documentation. Adding a progress bar at the bottom of your Snackbar may fit your need :D