1

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

Kid
  • 1,869
  • 3
  • 19
  • 48

1 Answers1

0

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

Cong
  • 131
  • 1
  • 5