Skip to main content


Github Docs: @trycourier/react-inbox

Courier Provider

Inbox is a React component that you can add to your application and show a user a list of recent messages they have received. Each message supports the following events:

  • Opened: When the Inbox is opened and a message is in view, we will fire off opened events. One event per message. We will not send > 1 opened per message.
  • Read/Unread
  • Archived: Archived messages will not be returned when fetching messages from the API.
  • Clicked: If Click Tracking is enabled, clicking a message that has an action will created a clicked event and also mark the message as read.


Similarly to Toast also requires the CourierProvider.

yarn add @trycourier/react-provider
yarn add @trycourier/react-inbox


npm i @trycourier/react-provider
npm i @trycourier/react-inbox

Headless React

Github Docs: @trycourier/react-hooks

React Hooks (useInbox, useToast, useCourier) exist as a separate package so that you can build your own interface using our api and state management without having to install all the dependencies that @trycourier/react-inbox or other react-dom based packages include.

This also enables using this package with react-native in a much simpler way.

import { CourierProvider } from "@trycourier/react-provider";
// const CourierProvider = require("@trycourier/react-provider").CourierProvider;

import { useInbox } from "@trycourier/react-hooks";
// const useInbox = require("@trycourier/react-hooks").useInbox;

const MyInbox = () => {
const inbox = useInbox();

useEffect(() => {
}, []);

const handleReadMessage = (message) => (event) => {

const handleUnreadMessage = (message) => (event) => {

const handleArchiveMessage = (message) => (event) => {

return (
{ => {
return (
{ ? (
<button onClick={handleUnreadMessage(message)}>
Unread Me
<button onClick={handleArchiveMessage(message)}>
Archive Me
) : (
<button onClick={handleReadMessage(message)}>Read Me</button>

const MyApp = () => {
return (
<CourierProvider userId="MY_USER_ID" clientKey="MY_CLIENT_KEY">
<MyInbox />

Other Frameworks

Github Docs: Embedded Inbox

All of the Inbox components are built in React but we do have options for non-react development teams. These components can be embedded in any website using a simple <script> tag and courier specific html tags. This is useful if you don't have a React build but still want to use Courier's components.