How To Create Custom Alerts In React Using React Toastify

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 the ToastContainer, toast method, and accompanying CSS file provided by the package.

The ToastContainer inside the App component stores all toast notifications created.

You can use the toast methods to create toast notifications for your React project:

Clicking on the button this code generates will call the toast.success method, 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 as toast.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 the ToastContainer. 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 the ToastContainer to the top-left ensures that all toast notifications pop up from the top-left side of the screen.

You can change the default position for individual toast notifications by using the position prop of the toast methods:

You can also position Toast notifications using 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 the autoClose prop. You can alter the delay time for all toast notifications and individual-specific toast notifications. The autoClose prop only accepts the boolean value false or a duration in milliseconds.

To alter the delay time for all toast notifications, use the autoClose prop within the ToastContainer element.

For example:

With the above settings, all toast notifications will display for exactly five seconds (5,000 milliseconds).

Using the autoClose property of each toast method, you can customize the delay time for individual toast notifications.

For example:

To prevent the toast notification from closing by default, you can set the autoClose prop to false. You can ensure the user must manually close each toast notification by setting the autoClose prop of the ToastContainer to false.

For example:

Setting the autoClose prop of individual toast methods to false will also ensure that those specific toast notifications do not close by default.

Rendering Non-String Notifications With Toastify

You can 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 a toast method.

For example:

This code block creates a component, Message. When rendering a component as a notification, toast adds toastProps and closeToast props to your component. The closeToast prop is a function that you can use to close the notification. The toastProps prop 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 a className and apply the customizations within a CSS file.

For example:

With the className attached 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 can 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.