React Toast Popup

React Toast Popup is a simple and customizable toast notification component for React applications.

Installation

You can install React Toast Popup via npm:

1npm install react-toast-popup

Usage

To use React Toast Popup in your React application, follow these steps:

Import the useNotification hook and necessary styles in your component:

1import useNotification from "react-toast-popup";

Initialize the useNotification hook with your preferred position:

1const { NotificationComponent, triggerNotification } =
2  useNotification("top-left");

Postions

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

Use NotificationComponent in your JSX to display notifications:

1return (
2  <div className="App">
3    {NotificationComponent}
4    {/* Your other JSX content */}
5  </div>
6);

Trigger notifications using the triggerNotification function:

1triggerNotification({
2  type: "success",
3  message: "This is a success message!",
4  duration: 3000,
5});

Animations

You can specify an animation type for the notifications. The available animations are:

• "fade"
• "pop"
• "slide"

1triggerNotification({
2  type: "success",
3  message: "This is a success message with a pop animation!",
4  duration: 3000,
5  animation: "pop",
6});

API

1useNotification(position: PositionType)

This hook returns an object with the following properties:

• NotificationComponent: React element representing the notification container.
• triggerNotification(notificationProps: NotificationProps): Function to trigger a notification with the specified properties.

NotificationProps The triggerNotification function accepts an object of type NotificationProps, which includes:

• type: Type of the notification (success, info, warning, error).
• message: Message to display in the notification.
• duration: Duration in milliseconds for which the notification should be displayed.
• animation (optional): Animation type for the notification (fade, pop, slide).

Example

Here's a basic example of how to use React Toast Popup:

1import React from "react";
2import useNotification from "react-toast-popup";
3
4function App() {
5  const { NotificationComponent, triggerNotification } =
6    useNotification("top-left");
7
8  const handleButtonClick = () => {
9    triggerNotification({
10      type: "success",
11      message: "This is a success message!",
12      duration: 3000,
13    });
14  };
15
16  return (
17    <div className="App">
18      {NotificationComponent}
19      <h1>Toast Component</h1>
20      <button onClick={handleButtonClick}>Show Success</button>
21    </div>
22  );
23}
24
25export default App;

License

This project is licensed under the MIT License - see the LICENSE file for details.