react-js-toastable v1.0.1

react-js-toastable

react-js-toastable is a lightweight and customizable toast notification library for React applications.

Features

• Easy to use API
• Customizable styles
• Supports multiple notification types
• Can be used with any React project

Installation

You can install react-js-toastable using npm:

Usage

Displaying notification

To display a success notification, import CreateToast from react-js-toastable and call it with the desired message and options:

import { CreateToast } from "react-js-toastable";

function App() {
  const handleClick = () => {
    CreateToast({
      type: "success", // required
      message: "Task completed successfully!", // required
      position: "center", // required
      duration: 2000, // optional
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Handle Toast</button>
    </div>
  );
}

export default App;

Customizing the notification styles

You can customize the styles of the notification container and text by passing a containerStyle and textStyle object to the createToast function:

CreateToast({
  type: "success",
  message: "Task completed successfully!",
  containerStyle: { backgroundColor: "#00cc99", borderRadius: "5px" },
  textStyle: { color: "#fff", fontWeight: "bold" },
});

CreateToast(props)

Create and display a toast notification with the given props.

Props

The position prop is required and specifies the position of the toast notification container. It must be one of the following values:

• "top": Display the container at the top of the screen.
• "right": Display the container on the right side of the screen.
• "bottom": Display the container at the bottom of the screen.
• "left": Display the container on the left side of the screen.
• "center": Display the container in the center of the screen.