How to Create Custom Alerts in React Using React-Toastify
Alert messages are often used in web apps to display warnings, errors, success messages, and other valuable information.
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.
Installing React Toastify
To install Toastify in your React project, run this command in your project directory:
Setting Up Toastify
To use the Toastify package, you will need to import theToastContainer,toastmethod, and accompanying CSS file provided by the package.
TheToastContainerinside the App component stores all toast notifications created.
You can use thetoastmethods to create toast notifications for your React project:
Clicking on the button this code generates will call thetoast.successmethod, passing it the “Hello There!” string. This will create a toast notification that displays the message on screen, like this:
Note there are different types of toast methods you can call, such astoast.info(),toast.error(),toast.success(),toast.warning(). Each of these methods has some subtle color styling to reflect the type of message.
Positioning Your Toast Notifications
By default, toast notifications pop up from the top-right side of the web app’s screen. You can 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.
For example:
Setting the position prop on theToastContainerto the top-left ensures that all toast notifications pop up from the top-left side of the screen.
you may change the default position for individual toast notifications by using the position prop of thetoastmethods:
it’s possible to also position Toast notificationsusing the CSS position property, but Toastify’s position prop is the standard way to do this.
Handling the autoClose Prop of the Toast Method and ToastContainer
You can alter the display time of toast notifications. You can control how long a toast notification stays open using theautoCloseprop. You can 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 settings, all toast notifications will display for exactly five seconds (5,000 milliseconds).
Using theautoCloseproperty of eachtoastmethod, you can customize the delay time for individual toast notifications.
To prevent the toast notification from closing by default, you may set theautoCloseprop tofalse. You can ensure the user must manually close each toast notification by setting theautoCloseprop of theToastContainerto false.
Setting theautoCloseprop of individualtoastmethods tofalsewill also ensure that those specific toast notifications do not close by default.
Rendering Non-String Notifications With Toastify
you may render strings, react components, and numbers as notification messages when working with toast notifications. 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 can use to close the notification. ThetoastPropsprop is an object with properties that store details about the toast notification including its position, type, and other characteristics.
Import the Message component, then pass it to the toast() function, rendering it as a toast notification:
Clicking on the button will cause a notification containing a question and two buttons to display on your screen.
Styling Toast Notifications
You don’t have to use the default styling for your toast notifications. You can customize them to fit a desired design theme or pattern suited to your web application.
To style your toast notification, give it aclassNameandapply the customizations within a CSS file.
With theclassNameattached to your notification, you can style the toast notification to your preference inside the CSS file:
As a result of the above custom styling, the notification will look like this:
Toast Notifications for Your Web Application
you’re able to now create custom alerts in React using the React-Toastify package and its available methods. By styling these custom alerts/notifications to your preference, you can enhance the user experience of your web application.
React-Toastify offers a quick and effective method for including custom alerts in your React project without fuss.
Get up to speed with the React framework by building this simple app.
You don’t need to fork out for expensive hardware to run an AI on your PC.
This small feature makes a massive difference.
Anyone with more than a passing interest in motorsports must see these films.
The fix was buried in one tiny toggle.
Now, I actually finish the books I start.
