Courier React SDK

The Courier React SDK provides ready-made components and programmatic hooks for building notification experiences in React 18+ applications. It includes a full-featured inbox, popup menu, toast notifications, and a hook for custom UIs.

• <CourierInbox /> — full-featured inbox for displaying and managing messages
• <CourierInboxPopupMenu /> — popup menu version of the inbox
• <CourierToast /> — toast notifications for time-sensitive alerts
• useCourier() — hook for programmatic access and custom UIs

Not using React? Check out the @trycourier/courier-ui-inbox and @trycourier/courier-ui-toast packages, which provide Web Components for any JavaScript project.

Installation

npm install @trycourier/courier-react

Using React 17? Install @trycourier/courier-react-17 instead.

Quick Start

"use client"

import { useEffect } from "react";
import { CourierInbox, useCourier } from "@trycourier/courier-react";

export default function App() {
  const courier = useCourier();

  useEffect(() => {
    // Generate a JWT for your user on your backend server
    const jwt = "your-jwt-token";

    // Authenticate the user
    courier.shared.signIn({
      userId: "your-user-id",
      jwt: jwt,
    });
  }, []);

  return <CourierInbox />;
}

Authentication

The SDK requires a JWT (JSON Web Token) for authentication. Always generate JWTs on your backend server, never in client-side code.

1. Your client calls your backend to request a token.
2. Your backend calls the Courier Issue Token endpoint using your API key.
3. Your backend returns the JWT to your client and passes it to the SDK.

curl --request POST      --url https://api.courier.com/auth/issue-token      --header 'Authorization: Bearer $YOUR_API_KEY'      --header 'Content-Type: application/json'      --data '{
       "scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
       "expires_in": "1 day"
     }'

Documentation

Full documentation: courier.com/docs/sdk-libraries/courier-react-web

• Inbox implementation tutorial
• JWT authentication tutorial
• Theme reference
• v8 migration guide

Share feedback with Courier

Have an idea or feedback about our SDKs? Let us know!

Open an issue: Courier Web Issues