custom toast with custom animation not working

[SyFlo]

I'm trying to get a custom toast (i.e. creates with toast.custom(...) to work with a custom animation. Following the example in https://react-hot-toast.com/docs/styling ("Change enter and exit animations") it isn't clear to me in what form "custom-enter" and "custom-exit" need to be provided. I'm not using tailwind, so what I tried was to define keyframes as follows:

@keyframes custom-enter {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}
@keyframes custom-exit {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

together with

import { Toaster, ToastBar } from 'react-hot-toast';

<Toaster>
  {(t) => (
    <ToastBar
      toast={t}
      style={{
        ...t.style,
        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
      }}
    />
  )}
</Toaster>;

but that didn't work - the animation just isn't applied to the ToastBar. Could anyone provide a working example of custom animations with pure CSS or some form of CSS-in-JS (e.g. styled-components)? Thank you 🙏

[timolins]

Here is an example with CSS-in-JS and custom animations: https://codesandbox.io/s/react-hot-toast-custom-toasts-with-styled-components-i4xj6

Hope this helps.

[SyFlo]

@timolins Thank you so much for the quick reply and the example code 🙏 I tried to adapt this to my use case, but it still doesn't work. As soon as I use the toast.custom function, the animation is no longer applied - see this fork of your example: https://codesandbox.io/s/react-hot-toast-custom-toasts-with-styled-components-forked-siqst4?file=/src/App.js

Is there a way to use custom JSX but apply an animation? I want to use custom JSX because I need more/different variants of notifications and I have rather specific requirements about the appearance of the toast content.

[SyFlo]

@timolins Sorry, but I wouldn't regard this issue as closed. Would you mind answering my question? Is there a way to use custom JSX but apply an animation?

[williamtobing]

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