React Toast Notifications Made Easy

Last updated on September 27, 2024

Notifications have the potential to be a cumbersome feature to develop — and project managers might think they’re something you can just whip up a day before a product launch; after all, it’s just a tiny little box with a call to action!

Luckily for those of us out there who don’t want to stress and work late to get these projects done, there are plenty of libraries out there to help us implement notifications quickly.

With close to half a million downloads a week by the end of 2020, React-toastify is a popular notification library offering easy implementation of a small, customizable notification system. With a library like this, you can get notifications up and running without taking up too much of your time.

Don’t custom build a toaster when you can find one on the internet

One thing to consider when choosing to build vs. finding an existing library is the time it will take to roll out a custom solution vs. the size, functionality, and implementation effort of a library that already exists.

At 7.1kb zipped, React-toastify is an attractive solution over building a React toast notification system yourself.

Before we get into the demo code, let’s take a look at some of the features that make React-toastify a tempting library to implement.

Position on screen

This is an obvious one — top or bottom on the left, right, or center. Where you place your notifications for maximum visibility and to ensure high engagement rates will depend on your product and your users’ habits. If this data isn’t available to you, consider creating a tracking plan to start gathering data about how users respond to your notifications (this rings true for all choices you make regarding notification design).

Custom notification types

This is another obvious but important feature. Choose between the default notification type, or implement color-formatting notifications for information, success, warnings, and errors. There’s even support for dark mode!

Auto-close with timing and transitions and Swipe to close

There are multiple options for dismissing notifications, including auto-close with a timer you can customize or have pause on user hover. There are also the classic swipe/drag to close and the straightforward click to close options. All are supported on the web and mobile.

Right-to-left text support

If your market includes those who speak languages that are written right to left, there’s support for RTL text! If your product currently only supports one left-to-right language, having right-to-left text support for future growth is always a good thing. We love inclusion.

Custom Animations

If the four default animation options aren’t your cup of tea, the docs will point you to support for customization with react-transition-group as well as React-toastify’s own cssTransition helper. This allows you to create your own enter and exit transitions by either building custom solutions or bringing in other CSS animation libraries.

Get Started on Your React Toast Notifications 🍞

To get started on your React toast notifications, use either:

$ npm install --save react-toastify

or if you’re set up for yarn:

$ yarn add react-toastify

This is a basic setup as per the direction on their GitHub page:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div>
      <button onClick={() => toast("Wow so easy!")}>
        Notify!
      </button>
      <ToastContainer />
    </div>
  );
}

Alright, so after a read through the docs, we can see the ToastContainer component comes with a bunch of default settings related to position, type, and auto-close. This default toast notification will be on the top right and set to React-toastify’s default unicorn rainbow 🦄 notification style.

Let’s change up the notification location and type. We’ll customize the toast notification so it pops into view at the top center, and we’ll change the type of notification to an informative one, which will appear in the standard color format of blue.

To change the position, we’ll add the property to the ToastContainer component and specify where we want it:

<ToastContainer position="top-center" />

To change the notification type, we’ll need to change the toast emitter to the info type. Let’s also change the message to be content appropriate:

<button onClick={() => toast.info("You're informed!")}>
  Notify!
</button>

And that’s pretty much it! In mere minutes you can have a React toast notification implementation that’s convenient and customizable.

If you’ve got React-toastify up and running, you can see the default auto-close is set to five seconds, and the auto-close will pause functionality on hover. By default, both the click to close and the drag/swipe to close properties are set to true. It’s got a nice bounce CSS animation in and out. Let’s customize the auto-close to 10 seconds and add a (subjectively) nicer slide transition:

<ToastContainer position="top-center" autoClose={10000} />

React-toastify comes with four built-in transitions if you don’t want to roll your own. They are bounce (default), zoom, flip, and slide. To use a slide animation, we need to import it from the library, and then add it as a transition inside the emitter:

import { ToastContainer, toast, Slide } from "react-toastify";

<button
  onClick={() =>
    toast.info("You're informed !", {
     transition: Slide
    })
 }
>
  Notify !
</button>

And voilà! You’ve now got this wonderful little React toast notification app.

If you'd like to check out the working example, you can find it here.

Butter, jam, Vegemite: You have options with React toast notifications

As we’ve already touched on, React-toastify has some really cool features when you dig into it. Right-to-left text language support is important for the inclusion of all users and the languages your product supports (or could support in the future). Fully-customizable CSS animations are possible through the use of their CSS helper, and they also provide their list of CSS classes if you’d like to override them with your own styles. Even though this library is really popular, it isn’t the only option out there.

You can search around and select what library works best for you and your coding style and patterns. React-toast-notifications is a similar React toast notification library that offers a simple, clean design with plenty of customization options. Toasted notes looks very minimal upfront, but this sleek library also offers a completely customizable solution if needed through the use of a render callback.

So, not to worry if you’re asked to implement a notification system at the last minute! There are people who have already created and are continuing to contribute to great React toast notification libraries for you.

MagicBell is an easy-to-implement solution for your workflow notifications

Don’t neglect workflow notifications!

In today’s world of distractions throughout the workday, it can be easy to ignore or dismiss ill-timed workflow notifications. MagicBell offers a useful and usable in-app notification system for users to see their notifications when it’s convenient for them. Additionally, we host a whole pack of resources about React Notifications, so make sure to check those out.

Get started with MagicBell’s easy-to-implement, customizable workflow notification system. Check out how to create a notification in the docs, and check out our tutorial on how to implement MagicBell in Angular.

Related articles: