autoClose doesn't work if you don't include ReactToastify.css ?

If I don’t include ReactToastify.css (which I’d prefer to omit than try to override everything I don’t want/need from there), the toasts remain until clicked rather than unmounting after the autoClose delay… would it be worth documenting or providing a minimal CSS workaround to support autoClose without the bundled CSS?

[dimre01]

The styles provided in the Code Sandbox aren’t sufficient to make toasts auto-dismiss on Safari or Edge. We discovered that the following styles are necessary:

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  animation: Toastify__trackProgress linear 1;
}

[fkhadra]

Hello @DrMeers,

Thanks for the feedback.

The autoClose is triggered when the progress bar animation end. An onAnimationEnd event is bound to the component.

Regarding your needs, I see 1 easy workaround possible. In the sample below, open the style file to see the minimum style needed to trigger autoClose.