Inaipi-toast NPM

inaipi-toast

inaipi-toast is a simple and customizable toast notification library for React applications. It allows you to easily display success, warning, and error messages in a variety of positions.

Installation

To install inaipi-toast, run the following command:

npm install inaipi-toast --legacy-peer-deps

Usage

Import the Library

To use the inaipi-toast library, import it into your React component like this:

import { toast } from 'inaipi-toast';

Example

Here is a basic example of how to use the toast notifications in your React component:

import { toast } from 'inaipi-toast';
import React from 'react';

const App = () => {
  // Handler functions for each type of toast
  const showSuccessToast = () => {
    toast.success("Success", "This is a success message!", { position: "bottom-left" });
  };

  const showWarningToast = () => {
    toast.warning("Warning", "This is a warning message!", { position: "top-left" });
  };

  const showErrorToast = () => {
    toast.error("Error", "This is an error message!");
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Toast Notifications</h2>

      {/* Button to trigger success toast */}
      <button onClick={showSuccessToast} style={{ margin: '10px', padding: '10px' }}>
        Show Success Toast
      </button>

      {/* Button to trigger warning toast */}
      <button onClick={showWarningToast} style={{ margin: '10px', padding: '10px' }}>
        Show Warning Toast
      </button>

      {/* Button to trigger error toast */}
      <button onClick={showErrorToast} style={{ margin: '10px', padding: '10px' }}>
        Show Error Toast
      </button>
    </div>
  );
};

export default App;

Toast Types

inaipi-toast supports the following types of toast notifications:

Success: For success messages

toast.success("Success", "This is a success message!", { position: "bottom-left" });

Warning: For warning messages

toast.warning("Warning", "This is a warning message!", { position: "top-left" });

Error: For error messages

toast.error("Error", "This is an error message!");

Options

You can customize the position of your toast using the position option. The available positions are:

"top-left"
"top-right"
"bottom-left"
"bottom-right"

Example:

toast.success("Success", "This is a success message!", { position: "top-center" });

Customization

inaipi-toast is designed to be flexible, allowing you to customize the appearance and behavior as needed. You can customize things like the duration of the toast, animation styles, and more by modifying the options object.