fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

new toast replace the previous one #1012

Closed digiage closed 8 months ago

digiage commented 8 months ago

Do you want to request a feature or report a bug? feature

What is the current behavior? toasts are stacked in queue

What is the expected behavior? new toast replace (close) the previous one

I would like to have this settings globally in the ToastContainer if possible. If not, then is there any way how to do it like a one time setting in one place?

fkhadra commented 8 months ago

What about using limit={1} in the toast container? Or if it's not what you meant. You could use some fixed ids, and remove the notification before displaying a new one. See here

digiage commented 8 months ago

What about using limit={1} in the toast container? Or if it's not what you meant. You could use some fixed ids, and remove the notification before displaying a new one. See here

thank you. I meant to replace one toast by another (different one, not the same). The limit=1 will put next toast into queue. I solved it by putting the ToastContainer to the wrapper which also includes the "toast" overwrite

import { toast as reactToast, ToastContainer, ToastContainerProps } from 'react-toastify';

const toast = {
  info: (message:string, options?:ToastContainerProps) => {
    reactToast.clearWaitingQueue(); 
    reactToast.dismiss();
    reactToast.info(message, options);
  },
  warn: (message:string, options?:ToastContainerProps) => {
    reactToast.dismiss();
    reactToast.clearWaitingQueue(); 
    reactToast.warn(message, options);
  },
  ...
};
...