1.0.4 • Published 10 months ago

lunaris-toast-popup v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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>

Toast Types

The library supports the following toast types:

  • error: Displays an error notification.
  • warning: Displays a warning notification.
  • success: Displays a success notification.
  • info: Displays an informational notification.

GIF Previews

  • Default Style:

    default style

  • Rich Style:

    rich style

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your changes. License

Distributed under the MIT License. See LICENSE for more information.