React Toast Popup is a simple and customizable toast notification component for React applications.
You can install React Toast Popup via npm:
npm install react-toast-popup
To use React Toast Popup in your React application, follow these steps:
Import the useNotification hook and necessary styles in your component:
import useNotification from "react-toast-popup";
Initialize the useNotification hook with your preferred position:
const { NotificationComponent, triggerNotification } =
useNotification("top-left");
- "bottom-left"
- "bottom-right"
- "top-left"
- "top-right"
Use NotificationComponent in your JSX to display notifications:
return (
<div className="App">
{NotificationComponent}
{/* Your other JSX content */}
</div>
);
Trigger notifications using the triggerNotification function:
triggerNotification({
type: "success",
message: "This is a success message!",
duration: 3000,
});
You can specify an animation type for the notifications. The available animations are:
- "fade"
- "pop"
- "slide"
triggerNotification({
type: "success",
message: "This is a success message with a pop animation!",
duration: 3000,
animation: "pop",
});
useNotification(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).
Here's a basic example of how to use React Toast Popup:
import React from "react";
import useNotification from "react-toast-popup";
function App() {
const { NotificationComponent, triggerNotification } =
useNotification("top-left");
const handleButtonClick = () => {
triggerNotification({
type: "success",
message: "This is a success message!",
duration: 3000,
});
};
return (
<div className="App">
{NotificationComponent}
<h1>Toast Component</h1>
<button onClick={handleButtonClick}>Show Success</button>
</div>
);
}
export default App;
This project is licensed under the MIT License - see the LICENSE file for details.