React integration for Courier In App components

Getting started guide for integrating Courier's Inbox and Toast components using React.

riley avatar
Written by riley
Updated over a week ago

Topics

What is Courier in-app?

In-App is a set of features and components that can be embedded inside any html page to enhance their functionality. They are opinionated, configurable, and themable user interfaces that integrate directly with Courier's APIs to help ease the pain of building a complex notification system.

Why we built these components

We built In-App Components first of all because notifications are hard and integrating third-party applications is hard too. If you wanted to build something like this yourself or wanted to build a user interface to integrate with Courier's backend, you'd have to solve problems like authentication, building proxy api routes to pass the data off to Courier, and then the maintenance costs of upgrading when Courier offers new features wouldn't be a walk in the park.

Courier in-app components are easy to integrate, work seamlessly with Courier's APIs, and can be styled to match any existing website.

Adding the Courier Push Provider

Before getting started, make sure you have an active account on https://app.courier.com. Next:

  1. Navigate to the Courier Push Provider.

  2. Click the Install button in the bottom right of the page.

image

We will be coming back here shortly to copy the Client Key when we are ready to integrate the components.

Courier React component integration

This is a contrived example of using In-App React Components. The repository for all of our React Components is: https://github.com/trycourier/courier-react

Installing CourierProvider

All Courier Components require CourierProvider installed from @trycourier/react-provider. This handles all of the authentication and integration with the backend.

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

Using the Courier Provider is easy. At the top level in your React tree, add something that resembles the following. The Client Key can be found here and the User Id is the identifier you use to identify your user. This will be used later in the API call to courier.

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>
);
};

Integrating the React toast component

You can add Toast to the frontend anywhere as long as it's a child of the CourierProvider.

yarn add @trycourier/react-toast or npm i @trycourier/react-toast

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>
);
};

Integrating the React inbox component

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

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> ); };
Did this answer your question?