Cogoport / cogo-toast

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons
https://cogoport.github.io/cogo-toast
MIT License
673 stars 1 forks source link

Allow for programatic closing of toasts outside of the scope they are called #63

Open mirshko opened 4 years ago

mirshko commented 4 years ago

I've noticed if youre using toasts to show multiple states inside a try catch block and at a point down the line if the code catches any toasts created (with a hideAfter set to 0, for programatic closing) there seems to be no way to close them from the catch block.

Example

(async () => {
  try {
    const { hide } = cogoToast.loading("Loading...", { hideAfter: 0 });

    const thing = await doAsyncThing();

    /* Can't be called from the catch block. */
    hide();

    cogoToast.success("Completed Action");
  } catch (err) {
    cogoToast.error(err.message);
  }
})(); 

It would be great to be able to have a second function exposed by the lib that would accept a toastId to programmatically close it, with the ability to set an id on the toast options.

I realize this might expand the complexity of the library though.

sedatkimya commented 4 years ago

I'm having the same problem. I found a solution like this. document.getElementById("ct-container").style.display = "none"; But, cogoToast.destroy() function is necessary in my opinion.

mirshko commented 4 years ago

Hey @sedatkimya I found a workaround that’s prob a bit better than that option and also doesn’t touch the DOM directly.


(async () => {
  /* Empty function so the catch block doesn’t error out. Prob a better way of doing this. */
  let hideToast = () => {};

  try {
    const { hide } = cogoToast.loading("Loading...", { hideAfter: 0 });
    hideToast = hide;

    const thing = await doAsyncThing();

    /* Can't be called from the catch block. */
    hide();

    cogoToast.success("Completed Action");
  } catch (err) {
    hideToast();
    cogoToast.error(err.message);
  }
})(); 

This handles well if the doAsyncThing function fails the loading toast can be dismissed.