@trycourier/react-provider

• Version 5.X CSP Migration
• Props
• Listening to Messsages
• Dark Mode / Theme Variables

Version 5.X CSP Migration

We've released new subdomains to power Inbox and Toast. This migration only applies to Inbox and Toast users who applied our old URLs to their Content Security Policy.

Before	After	Usage
https://api.courier.com	https://api.courier.com	Brands and User Preferences
wss://1x60p1o3h8.execute-api.us-east-1.amazonaws.com	wss://realtime.courier.com	Websockets
https://fxw3r7gdm9.execute-api.us-east-1.amazonaws.com	https://inbox.courier.com	Inbox Messages

Props

interface ICourierProvider {
  /**
   * Token from the Courier auth/issue-token endpoint. Should have
   * user_id scope (user_id:<user-id-here>) and inbox:read:messages at a
   * minimum.
   */
  authorization?: string;
  brand?: Brand;
  brandId?: string;

  /** Allows the browser to modify or react to a received message before the message is displayed to the user */
  onMessage?: (
    message?: IInboxMessagePrpeview
  ) => IInboxMessagePrpeview | undefined;

  /** Courier client key. Along with userId and userSignature this can be used as an alternative to the authorization field / token. */
  clientKey?: string;
  /** Required if using client key and signature */
  userId?: string;
  /** User id signed by courier api key (hmac) */
  userSignature?: string;

  wsOptions?: WSOptions;
}

interface WSOptions {
  url?: string;
  onError?: (error: { message: string; error: Error }) => void;
  onClose?: () => void;
  connectionTimeout?: number;
}

interface Brand {
  inapp?: {
    disableCourierFooter?: boolean;
    borderRadius?: string;
    disableMessageIcon?: boolean;
    placement?: "top" | "bottom" | "left" | "right";
    emptyState?: {
      textColor?: string;
      text?: string;
    };
    icons?: {
      bell?: string;
      message?: string;
    };
    toast?: {
      borderRadius?: string;
      timerAutoClose?: number;
    };
  };
  colors?: {
    primary?: string;
    secondary?: string;
    tertiary?: string;
  };
}

Listening to Messsages

There are a few ways to listen for messages and being able react.

• Via Props

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

const MyApp = ({ children }) => {
  const handleOnMessage = (messsage: IInboxMessagePreview) => {
    console.log(message);
    return message;
  };

  return (
    <CourierProvider onMessage={handleOnMessage}>{children}</CourierProvider>
  );
};

• Via Transport

You can create a Transport and pass it into CourierProvider.

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

const courierTransport = new CourierTransport({
  clientKey: CLIENT_KEY,
});

const MyApp = ({ children }) => {
  useEffect(() => {
    courierTransport.intercept((message) => {
      console.log(message);
      return message;
    });
  });

  return (
    <CourierProvider transport={courierTransport}>{children}</CourierProvider>
  );
};

• Via useCourier hook

If you don't pass in a transport, we will automatically create one. You can then access the transport via the CourierContext exposed through useCourier.

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

const courierTransport = new CourierTransport({
  clientKey: CLIENT_KEY,
});

const MyComponent = () => {
  const courier = useCourier();

  useEffect(() => {
    courier.transport.intercept((message) => {
      console.log(message);
      return message;
    });
  });

  return <div>Hello World</div>;
};

const MyApp = ({ children }) => {
  return (
    <CourierProvider>
      <MyComponent />
    </CourierProvider>
  );
};

Dark Mode / Theme Variables

Dark mode is supported by passing "theme.colorMode" to the CourierProvider

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

const MyApp = ({ children }) => {
  return (
    <CourierProvider thene={{ colorMode: "dark" }}>{children}</CourierProvider>
  );
};

You can customize darkmode by passing in variables to the root level theme:

export interface ThemeVariables {
  background?: string;
  textColor?: string;
  titleColor?: string;
  structure?: string;
  icon?: string;
}```

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

const MyApp = ({ children }) => {
  return (
    <CourierProvider thene={{variables: {
        background: "red",
        textColor: "blue",
        titleColor: "green",
        structure: "pink",
        icon: "orange"
    }}}>{children}</CourierProvider>
  );
};