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 powerful and customizable React toast notification library designed for creating interactive, animated, and user-friendly notifications. Perfect for enhancing the user experience with features like 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 (e.g., 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 ReactDOM from "react-dom/client";
import { ToastProvider } from "as-react-noti";
import "as-react-noti/dist/AsToast.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>
);

In your App component, use the useToast hook to display notifications.

import React from "react";
import { useToast } from "as-react-noti";

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

  return (
    <div>
      <button
        onClick={() =>
          showToast("Hello, World!", "success", { duration: 3000 })
        }
      >
        Show Toast
      </button>
    </div>
  );
};

export default App;

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	Required	The type of toast, which controls the background color. Options: "success", "error", "warn", "info".
options	object	{}	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 (
    <div>
      <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>
    </div>
  );
};

const AppWrapper = () => (
  <ToastProvider>
    <App />
  </ToastProvider>
);

export default AppWrapper;

License

This project is licensed under the ISC License.