How to create a custom react-hot-toast but keeping the default animations

[AnderUstarroz]

I have created a SO issue about this so we can help more people with the same doubt:

Creating a customized Toast seems easy enough when using react-hot-toast:

toast.custom(<div>Hello World</div>);

But it seems to loss the default animations. Docs only mention how to create customized animations, is there an easy way to reuse the already existing enter and exit animations on a customized toast?

[VladislavSmolyanoy]

Use toast() instead of toast.custom() https://react-hot-toast.com/docs/toast

[AnderUstarroz]

Use toast() instead of toast.custom() https://react-hot-toast.com/docs/toast

Not a valid solution for me, as we are using customized messages, the simplified code I used was just an example:

toast.custom(<div>Hello World</div>);

but ours is a bit more complex.

Somebody knows an easier way to reuse the already existing enter and exit animations?

[aromeronavia]

@AnderUstarroz Could not re-use the animations, but got into something very close I'd say. If you add this style to the wrapper div, it renders similarly to how it behaves "natively". One thing I noted is that if you render two toasts, the second one will have the in-built animation running, but the first one doesn't run, which is a weird behavior.

Pls notice this code is using stitches.js, so you need to translate it to your component library styling or to regular css

        animation: `${keyframes({
          '0%': { opacity: 0, transform: 'translateY(10px)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        })} 230ms cubic-bezier(.21,1.02,.73,1)`,

https://user-images.githubusercontent.com/13922607/222008968-75f1152c-38be-445e-b972-5c12205df3b7.mov

[williamtobing]

I'm facing the same problem with the toast.custom