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.