React Toast Package

A simple and customizable React toast notification package.

Installation

To install the package, use npm:

npm install love-toast-package

Usage

Here's an example of how to use the my-toast-package in your React project:

Basic Example

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { ToastProvider, ToastContainer } from "love-toast-package";
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <ToastProvider>
      <App />
      <ToastContainer />
    </ToastProvider>
  </StrictMode>
);

import React from "react";
import { ToastProvider, useToast } from "love-toast-package";

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

  const handleShowToast = () => {
    addToast("This is a toast notification!", "warning", {
      duration: 1000, // 1 seconds
      position: "bottom-right", // Can be 'top-left', 'top-right', 'bottom-left', 'bottom-right'
    });
  };

  return (
    <div>
      <button onClick={handleShowToast}>Show Toast</button>
    </div>
  );
};

export default App;

Available Props

• showToast(message, options) : Function to display a toast message.

• message(string): The message to display in the toast.

• options(object): Options for customizing the toast.

• duration (number): Duration the toast is visible (in milliseconds). Default is 3000ms.

• position (string): Position on the screen ('top-right', 'top-left', 'bottom-right', 'bottom-left'). Default is 'top-right'.

ToastContainer

The container that holds the toast notifications. You can customize its appearance and behavior using the following props:

• style (object): Custom styles for the container.
• position (string): Position of the container on the screen ('top-right', 'top-left', 'bottom-right', 'bottom-left').

Toast

The toast notification component itself. You can customize its appearance using the following props:

• style (object): Custom styles for the toast notification.

Customization

You can customize the toast appearance by providing your own styles through the ToastContainer and Toast components.

import React from "react";
import { ToastProvider, ToastContainer, Toast } from "my-toast-package";

const CustomToast = () => (
  <ToastProvider>
    <ToastContainer style={{ backgroundColor: "lightblue", color: "black" }}>
      <Toast style={{ backgroundColor: "lightblue", color: "black" }} />
    </ToastContainer>
  </ToastProvider>
);

export default CustomToast;

License

This project is licensed under the ISC License.

Contact

For any questions or feedback, please feel free to contact me at [email protected].