@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:

• Mark as read/unread
• View all unread

How does @trycourier/react-inbox work?

The react inbox requires a backend to pull messages. This is all done magically through the CourierProvider and requires an account at Courier.

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 clientKey="my-client-key">
      <Inbox />
    </CourierProvider>
  );
}

You can access your client key here

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

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