@trycourier/courier-react 9.0.3 → 9.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -53
- package/dist/components/courier-toast.d.ts +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,87 +1,74 @@
|
|
|
1
|
-
|
|
1
|
+
<!-- AUTO-GENERATED-OVERVIEW:START — Do not edit this section. It is synced from mintlify-docs. -->
|
|
2
|
+
# Courier React SDK
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
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.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
- [`<CourierInbox />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#inbox-component) — full-featured inbox for displaying and managing messages
|
|
7
|
+
- [`<CourierInboxPopupMenu />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#inbox-component) — popup menu version of the inbox
|
|
8
|
+
- [`<CourierToast />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#toast-component) — toast notifications for time-sensitive alerts
|
|
9
|
+
- [`useCourier()`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#usecourier-hook) — hook for programmatic access and custom UIs
|
|
10
|
+
|
|
11
|
+
> **Not using React?** Check out the [`@trycourier/courier-ui-inbox`](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-ui-inbox) and [`@trycourier/courier-ui-toast`](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-ui-toast) packages, which provide Web Components for any JavaScript project.
|
|
6
12
|
|
|
7
13
|
## Installation
|
|
8
14
|
|
|
9
|
-
```
|
|
15
|
+
```bash
|
|
10
16
|
npm install @trycourier/courier-react
|
|
11
17
|
```
|
|
12
18
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for a full guide to Courier React.
|
|
16
|
-
|
|
17
|
-
If you’re coming from an earlier version of the Courier React SDK,
|
|
18
|
-
check out [the v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide)
|
|
19
|
-
for what’s changed, how to upgrade your app,
|
|
20
|
-
and links to documentation for past versions of the React SDK.
|
|
21
|
-
|
|
22
|
-
## Examples
|
|
23
|
-
|
|
24
|
-
Below are a few examples of the Courier Inbox. Visit the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for more examples.
|
|
19
|
+
> Using React 17? Install [`@trycourier/courier-react-17`](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-react-17) instead.
|
|
25
20
|
|
|
26
|
-
|
|
21
|
+
## Quick Start
|
|
27
22
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
import { useEffect } from 'react';
|
|
32
|
-
import { CourierInbox, useCourier } from '@trycourier/courier-react';
|
|
23
|
+
```jsx
|
|
24
|
+
import { useEffect } from "react";
|
|
25
|
+
import { CourierInbox, useCourier } from "@trycourier/courier-react";
|
|
33
26
|
|
|
34
27
|
export default function App() {
|
|
35
|
-
|
|
36
28
|
const courier = useCourier();
|
|
37
29
|
|
|
38
30
|
useEffect(() => {
|
|
39
|
-
// Generate a JWT for your user
|
|
40
|
-
const jwt =
|
|
31
|
+
// Generate a JWT for your user on your backend server
|
|
32
|
+
const jwt = "your-jwt-token";
|
|
41
33
|
|
|
42
|
-
// Authenticate the user
|
|
34
|
+
// Authenticate the user
|
|
43
35
|
courier.shared.signIn({
|
|
44
|
-
userId:
|
|
36
|
+
userId: "your-user-id",
|
|
45
37
|
jwt: jwt,
|
|
46
38
|
});
|
|
47
39
|
}, []);
|
|
48
40
|
|
|
49
41
|
return <CourierInbox />;
|
|
50
|
-
|
|
51
42
|
}
|
|
52
43
|
```
|
|
53
44
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<img width="605" alt="Screenshot 2025-06-25 at 5 21 53 PM" src="https://github.com/user-attachments/assets/1c5497ba-a860-4d7e-8cf7-5b56a65cea51" />
|
|
57
|
-
|
|
58
|
-
```ts
|
|
59
|
-
import { useEffect } from 'react';
|
|
60
|
-
import { CourierInbox, useCourier } from '@trycourier/courier-react';
|
|
45
|
+
## Authentication
|
|
61
46
|
|
|
62
|
-
|
|
47
|
+
The SDK requires a JWT (JSON Web Token) for authentication. **Always generate JWTs on your backend server, never in client-side code.**
|
|
63
48
|
|
|
64
|
-
|
|
49
|
+
1. Your client calls your backend to request a token.
|
|
50
|
+
2. Your backend calls the [Courier Issue Token endpoint](https://www.courier.com/docs/api-reference/authentication/create-a-jwt) using your API key.
|
|
51
|
+
3. Your backend returns the JWT to your client and passes it to the SDK.
|
|
65
52
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
53
|
+
```bash
|
|
54
|
+
curl -X POST https://api.courier.com/auth/issue-token \
|
|
55
|
+
-H 'Authorization: Bearer $YOUR_API_KEY' \
|
|
56
|
+
-H 'Content-Type: application/json' \
|
|
57
|
+
-d '{
|
|
58
|
+
"scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
|
|
59
|
+
"expires_in": "1 day"
|
|
60
|
+
}'
|
|
61
|
+
```
|
|
69
62
|
|
|
70
|
-
|
|
71
|
-
courier.shared.signIn({
|
|
72
|
-
userId: $YOUR_USER_ID,
|
|
73
|
-
jwt: jwt,
|
|
74
|
-
});
|
|
75
|
-
}, []);
|
|
63
|
+
## Documentation
|
|
76
64
|
|
|
77
|
-
|
|
78
|
-
<div style={{ padding: '24px' }}>
|
|
79
|
-
<CourierInboxPopupMenu />
|
|
80
|
-
</div>
|
|
81
|
-
);
|
|
65
|
+
Full documentation: **[courier.com/docs/sdk-libraries/courier-react-web](https://www.courier.com/docs/sdk-libraries/courier-react-web/)**
|
|
82
66
|
|
|
83
|
-
|
|
84
|
-
|
|
67
|
+
- [Inbox implementation tutorial](https://www.courier.com/docs/tutorials/inbox/how-to-implement-inbox/)
|
|
68
|
+
- [JWT authentication tutorial](https://www.courier.com/docs/tutorials/inbox/how-to-send-jwt/)
|
|
69
|
+
- [Theme reference](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web-theme/)
|
|
70
|
+
- [v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide/)
|
|
71
|
+
<!-- AUTO-GENERATED-OVERVIEW:END -->
|
|
85
72
|
|
|
86
73
|
## Share feedback with Courier
|
|
87
74
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("react/jsx-runtime"),t=require("react"),o=require("@trycourier/courier-react-components"),u=require("react-dom"),i=require("react-dom/client"),n=require("@trycourier/courier-ui-inbox"),a=require("@trycourier/courier-ui-toast");function s(e){const r=document.createElement("div"),t=i.createRoot(r);return u.flushSync((()=>{t.render(e)})),r.style.display="contents",r.setAttribute("data-react-root","true"),r}const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));c.displayName="CourierInbox";const d=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));d.displayName="CourierInboxPopupMenu";const m=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierToastComponent,{...e,ref:t})})));m.displayName="CourierToast",e.Courier.shared.courierUserAgentName="courier-react",e.Courier.shared.courierUserAgentVersion="9.0.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("react/jsx-runtime"),t=require("react"),o=require("@trycourier/courier-react-components"),u=require("react-dom"),i=require("react-dom/client"),n=require("@trycourier/courier-ui-inbox"),a=require("@trycourier/courier-ui-toast");function s(e){const r=document.createElement("div"),t=i.createRoot(r);return u.flushSync((()=>{t.render(e)})),r.style.display="contents",r.setAttribute("data-react-root","true"),r}const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));c.displayName="CourierInbox";const d=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));d.displayName="CourierInboxPopupMenu";const m=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierToastComponent,{...e,ref:t})})));m.displayName="CourierToast",e.Courier.shared.courierUserAgentName="courier-react",e.Courier.shared.courierUserAgentVersion="9.0.5",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>o.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>n.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>n.clickMessage}),Object.defineProperty(exports,"defaultActions",{enumerable:!0,get:()=>n.defaultActions}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>n.defaultDarkTheme}),Object.defineProperty(exports,"defaultFeeds",{enumerable:!0,get:()=>n.defaultFeeds}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>n.defaultLightTheme}),Object.defineProperty(exports,"defaultListItemActions",{enumerable:!0,get:()=>n.defaultListItemActions}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>n.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>n.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>n.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>n.openMessage}),Object.defineProperty(exports,"defaultToastDarkTheme",{enumerable:!0,get:()=>a.defaultDarkTheme}),Object.defineProperty(exports,"defaultToastLightTheme",{enumerable:!0,get:()=>a.defaultLightTheme}),Object.defineProperty(exports,"mergeToastTheme",{enumerable:!0,get:()=>a.mergeTheme}),exports.CourierInbox=c,exports.CourierInboxPopupMenu=d,exports.CourierToast=m;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.mjs
CHANGED
|
@@ -30,7 +30,7 @@ const CourierToast = forwardRef((props, ref) => {
|
|
|
30
30
|
});
|
|
31
31
|
CourierToast.displayName = "CourierToast";
|
|
32
32
|
Courier.shared.courierUserAgentName = "courier-react";
|
|
33
|
-
Courier.shared.courierUserAgentVersion = "9.0.
|
|
33
|
+
Courier.shared.courierUserAgentVersion = "9.0.5";
|
|
34
34
|
export {
|
|
35
35
|
CourierInbox,
|
|
36
36
|
CourierInboxPopupMenu,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trycourier/courier-react",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.5",
|
|
4
4
|
"description": "The React components for the Courier web UI",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@trycourier/courier-js": "3.1.0",
|
|
36
|
-
"@trycourier/courier-react-components": "2.0.
|
|
36
|
+
"@trycourier/courier-react-components": "2.0.5",
|
|
37
37
|
"@trycourier/courier-ui-core": "2.0.0",
|
|
38
|
-
"@trycourier/courier-ui-inbox": "2.
|
|
38
|
+
"@trycourier/courier-ui-inbox": "2.4.0",
|
|
39
39
|
"@trycourier/courier-ui-toast": "2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|