As-react-noti NPM

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:

Import the ToastProvider and useToast hook.
Wrap your application in the ToastProvider component to make the toast functionality available.
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;