React.js SDK

The Courier React SDK provides access to a set of UI components and hooks that make building rich web applications with Courier easy.

The Courier Provider

Before you can use any of the UI components, you need to initialize the Courier Provider. This establishes an authenticated connection to Courier for a specified user and provides a context object that is required for the UI components.

Installation: yarn add @trycourier/react-provider

Usage:

import { CourierProvider } from "@trycourier/react-provider";

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

More info: https://github.com/trycourier/courier-react/tree/main/packages/react-provider

The Toast UI component

The Toast UI component is used to display brief, optional-expiring windows of information to a user.

Installation: yarn add @trycourier/react-toast

Usage:

import { Toast } from "@trycourier/react-toast";

function Component() {
  return (
        <Toast />
    );
}

Note: you must ensure that the Courier Provider has been initialized in a parent component in order for the Toast component to work properly.

More info: https://github.com/trycourier/courier-react/tree/main/packages/react-toast

The Inbox UI component

Inbox is a component used to display a history of read and unread messages to a user. If we send a message to a user when they are not logged in, or if they didn't interact with the message before it disappeared, we also have an Inbox to show the history of messages received.

Installation: Installation: yarn add @trycourier/react-inbox

Usage:

import { Toast } from "@trycourier/react-inbox";

function Component() {
  return (
        <Inbox />
    );
}

Note: you must ensure that the Courier Provider has been initialized in a parent component in order for the Inbox component to work properly.

More info: https://github.com/trycourier/courier-react/tree/main/packages/react-inbox

React Hooks

For developers that want to build their own Inbox UIs, there is a custom React Hook that you can use to receive data about messages and interact with them programmatically.

Installation: yarn add @trycourier/react-hooks

Usage:

import { useInbox } from "@trycourier/react-hooks";

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

  useEffect(() => {
    inbox.fetchMessages();
  }, []);

  return (
    <div>{ JSON.stringify(inbox.messages, null, 2) }</div>
  )
}

Note: you must ensure that the Courier Provider has been initialized in a parent component in order for the useInbox hook to work properly.

More info: https://github.com/trycourier/courier-react/tree/main/packages/react-hooks