Beautiful Toast

💥 Effortlessly create stunning and customizable toast notifications for your applications.

Demo

Codesandbox Playground

Installation

$ npm i beautiful-toast

Features

• Super easy to use! ⚡
• Multi theme support 🌈
• Progress bar for timer 🕐
• Limit on number of toasts 🔴
• Customizable toast icon ✅
• Customizable toast theme 🎉

Usage

Step 1: Import beautiful-toast

import useToast from "beautiful-toast";

Step 2: Initialize the Toast Hook
Use the useToast hook to initialize the toast component. Specify the position and the maximum number of toasts to display(Note: defaults to no limit).

Step 3: Render toast component

function App() {
  const { ToastComponent, showToast } = useToast("bottom-right", 5);
  return (
    <div>{ToastComponent}</div>
  )
}

Step 4: Create Toasts
Use the showToast function to create and display different types of toasts. Below are examples of creating success, info, warning, error and customised toast with different themes.

Success Toast

<button
  onClick={() =>
    showToast({
      type: "success",
      message: "Result Successful",
      description: "Data from API was fetched",
      theme: "dark",
      duration: 5000,
    })
  }
>
  Show success
</button>

Info Toast

<button
  onClick={() =>
    showToast({
      type: "info",
      message: "This is an info toast",
      theme: "light",
      duration: 5000,
    })
  }
>
  Show info
</button>

Warning Toast

<button
  onClick={() =>
    showToast({
      type: "warning",
      message: "This is a warning toast",
      theme: "colored",
      duration: 5000,
    })
  }
>
  Show warning
</button>

Error Toast

<button
  onClick={() =>
    showToast({
      type: "error",
      message: "This is an error toast",
      theme: "dark",
      duration: 5000,
    })
  }
>
  Show error
</button>

Customised Toast

<button
  onClick={() =>
    showToast({
      type: "success",
      message: "This is a customised toast",
      description: "Data from API is being fetched",
      theme: "custom",
      customStyles: {
        bgColor: "beige",
        timerColor: "red",
        timerHeight: "15px",
        titleColor: "blue",
        titleSize: "18px",
        descriptionColor: "blue",
        descriptionSize: "16pxpx",
        closeButtonColor: "red",
        closeButtonSize: "20px",
      },
      duration: 5000,
    })
  }
>
  Show Toast
</button>

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome in the issues section.