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

| Name | Type | Required | Description | | -------------- | ------ | -------- | ----------------------------------------------------------------------------------------------------------------- | | type | string | Yes | The type of toast notification to display (e.g. 'success', 'warning', 'error'). | | message | string | Yes | The message to display in the toast notification. | | duration | number | No | The length of time (in milliseconds) to display the toast notification before automatically hiding it. | | textStyle | object | No | Additional styles to apply to the text of the toast notification. | | containerStyle | object | No | Additional styles to apply to the container of the toast notification. | | position | string | Yes | The position of the toast notification container. Valid values are "top", "right", "bottom", "left", or "center". |

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.