Custom toast

Allows to render anything as a Toast component.

Example

import Beach from "@site/static/img/beach.svg";
import {
  cssClassNames,
  toast,
  ToastComponentProps,
  Toaster,
} from "@toastup/react";
import "@toastup/react/style";

const CustomToast = (props: ToastComponentProps) => {
  return (
    <div
      ref={props.ref}
      className={`${cssClassNames.toast} ${styles.customToast}`}
      onClick={() => props.hide()}
    >
      <Beach className={styles.customToastImage} />
      {props.children}
    </div>
  );
};

export function CustomToastExample() {
  const handleClick = () =>
    toast.add({
      toast: CustomToast,
      animateBody: true,
    });
  return (
    <div>
      <button onClick={handleClick}>Add toast</button>
      <Toaster />
    </div>
  );
}

info

To have the custom Toast animated, remember to pass ref prop to the Toast component.

info

To have the body animated add data-component="body" to element.