@trycourier/react-provider v5.1.2
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>
);
};
3 days ago
3 days ago
3 days ago
21 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
10 months ago
11 months ago
7 months ago
8 months ago
9 months ago
9 months ago
10 months ago
6 months ago
9 months ago
7 months ago
8 months ago
10 months ago
9 months ago
10 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
10 months ago
9 months ago
6 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
7 months ago
9 months ago
11 months ago
10 months ago
11 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
6 months ago
8 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
11 months ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago