There are a few popular packages and frameworks for making alert messages in React.
React-Toastify is a React library that lets you add notifications and alert messages to your applications.
TheToastContainerinside the App component stores all toast notifications created.
Each of these methods has some subtle color styling to reflect the jot down of message.
you’ve got the option to change this by setting the position property on theToastContainer.
There are six position values available: top-right, top-center, top-left, bottom-right, bottom-center, and bottom-left.
you’re free to control how long a toast notification stays open using theautoCloseprop.
you could alter the delay time for all toast notifications and individual-specific toast notifications.
TheautoCloseprop only accepts the boolean value false or a duration in milliseconds.
To alter the delay time for all toast notifications, use theautoCloseprop within theToastContainerelement.
With the above controls, all toast notifications will display for exactly five seconds (5,000 milliseconds).
Using theautoCloseproperty of eachtoastmethod, you could customize the delay time for individual toast notifications.
Setting theautoCloseprop of individualtoastmethods tofalsewill also ensure that those specific toast notifications do not close by default.
To render a React component as a toast notification, you create the component and render it using atoastmethod.
This code block creates a component,Message.
When rendering a component as a notification, toast addstoastPropsandcloseToastprops to your component.
ThecloseToastprop is a function that you’re able to use to end the notification.
Styling Toast Notifications
You don’t have to use the default styling for your toast notifications.
To style your toast notification, give it aclassNameandapply the customizations within a CSS file.
React-Toastify offers a quick and effective method for including custom alerts in your React project without fuss.
