@trycourier/courier-react-17 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 -56
  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,91 +1,73 @@
1
- # `@trycourier/courier-react-17`
1
+ <!-- AUTO-GENERATED-OVERVIEW:START — Do not edit this section. It is synced from mintlify-docs. -->
2
+ # Courier React 17 SDK
2
3
 
3
- ![courier-react-17](https://github.com/user-attachments/assets/2f7889b4-0cc6-4ee3-a8d3-8e37385a8ccb)
4
+ The Courier React 17 SDK provides ready-made components and programmatic hooks for building notification experiences in React 17 applications. It includes a full-featured inbox, popup menu, toast notifications, and a hook for custom UIs.
4
5
 
5
- **Using React 18+?** Use the [@trycourier/courier-react](../courier-react/) package.
6
+ This package exposes the same API as [`@trycourier/courier-react`](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-react) but is built for React 17 compatibility.
6
7
 
7
- **Not using React?** Use the [@trycourier/courier-ui-inbox](../courier-ui-inbox/) package.
8
+ - [`<CourierInbox />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#inbox-component) — full-featured inbox for displaying and managing messages
9
+ - [`<CourierInboxPopupMenu />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#inbox-component) — popup menu version of the inbox
10
+ - [`<CourierToast />`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#toast-component) — toast notifications for time-sensitive alerts
11
+ - [`useCourier()`](https://www.courier.com/docs/sdk-libraries/courier-react-web/#usecourier-hook) — hook for programmatic access and custom UIs
8
12
 
13
+ > **Using React 18+?** Install [`@trycourier/courier-react`](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-react) instead.
14
+ >
15
+ > **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.
9
16
 
10
17
  ## Installation
11
18
 
12
- ```sh
19
+ ```bash
13
20
  npm install @trycourier/courier-react-17
14
21
  ```
15
22
 
16
- ## Usage
23
+ ## Quick Start
17
24
 
18
- Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for a full guide to Courier React.
19
-
20
- If you’re coming from an earlier version of the Courier React SDK,
21
- check out [the v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide)
22
- for what’s changed, how to upgrade your app,
23
- and links to documentation for past versions of the React SDK.
24
-
25
-
26
- ## Examples
27
-
28
- 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.
29
-
30
- ### `CourierInbox`
31
-
32
- <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" />
33
-
34
- ```ts
35
- import { useEffect } from 'react';
36
- import { CourierInbox, useCourier } from '@trycourier/courier-react-17';
25
+ ```jsx
26
+ import { useEffect } from "react";
27
+ import { CourierInbox, useCourier } from "@trycourier/courier-react-17";
37
28
 
38
29
  export default function App() {
39
-
40
30
  const courier = useCourier();
41
31
 
42
32
  useEffect(() => {
43
- // Generate a JWT for your user (do this on your backend server)
44
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
33
+ // Generate a JWT for your user on your backend server
34
+ const jwt = "your-jwt-token";
45
35
 
46
- // Authenticate the user with the inbox
36
+ // Authenticate the user
47
37
  courier.shared.signIn({
48
- userId: $YOUR_USER_ID,
38
+ userId: "your-user-id",
49
39
  jwt: jwt,
50
40
  });
51
41
  }, []);
52
42
 
53
43
  return <CourierInbox />;
54
-
55
44
  }
56
45
  ```
57
46
 
58
- ### `CourierInboxPopupMenu`
47
+ ## Authentication
59
48
 
60
- <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.**
61
50
 
62
- ```ts
63
- import { useEffect } from 'react';
64
- import { CourierInbox, useCourier } from '@trycourier/courier-react-17';
65
-
66
- export default function App() {
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.
67
54
 
68
- const courier = useCourier();
69
-
70
- useEffect(() => {
71
- // Generate a JWT for your user (do this on your backend server)
72
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
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
+ ```
73
61
 
74
- // Authenticate the user with the inbox
75
- courier.shared.signIn({
76
- userId: $YOUR_USER_ID,
77
- jwt: jwt,
78
- });
79
- }, []);
62
+ ## Documentation
80
63
 
81
- return (
82
- <div style={{ padding: '24px' }}>
83
- <CourierInboxPopupMenu />
84
- </div>
85
- );
64
+ Full documentation: **[courier.com/docs/sdk-libraries/courier-react-web](https://www.courier.com/docs/sdk-libraries/courier-react-web/)**
86
65
 
87
- }
88
- ```
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 -->
89
71
 
90
72
  ## Share feedback with Courier
91
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("@trycourier/courier-ui-inbox"),n=require("@trycourier/courier-ui-toast");function a(e){const r=document.createElement("div");return u.render(e,r),r.style.display="contents",r.setAttribute("data-react-root","true"),r}const s=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));s.displayName="CourierInbox";const d=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));d.displayName="CourierInboxPopupMenu";const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierToastComponent,{...e,ref:t})})));c.displayName="CourierToast",e.Courier.shared.courierUserAgentName="courier-react-17",e.Courier.shared.courierUserAgentVersion="9.0.2",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>o.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>i.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>i.clickMessage}),Object.defineProperty(exports,"defaultActions",{enumerable:!0,get:()=>i.defaultActions}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>i.defaultDarkTheme}),Object.defineProperty(exports,"defaultFeeds",{enumerable:!0,get:()=>i.defaultFeeds}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>i.defaultLightTheme}),Object.defineProperty(exports,"defaultListItemActions",{enumerable:!0,get:()=>i.defaultListItemActions}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>i.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>i.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>i.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>i.openMessage}),Object.defineProperty(exports,"defaultToastDarkTheme",{enumerable:!0,get:()=>n.defaultDarkTheme}),Object.defineProperty(exports,"defaultToastLightTheme",{enumerable:!0,get:()=>n.defaultLightTheme}),Object.defineProperty(exports,"mergeToastTheme",{enumerable:!0,get:()=>n.mergeTheme}),exports.CourierInbox=s,exports.CourierInboxPopupMenu=d,exports.CourierToast=c;
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("@trycourier/courier-ui-inbox"),n=require("@trycourier/courier-ui-toast");function a(e){const r=document.createElement("div");return u.render(e,r),r.style.display="contents",r.setAttribute("data-react-root","true"),r}const s=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));s.displayName="CourierInbox";const d=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));d.displayName="CourierInboxPopupMenu";const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:a,children:r.jsx(o.CourierToastComponent,{...e,ref:t})})));c.displayName="CourierToast",e.Courier.shared.courierUserAgentName="courier-react-17",e.Courier.shared.courierUserAgentVersion="9.0.4",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>o.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>i.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>i.clickMessage}),Object.defineProperty(exports,"defaultActions",{enumerable:!0,get:()=>i.defaultActions}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>i.defaultDarkTheme}),Object.defineProperty(exports,"defaultFeeds",{enumerable:!0,get:()=>i.defaultFeeds}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>i.defaultLightTheme}),Object.defineProperty(exports,"defaultListItemActions",{enumerable:!0,get:()=>i.defaultListItemActions}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>i.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>i.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>i.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>i.openMessage}),Object.defineProperty(exports,"defaultToastDarkTheme",{enumerable:!0,get:()=>n.defaultDarkTheme}),Object.defineProperty(exports,"defaultToastLightTheme",{enumerable:!0,get:()=>n.defaultLightTheme}),Object.defineProperty(exports,"mergeToastTheme",{enumerable:!0,get:()=>n.mergeTheme}),exports.CourierInbox=s,exports.CourierInboxPopupMenu=d,exports.CourierToast=c;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.mjs CHANGED
@@ -26,7 +26,7 @@ const CourierToast = forwardRef((props, ref) => {
26
26
  });
27
27
  CourierToast.displayName = "CourierToast";
28
28
  Courier.shared.courierUserAgentName = "courier-react-17";
29
- Courier.shared.courierUserAgentVersion = "9.0.2";
29
+ Courier.shared.courierUserAgentVersion = "9.0.4";
30
30
  export {
31
31
  CourierInbox,
32
32
  CourierInboxPopupMenu,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trycourier/courier-react-17",
3
- "version": "9.0.2",
3
+ "version": "9.0.4",
4
4
  "description": "React 17 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": ">=17.0.0, <18.0.0",