@trycourier/courier-react-17

Using React 18+? Use the @trycourier/courier-react package.

Not using React? Use the @trycourier/courier-ui-inbox package.

Installation

npm install @trycourier/courier-react-17

Usage

Check out the Courier documentation for a full guide to Courier React.

If you’re coming from an earlier version of the Courier React SDK, check out the v8 migration guide for what’s changed, how to upgrade your app, and links to documentation for past versions of the React SDK.

Examples

Below are a few examples of the Courier Inbox. Visit the Courier documentation for more examples.

CourierInbox

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

export default function App() {

  const courier = useCourier();

  useEffect(() => {
    // Generate a JWT for your user (do this on your backend server)
    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT

    // Authenticate the user with the inbox
    courier.shared.signIn({
      userId: $YOUR_USER_ID,
      jwt: jwt,
    });
  }, []);

  return <CourierInbox />;

}

CourierInboxPopupMenu

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

export default function App() {

  const courier = useCourier();

  useEffect(() => {
    // Generate a JWT for your user (do this on your backend server)
    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT

    // Authenticate the user with the inbox
    courier.shared.signIn({
      userId: $YOUR_USER_ID,
      jwt: jwt,
    });
  }, []);

  return (
    <div style={{ padding: '24px' }}>
      <CourierInboxPopupMenu />
    </div>
  );

}

Share feedback with Courier

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

Open an issue: Courier Web Issues