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.