as-react-noti

as-react-noti is a customizable React toast notification library. It supports various styles, animations, and positions for toast messages, allowing you to add notifications to your React application easily.

Description

as-react-noti is a lightweight and flexible toast notification library designed for React applications. It allows developers to create interactive, animated toast messages with a variety of customization options, including colors, animations, duration, and positioning. With as-react-noti, adding user-friendly notifications is simple and intuitive, enhancing the user experience in your applications.

Features

• Customizable colors, font size, and position (top-left, top-center, top-right)
• Support for multiple animations: fade, slide, zoom, and bounce
• Auto-close functionality with customizable duration

Installation

To install the package, use npm:

npm install as-react-noti

Usage

To use as-react-noti in your project, follow these steps:

1. Import the ToastProvider and useToast hook.
2. Wrap your application in the ToastProvider component to make the toast functionality available.
3. Use the showToast function from the useToast hook to trigger a toast notification.

Basic Example

import React from "react";
import { ToastProvider, useToast } from "as-react-noti";
import "as-react-noti/dist/AsToast.css";

const App = () => {
  const { showToast } = useToast();

  return (
    <ToastProvider>
      <button
        onClick={() =>
          showToast("This is a success message!", "success", {
            animation: "bounce",
            position: "top-center",
            duration: 5000,
          })
        }
      >
        Show Toast
      </button>
    </ToastProvider>
  );
};

export default App;

In the example above:

• showToast is called with a message, toast type (success), and options to customize the animation, position, and duration.
• ToastProvider wraps the app to provide toast context.

Props for showToast

The showToast function accepts the following parameters:

| Prop | Type | Default Value | Description | | --------- | ------ | ----------------- | -------------------------------------------------------------------------------------------------------- | | message | string | Required | The message to display in the toast. | | type | string | "info" Required | The type of toast, which controls background color. Options: "success", "error", "warn", "info". | | options | object | {} Required | An object containing additional options for customization. |

Options in options Object

| Option | Type | Default Value | Description | | ----------- | ------ | --------------- | ---------------------------------------------------------------------------------- | | bgColor | string | Based on type | Custom background color for the toast. | | textColor | string | #fff | Custom text color for the toast. | | fontSize | string | "16px" | Font size for the toast message. | | position | string | "top-right" | Position of the toast. Options: "top-right", "top-center", "top-left". | | animation | string | "fade" | Animation style for the toast. Options: "fade", "slide", "zoom", "bounce". | | direction | string | "right" | Direction for the slide animation. Options: "right", "left". | | duration | number | 3000 (in ms) | Duration in milliseconds before the toast auto-closes. |

Available Animations

• fade: Simple fade in and out animation
• slide: Slide in and out from the specified direction
• zoom: Zoom in and out effect
• bounce: Bouncy entrance and exit

Full Example with All Props

import React from "react";
import { ToastProvider, useToast } from "as-react-noti";
import "as-react-noti/dist/astoast.css";

const App = () => {
  const { showToast } = useToast();

  return (
    <ToastProvider>
      <button
        onClick={() =>
          showToast("This is a customized toast!", "warn", {
            bgColor: "#ffcc00",
            textColor: "#333",
            fontSize: "18px",
            position: "top-left",
            animation: "slide",
            direction: "left",
            duration: 4000,
          })
        }
      >
        Show Custom Toast
      </button>
    </ToastProvider>
  );
};

export default App;

License

This project is licensed under the MIT License.