Lunaris-toast-popup NPM

lunaris-toast-popup

A lightweight and customizable toast notification library for React, providing visually appealing toast notifications with support for multiple types and styles.

Features

Four Toast Types: Supports error, warning, success, and info toast notifications.
Customizable Positioning: Easily control where toasts appear on the screen.
Rich Style Option: Enable a richer, more detailed toast style with additional customization options.
Auto-dismiss and Callbacks: Toasts automatically disappear after a specified duration with optional callbacks.

Installation

Install lunaris-toast-popup using npm:

npm install lunaris-toast-popup

Or using yarn:

yarn add lunaris-toast-popup

Usage

First, import the useToast hook from lunaris-toast-popup into your React component:

import {useToast} from "lunaris-toast-popup";

You can then use this hook to trigger toast notifications. Here's a basic example:

import {useToast} from "lunaris-toast-popup";

const App = () => {
  const { ToastComponent, triggerToast } = useToast("top-right");

  return (
    <div>
      <button onClick={() => triggerToast({
        title: "I am title",
        type: "success",
        message: "Hello, Toast!",
        duration: 3000,
        onClose: () => console.log("Toast closed"),
      })}>
        Show Toast
      </button>

      {/* Optionally render the ToastComponent to display the toast */}
      {ToastComponent}
    </div>
  );
};

export default App;

Animations

slide
pop
fade

<button onClick={() => triggerToast({
  animation: "fade",
  richStyle: true,
  title: "I am title",
  type: "success",
  message: "Hello, I am Success Toast!",
  duration: 3000,
  onClose: () => console.log("I am toast"),
})}>
  Show Rich Toast
</button>

Rich Style Toasts

If you want to use the richStyle variant, set the richStyle property to true:

<button onClick={() => triggerToast({
  richStyle: true,
  title: "I am title",
  type: "success",
  message: "Hello, I am Success Toast!",
  duration: 3000,
  onClose: () => console.log("I am toast"),
})}>
  Show Rich Toast
</button>