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.