Update Snackbar Content in place using key

[lsansaa]

Expected Behavior

Being able to update the snackbar message (and maybe other props like variant) using the same key that enqueueSnackbar already returns.

Current Behavior

Can't update the snackbar message.

Context

Since the PR #50 was closed, I decided to open another issue.

In our case, we want to use notistack to show the progress in files uploads/downloads. But without having to open/close snackbars for every change in the upload/download process. For now we are usign regular snackbars from material ui.

[MattGyverLee]

Similar to above, I need a way to target, update, and reset the timer for a current snackbar to make a progress meter for background processes.

[matt-ehinger]

This is a need for us as well. We have multiple background processes happening at once, each with its own snackbar. We need to update each snackbar's progress and other state properties independently without removing and re-adding

[aperkaz]

This is also a must for me. Is there a plan for merging its implementation?

[aperkaz]

In case someone else is looking for this feature (@matt-ehinger , @MattGyverLee, @lsansaa ) and dont mind adding custom styling for achieving material-ui feel, I would recommend: https://github.com/fkhadra/react-toastify#readme

Very clean API, and easy to programatically modify the toasts/notifications :slightly_smiling_face:

[Ic3xX]

Also looking for this feature to implement a background upload progress indicator

[ievgennaida]

Please, add this feature. This one is preventing me from using a library.

[amitsainii]

Any updates on this?

[simplenotezy]

We really need this as well. Any PRs?

[dror-laguna]

const id = new Date().getTime().toString();
enqueueSnackbar(<div id={id}>message</div>, {
  persist: true,
  variant: 'info',
});
setTimeout(() => {
  const ref = document.getElementById(id);
  if (ref) ref.innerText = 'works!!';
}, 2000);

here is my workaround...

[erikswed]

const id = new Date().getTime().toString();
enqueueSnackbar(<div id={id}>message</div>, {
  persist: true,
  variant: 'info',
});
setTimeout(() => {
  const ref = document.getElementById(id);
  if (ref) ref.innerText = 'works!!';
}, 2000);

here is my workaround...

Thanks, I can't make that work out of the box your code. What more is needed?

[erikswed]

I also need this!

[chasoft]

Same here! Any update for this? Thanks!

[erikswed]

Adding Redux Store support in notistack would solve this in a good way abstraction away functionality. I want feedback: https://github.com/iamhosseindhv/notistack/issues/426

[satoren]

My solution https://codesandbox.io/s/distracted-ben-8xvb0s?file=/MessageButtons.js

update state with jotai

// create message wrapper
const StackSnackbarMessageWrapper = ({ messageAtom }) => {
  const message = useAtomValue(messageAtom);
  return <>{message}</>;
};

  const [messageAtom] = React.useState(() => atom("initial"));

  const setMessage = useSetAtom(messageAtom);

   // enqueueSnackbar with message atom
    const key = enqueueSnackbar(
      <StackSnackbarMessageWrapper messageAtom={messageAtom} />
    );

// update content
  React.useEffect(() => {
    let countup = 0;
    const interval = setInterval(() => {
      countup = countup + 1;
// you can put ReactNode
      setMessage("cout" + countup);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [setMessage]);

[ReschAndr]

Any update on this?

[nrei0]

no solution?