react-hot-toast icon indicating copy to clipboard operation
react-hot-toast copied to clipboard

toast.custom but with animation

Open seanonthenet opened this issue 3 years ago • 6 comments

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.

seanonthenet avatar Aug 26 '21 18:08 seanonthenet

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.

AsadSaleh avatar Sep 29 '21 07:09 AsadSaleh

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.

AsadSaleh avatar Sep 29 '21 07:09 AsadSaleh

Same issue. I'm using this framer-motion example but exit animation doesn't play.

shekhar-shubhendu avatar Mar 04 '22 13:03 shekhar-shubhendu

got the same issues with framer on exit animation

hi-reeve avatar Apr 01 '22 23:04 hi-reeve

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}
...

LuisValgoi avatar Jan 31 '24 19:01 LuisValgoi