Custom animation

How to easily integrate custom animation libraries with toastup.

Example

Using animate.css

import {
  toast,
  animationType,
  Toaster,
  ToastInAnimation,
  ToastInBodyAnimation,
  ToastOutAnimation,
} from "@toastup/react";
import "@toastup/react/style";

import "animate.css";

const animateCssFlipXInAnimation: ToastInAnimation = {
  type: animationType.in,
  className: "animate__animated animate__flipInX",
  animationTime: 450,
};

const animateCssBounceDownOutAnimation: ToastOutAnimation = {
  type: animationType.out,
  className: "animate__animated animate__bounceOutDown",
  animationTime: 650,
};

const animateCssBounceInBodyAnimation: ToastInBodyAnimation = {
  type: animationType.body,
  className: "animate__animated animate__bounceIn",
  animationTime: 1000,
};

export function CustomAnimationExample() {
  const handleClick = () =>
    toast.add({
      inAnimation: animateCssFlipXInAnimation,
      outAnimation: animateCssBounceDownOutAnimation,
      inBodyAnimation: animateCssBounceInBodyAnimation,
      animateBody: true,
    });
  return (
    <div>
      <button onClick={handleClick}>Add toast with animate.css</button>
      <Toaster />
    </div>
  );
}