React Toast Popup is a simple and customizable toast notification component for React applications.
npm install react-toast-popReact Toast Popup is a simple and customizable toast notification component for React applications.
!Frontend_System_Design_Questions__Toast_Component___HLD_LLD
You can install React Toast Popup via npm:
``jsx`
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:
`jsx`
import useNotification from "react-toast-popup";
Initialize the useNotification hook with your preferred position:
`jsx`
const { NotificationComponent, triggerNotification } =
useNotification("top-left");
#### Postions
- "bottom-left"
- "bottom-right"
- "top-left"
- "top-right"
Use NotificationComponent in your JSX to display notifications:
`jsx`
return (
{NotificationComponent}
{/ Your other JSX content /}
);
Trigger notifications using the triggerNotification function:
`jsx`
triggerNotification({
type: "success",
message: "This is a success message!",
duration: 3000,
});
#### Animations
You can specify an animation type for the notifications. The available animations are:
- "fade"
- "pop"
- "slide"
`jsx`
triggerNotification({
type: "success",
message: "This is a success message with a pop animation!",
duration: 3000,
animation: "pop",
});
`jsx`
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:
`jsx
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 (
export default App;
``
This project is licensed under the MIT License - see the LICENSE file for details.