@trycourier/react-inbox

Courier React Inbox

Table of Contents

1. Overview
2. Client Install
3. Courier Provider
4. Using Transport
5. Props
6. Inbox Config

Overview

What is Courier React Inbox?

Courier React Inbox is a react component that you can add to your application show your users a list of recent messages they have received over a push channel.

Upcoming Features:

• Browser Web Push
• Presence

How does @trycourier/react-inbox work?

The react inbox requires a backend to pull messages. This is all done through the CourierProvider and requires an account at Courier. To set up Courier Inbox you will need to install Courier from the integrations page. Courier Push integration After installing the integration you will be provided with a Client Key

As of right now, we will fetch all messages sent to any push channel and display them in the inbox.

---

Client Install

yarn add @trycourier/react-inbox

---

Courier Provider

In order for the Toast component to be placed in the dom you will need to use the ToastProvider. This will handle context and give us access to the show function.

The component you want to listen to toasts from must be a child of the ToastProvider. Check here for more information on this concept.

//App.js
import { Inbox, CourierProvider } from "@trycourier/react-inbox";
/*
alternatively you can access from its own package
import { CourierProvider } from "@trycourier/react-provider";
*/

function App() {
  return (
    <CourierProvider userId={yourUserId} clientKey={yourClientKey}>
      <Inbox />
    </CourierProvider>
  );
}

Using Transport

To let your inbox listen for new messages, you will need to add a transport. Using the courier transport will automatically handle the listening, and invocation through web sockets.

In order to display messages for a specific user you will also need to supply the recipientId as the userId to the CourierProvider. All messages sent through Courier have a recipientId and you can see that in the Data tab or from the request you are sending.

Check out this for more information on recipients

Using the Courier Transport

import {
  CourierProvider,
  CourierTransport,
  Inbox,
} from "@trycourier/react-inbox";

const courierTransport = new CourierTransport();

function MyComponent() {
  useEffect(() => {
    courierTransport.subscribe("YOUR_CHANNEL", "YOUR_EVENT");
    // It is good practice to unsubscribe on component unmount
    return () => courierTransport.unsubscribe("YOUR_CHANNEL", "YOUR_EVENT");
  }, []);

  return (
    <CourierProvider transport={courierTransport} clientKey="my-client-key">
      <Inbox />
    </CourierProvider>
  );
}

Props

Key	Type	Description
config	InboxConfig	See Inbox Config
title	string	Title of the Inbox
theme	Theme	Theme object used to override base styles
renderIcon	FunctionComponent	Override Indicator Icon Component
renderHeader	FunctionComponent	Override Header Component
renderMessage	FunctionComponent	Override Message Component
renderFooter	FunctionComponent	Override Footer Component

Inbox Config

Key	Type	Description
defaultIcon	`string	false`

Theme

interface ITheme {
  footer?: React.CSSProperties;
  header?: React.CSSProperties;
  icon?: React.CSSProperties;
  messageList?: {
    container?: React.CSSProperties;
    message?: {
      actions?: {
        container?: React.CSSProperties;
        details?: React.CSSProperties;
        dismiss?: React.CSSProperties;
      }
      body?: React.CSSProperties;
      container?: React.CSSProperties;
      icon?: React.CSSProperties;
      title?: React.CSSProperties;
      unreadIndicator?: React.CSSProperties;
    }
  };
  tabList?: {
    container?: React.CSSProperties;
    tab?: React.CSSProperties;
  };
  root?: React.CSSProperties;
}