CustomToastUI Component

Example Preview

Usage

import { CustomToastUI } from "@/@core";
import toast from "react-hot-toast";
 
// Example usage of CustomToastUI component with react-hot-toast
const MyToast = () => {
  const showToast = () => {
    toast.custom((t) => (
      <CustomToastUI
        toast={t}
        t={t}
        title="Title"
        content="Content"
        image={<Image src="https://daisyui.com/logo-full.svg" />}
        icon={<Icon name="close" />}
        color="primary"
      />
    ));
  };
 
  return <button onClick={showToast}>Show Custom Toast</button>;
};
 
export default MyToast;

Props

| Prop Name | Type | Required | Description | | --------- | ---------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------- | ------ | ------ | --------- | --------- | --- | -------------------------------------------- | | toast | object | Yes | The toast object provided by react-hot-toast. It contains information about the toast, such as its ID and visibility status. | | t | object | Yes | An object containing information related to the toast, typically provided by the toast notification library (react-hot-toast). | | title | string | Yes | The title of the toast notification. | | content | ReactNode | string | Yes | The content of the toast notification, can be a ReactNode or a string. | | image | ReactNode | null | Yes | An optional image element to be displayed in the toast. | | icon | ReactNode | string | Yes | The icon to be displayed in the toast. It can be a ReactNode or a string representing the icon. | | color | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'base' | 'neutral' | 'accent' | Yes | The color variant of the toast notification. |

Example

Here is an example of using the CustomToastUI component with react-hot-toast:

const showToast = () => {
  toast.custom((t) => (
    <CustomToastUI
      toast={t}
      t={t}
      title="Title"
      content="Content"
      image={<Image src="https://daisyui.com/logo-full.svg" />}
      icon={<Icon name="close" />}
      color="primary"
    />
  ));
};
 
// Trigger the toast notification
showToast();

This will render a custom toast notification with the specified title, content, image, icon, and color. Customize the props as needed for your application.