react-hot-toast
react-hot-toast copied to clipboard
toast.custom but with animation
Hi. Is there a way I can use toast.custom but include the standard animation? I'm wanting to use Tailwind UI components for the toast but use the default react-hot-toast display and disappear animations.
Yeah, I'm having the same issue.
I think the solution is for us to implement "animate-enter" and 'animate-leave" in our tailwind configuration. But if the author could provide the original solution, that would be great.
Update:
We can see the tailwind.config.js here
However, even though I applied both animations to my code, only animation-enter
that's working nicely. For unknown reason the "leaving animation" didn't get triggered and it just vanished when I clicked the close button.
Anyone can help with the exit animation using Tailwind?
Thanks in advance.
Same issue. I'm using this framer-motion example but exit animation doesn't play.
got the same issues with framer on exit animation
for anyone looking for a solution that does not uses tailwindcss...I was able to make it work using the following:
styling
@keyframes customerEnter {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes customLeave {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
.toaster {
position: relative;
width: auto;
}
.animateEnter {
animation: customerEnter 0.2s ease-out;
}
.animateLeave {
animation: customLeave 0.2s ease-out;
}
definition
export function useToast() {
const { t } = useTranslation();
const Toast = () => {
const handleDismiss = () => toast.remove();
return (
<div
className={classNames(
styles.toaster,
{ [styles.animateEnter]: visible },
{ [styles.animateLeave]: !visible }
)}
>
<button onClick={handleDismiss}>close</button>
<p>message</p>
</div>
);
};
return {
show: () =>
toast.custom((t) => <Toast visible={t.visible} {...props} />),
};
}
usage
const { show } = useToast();
...
onClick={show}
...