Skip to main content
This documentation is for v7 and below of Courier’s React SDK, which is in maintenance mode.We recommend following the v8 migration guide upgrade to Courier React.

​
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