Disable transition

[dianaaceves]

Is there any way to disable the transitions and just have the toast appear and disappear? I've been looking in the documentation but I don't see any way to do it. Thanks!

[erikbg7]

Probably not the best workaround out there, but doing a fake animation would do the trick:

CSS

@keyframes fake-enter {
  0% {  opacity: 0;  }
}

.fake-enter-animation {
  animation: fake-enter 0s;
}

@keyframes fake-exit {
  0% {  opacity: 1;  }
}

.fake-exit-animation {
  animation: fake-exit 0s;
}

JS

import "./styles.css";
import { ToastContainer, toast, cssTransition } from "react-toastify";

[...]

const fake = cssTransition({
  enter: "fake-enter-animation",
  exit: "fake-exit-animation",
  collapseDuration: 0
});

[...]

function showToast() {
   toast.dark("Hey 👋, this is a test!");
}

[...]

return (
  <div>
      <button onClick={showToast} >
         Click me
      </button>
      <ToastContainer transition={fake} />
  </div>
)

[dianaaceves]

Thanks, @erikbg7, I'd prefer something more straightfordward like "transition: false" implemented 😅, but if I can't find another way I might have to use your solution. Thanks!

[erikbg7]

Agree, ideally we should be able to easily disable transitions :)

I will take a deeper look to check out possible implementations.

[erikbg7]

@dianaaceves after checking it better I think that you can achieve the same with the following code

const None = cssTransition({
  enter: 'none',
  exit: 'none',
  collapse: false,
  collapseDuration: 0,
});

[...]

  showSuccessToast = () => {
    toast.success('Notification', { transition: None });
  };

[dianaaceves]

Thanks, @erikbg7 :-)

[arnaudambro]

I have a bug though with your None transition It works fine sometimes, but most of the times I can't click on the close button

Indeed that would be very useful to have no transition, especially for testing purpose !

[YPCrumble]

A nice side effect of removing the transition would be if this also removed some extra code from the library via tree-shaking helper functions like cssTransition.