Log InSign Up
All Posts

Introducing React Toast and Inbox for Notifications That Don’t Suck

Riley Napier

August 31, 2021

We are excited to announce the availability of Courier’s newest provider, Courier Push! We have released Inbox and Toast, two open source React components that exemplify the potential future applications of this feature. With Toast, you can send your user a notification within your web application and Inbox allows you to create an embeddable notification repository so that your user can access all past in-app notifications.

Most importantly, Courier Push allows us the flexibility and customization to do app-to-user communication right. As software users ourselves, we are bombarded with messages constantly, which can...really suck. Yet, notifications are necessary to communicate with users. With Courier Toast and Inbox, developers can support custom notifications for their users’ specificities and communicate through multiple wide-ranging channels while maintaining a single in-app notifications repository. We are particularly excited about all the potential future applications of Courier Push in addition to Toast and Inbox and are looking forward to expanding its uses.

Here at Courier, we want to improve the integration experience for you, the developer, and the notification experience for your customers. We’ve done this with Courier Toast and Inbox.

Courier Toast and Inbox

What is Toast

One of the major tenets of Courier’s product offerings is sending notifications. Receiving them and displaying them in your application is game changing. The ease of implementation makes your job as a developer simple and enables you to build real-time web applications that provide a better user experience for your customers. Your end-users can see customized notifications pop up in your web application through a modular system you can easily customize.


What is Inbox

Alongside Toast messages is a customizable inbox, which is essentially a notification history. This takes the pressure off users to respond immediately, lessening the anxiety around the experience in general. Inside Inbox, a user can:

  • Read their messages
  • Mark messages as read or unread
  • Delete messages


How to Integrate Toast and Inbox in a React App

Let’s walk through how you can integrate Courier Toast and Inbox React Components in a React app. Check out the Courier React Components repository on GitHub.

Step 1: Install CourierProvider

1 @trycourier/react-provider handle all of the authentication and integration with the backend.

1 yarn add @trycourier/react-provider or npm i @trycourier/react-provider

Step 2: At the top level in your React tree, add something that resembles the following code. The Client Key can be found here and the User Id is the identifier for identifying your user. Note that it will be used later in the API call to courier.

1 2 3 4 5 6 7 8 9 10 11 import { CourierProvider } from "@trycourier/react-provider"; import { Toast } from "@trycourier/react-toast"; const MyApp = ({ children }) => { return ( <CourierProvider clientKey={CLIENT_KEY} userId={USER_ID}> <Toast /> {children} </CourierProvider> ); };

N/B: You can add Toast to the frontend anywhere as long as it’s a child of the CourierProvider.

Step 3: Inbox should be added in the application as a child of CourierProvider, but where you want the Bell icon to display. For this example, we will just put it right next to Toast.

yarn add @trycourier/react-inbox or npm i @trycourier/react-inbox
1 2 3 4 5 6 7 8 9 10 11 12 13 import { CourierProvider } from "@trycourier/react-provider"; import { Toast } from "@trycourier/react-toast"; import { Inbox } from "@trycourier/react-inbox"; const MyApp = ({ children }) => { return ( <CourierProvider clientKey={CLIENT_KEY} userId={USER_ID}> <Toast /> <Inbox /> {children} </CourierProvider> ); };

How to Customize Toast and Inbox

There are two ways to customize your Inbox and Toast. First you can use the studio to customize your application and the components will automatically update when the brand is published.


The second, you can pass properties right into each component. Each component supports a theme and also supports render properties. Here’s the code for props:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 interface InboxProps = { //Icon Class Name className?: string; // Default Icon to use if no Icon is present in Message defaultIcon?: false | string; // Placement of the Bell relative to the Inbox placement?: "top" | "left" | "right" | "bottom"; // Render Props for Custom Rendering renderTabs?: React.FunctionComponent<{ currentTab?: ITab; tabs?: ITab[]; }>; renderFooter?: React.FunctionComponent; renderHeader?: React.FunctionComponent; renderIcon?: React.FunctionComponent<{ unreadMessageCount?: number; }>; renderMessage?: React.FunctionComponent<IMessage>; renderNoMessages?: React.FunctionComponent; // Tab Overrides tabs?: Array<ITab>; theme?: ThemeObject; // Inbox Title Override title?: string; trigger?: "click" | "hover"; }


Courier Push opens the doors to perfecting app-to-human communication with its flexibility and potential for customization. Communication is a two-way street that requires not only good messaging, but also a channel and style that works uniquely for a specific type of user using a specific app. With Toast and Inbox, developers can create an effective notifications system that reaches end users when they want, how they want, and the way they want. To learn more, check out the documentation.

We believe that providing contextual notifications from within your app is an opportunity to provide better, more intuitive, and more interesting user experiences. We also believe that if done right, these can take us a long way towards accomplishing our goal of making computer to human communication delightful. This is just the beginning of our investment in solving this problem, so please stay tuned for more.

Check out Inbox and Toast and let us know what you think! Your feedback helps us to continuously improve.

More from Courier


How We Built Our Documentation On Docusaurus

To cover our bases, we needed to improve and expand our documentation and this time, we wanted to make i...

Vahagn Aharonian

May 18, 2022


Why Courier is Now Remote-first

As the Courier has evolved, we’ve decided to shift to a remote-first model. Although we had good reasons...

Aman Kandola

April 21, 2022

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Email & push notification









© 2022 Courier. All rights reserved.