@trycourier/courier-react 9.0.2 → 9.0.4

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.
Files changed (4) hide show
  1. package/README.md +38 -52
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/package.json +5 -5
package/README.md CHANGED
@@ -1,87 +1,73 @@
1
- <img width="1040" alt="courier-react" src="https://github.com/user-attachments/assets/e886b445-d106-4dab-afca-82183e0fcbe7" />
1
+ <!-- AUTO-GENERATED-OVERVIEW:START — Do not edit this section. It is synced from mintlify-docs. -->
2
+ # Courier React SDK
2
3
 
3
- **Using React 17?** Use the [@trycourier/courier-react-17](../courier-react-17/) package.
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
- **Not using React?** Use the [@trycourier/courier-ui-inbox](../courier-ui-inbox/) package.
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
- ```sh
15
+ ```bash
10
16
  npm install @trycourier/courier-react
11
17
  ```
12
18
 
13
- ## Usage
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
- ### `CourierInbox`
21
+ ## Quick Start
27
22
 
28
- <img width="688" alt="Screenshot 2025-06-25 at 5 17 47 PM" src="https://github.com/user-attachments/assets/1655f43b-cc61-473f-9204-8dffeae21042" />
23
+ ```jsx
24
+ "use client"
29
25
 
30
- ```ts
31
- import { useEffect } from 'react';
32
- import { CourierInbox, useCourier } from '@trycourier/courier-react';
26
+ import { useEffect } from "react";
27
+ import { CourierInbox, useCourier } from "@trycourier/courier-react";
33
28
 
34
29
  export default function App() {
35
-
36
30
  const courier = useCourier();
37
31
 
38
32
  useEffect(() => {
39
- // Generate a JWT for your user (do this on your backend server)
40
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
33
+ // Generate a JWT for your user on your backend server
34
+ const jwt = "your-jwt-token";
41
35
 
42
- // Authenticate the user with the inbox
36
+ // Authenticate the user
43
37
  courier.shared.signIn({
44
- userId: $YOUR_USER_ID,
38
+ userId: "your-user-id",
45
39
  jwt: jwt,
46
40
  });
47
41
  }, []);
48
42
 
49
43
  return <CourierInbox />;
50
-
51
44
  }
52
45
  ```
53
46
 
54
- ### `CourierInboxPopupMenu`
47
+ ## Authentication
55
48
 
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" />
49
+ The SDK requires a JWT (JSON Web Token) for authentication. **Always generate JWTs on your backend server, never in client-side code.**
57
50
 
58
- ```ts
59
- import { useEffect } from 'react';
60
- import { CourierInbox, useCourier } from '@trycourier/courier-react';
51
+ 1. Your client calls your backend to request a token.
52
+ 2. Your backend calls the [Courier Issue Token endpoint](https://www.courier.com/docs/api-reference/authentication/create-a-jwt) using your API key.
53
+ 3. Your backend returns the JWT to your client and passes it to the SDK.
61
54
 
62
- export default function App() {
63
-
64
- const courier = useCourier();
55
+ ```bash
56
+ curl --request POST --url https://api.courier.com/auth/issue-token --header 'Authorization: Bearer $YOUR_API_KEY' --header 'Content-Type: application/json' --data '{
57
+ "scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
58
+ "expires_in": "1 day"
59
+ }'
60
+ ```
65
61
 
66
- useEffect(() => {
67
- // Generate a JWT for your user (do this on your backend server)
68
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
62
+ ## Documentation
69
63
 
70
- // Authenticate the user with the inbox
71
- courier.shared.signIn({
72
- userId: $YOUR_USER_ID,
73
- jwt: jwt,
74
- });
75
- }, []);
76
-
77
- return (
78
- <div style={{ padding: '24px' }}>
79
- <CourierInboxPopupMenu />
80
- </div>
81
- );
64
+ Full documentation: **[courier.com/docs/sdk-libraries/courier-react-web](https://www.courier.com/docs/sdk-libraries/courier-react-web/)**
82
65
 
83
- }
84
- ```
66
+ - [Inbox implementation tutorial](https://www.courier.com/docs/tutorials/inbox/how-to-implement-inbox/)
67
+ - [JWT authentication tutorial](https://www.courier.com/docs/tutorials/inbox/how-to-send-jwt/)
68
+ - [Theme reference](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web-theme/)
69
+ - [v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide/)
70
+ <!-- AUTO-GENERATED-OVERVIEW:END -->
85
71
 
86
72
  ## Share feedback with Courier
87
73
 
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.2",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;
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.4",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.2";
33
+ Courier.shared.courierUserAgentVersion = "9.0.4";
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.2",
3
+ "version": "9.0.4",
4
4
  "description": "The React components for the Courier web UI",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -32,11 +32,11 @@
32
32
  "url": "https://github.com/trycourier/courier-web"
33
33
  },
34
34
  "dependencies": {
35
- "@trycourier/courier-js": "3.0.0",
36
- "@trycourier/courier-react-components": "2.0.2",
35
+ "@trycourier/courier-js": "3.1.0",
36
+ "@trycourier/courier-react-components": "2.0.4",
37
37
  "@trycourier/courier-ui-core": "2.0.0",
38
- "@trycourier/courier-ui-inbox": "2.2.0",
39
- "@trycourier/courier-ui-toast": "2.0.0"
38
+ "@trycourier/courier-ui-inbox": "2.3.0",
39
+ "@trycourier/courier-ui-toast": "2.1.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": ">=18.0.0",