Skip to content

Commit 3e0a5c0

Browse files
jainpawan21jainpawan21
authored
Merge pull request #685 from novuhq/v2-headless-docs
[WIP] feat: add v2 headless doc
2 parents f8ce579 + c37ffc2 commit 3e0a5c0

File tree

10 files changed

+811
-103
lines changed

10 files changed

+811
-103
lines changed

‎inbox/headless/api-reference.mdx

Lines changed: 586 additions & 0 deletions
Large diffs are not rendered by default.

‎inbox/headless/get-started.mdx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: 'Headless Inbox'
3+
sidebarTitle: 'Get Started'
4+
description: 'A lightweight, standalone package for building custom in-app notification interfaces with Novu, providing essential functionalities and flexibility.'
5+
---
6+
7+
The headless version of Novu’s notification library package provides users with a lightweight solution for integrating notification functionality into their web applications. With just the essential API methods, users can easily incorporate our notification system into any framework or vanilla JavaScript project, without being constrained by our default UI or dependencies. The SDK includes real-time notifications through a WebSocket connection and can be safely used across web browsers.
8+
9+
## Get Started
10+
11+
<Steps>
12+
<Step title="Installation">
13+
```bash
14+
npm install @novu/js
15+
```
16+
</Step>
17+
<Step title="Import Package">
18+
```typescript
19+
import { Novu } from "@novu/js";
20+
```
21+
</Step>
22+
<Step title="Initialize Session">
23+
<Tabs>
24+
<Tab title="US" >
25+
```typescript
26+
import { Novu } from "@novu/js";
27+
28+
const novu = new Novu({
29+
subscriberId: "SUBSCRIBER_ID",
30+
applicationIdentifier: "APPLICATION_IDENTIFIER",
31+
});
32+
```
33+
</Tab>
34+
<Tab title="EU">
35+
```typescript
36+
import { Novu } from "@novu/js";
37+
38+
const novu = new Novu({
39+
subscriberId: "SUBSCRIBER_ID",
40+
applicationIdentifier: "APPLICATION_IDENTIFIER",
41+
backendUrl: "https://eu.api.novu.co",
42+
socketUrl: "https://eu.ws.novu.co",
43+
});
44+
```
45+
</Tab>
46+
<Tab title="HMAC Encryption">
47+
Read more about [HMAC Encryption](/react/advanced-configuration#hmac-encryption).
48+
```typescript
49+
import { Novu } from "@novu/js";
50+
51+
const novu = new Novu({
52+
subscriberId: "SUBSCRIBER_ID",
53+
applicationIdentifier: "APPLICATION_IDENTIFIER",
54+
subscriberHash: "SUBSCRIBER_HASH_HMAC_SUBSCRIBER_HASH_HMAC_ENCRYPTION",
55+
});
56+
```
57+
</Tab>
58+
</Tabs>
59+
</Step>
60+
<Step title="Fetch Notifications">
61+
```typescript
62+
const response = await novu.notifications.list({
63+
limit: 30,
64+
});
65+
66+
const notifications = response.data.notifications
67+
```
68+
</Step>
69+
<Step>
70+
Display `notifications` in your UI.
71+
</Step>
72+
</Steps>
73+
74+
## Realtime Notifications
75+
Events are emitted when notifications are received, and when the unread notificatons count changes. `novu.on()` is used to listen to these events.
76+
```typescript
77+
novu.on("notifications.notification_received", (data) => {
78+
console.log("new notification =>", data);
79+
});
80+
81+
novu.on("notifications.unread_count_changed", (data) => {
82+
console.log("new unread notifications count =>", data);
83+
});
84+
```

‎inbox/introduction.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It
3232

3333
## Getting started
3434

35-
[React docs](/inbox/react/get-started)
35+
- Pre built UI component in [React](/inbox/react/get-started).
36+
37+
- Learn how to use [headless library](/inbox/headless/get-started) to build custom UI for other frameworks like Vue, Angular etc.
3638

3739
## Design files
3840

‎inbox/react/get-started.mdx

Lines changed: 83 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -8,94 +8,90 @@ Novu provides the `@novu/react` package that helps to add a fully functioning In
88

99
<Steps>
1010
<Step title="Install the Inbox package">
11-
```bash
12-
npm install @novu/react
13-
```
11+
```bash
12+
npm install @novu/react
13+
```
1414
</Step>
1515
<Step title="Add the inbox code to your react file">
1616
<CodeGroup>
17-
```tsx Next.js
18-
import { Inbox } from '@novu/react';
19-
import { useRouter } from 'next/navigation'
20-
21-
function Novu() {
22-
const router = useRouter();
23-
24-
return (
25-
<Inbox
26-
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
27-
subscriberId="YOUR_SUBSCRIBER_ID"
28-
routerPush={(path: string) => router.push(path)}
29-
/>
30-
);
31-
}
32-
```
33-
34-
```tsx Remix
35-
import { Inbox } from '@novu/react';
36-
import { useNavigate } from '@remix-run/react';
37-
38-
function Novu() {
39-
const navigate = useNavigate();
40-
41-
return (
42-
<Inbox
43-
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
44-
subscriberId="YOUR_SUBSCRIBER_ID"
45-
routerPush={(path: string) => navigate(path)}
46-
/>
47-
);
48-
}
49-
```
50-
51-
```tsx React Router
52-
import { Inbox } from '@novu/react';
53-
import { useNavigate } from 'react-router-dom';
54-
55-
function Novu() {
56-
const navigate = useNavigate();
57-
58-
return (
59-
<Inbox
60-
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
61-
subscriberId="YOUR_SUBSCRIBER_ID"
62-
routerPush={(path: string) => navigate(path)}
63-
/>
64-
);
65-
}
66-
```
67-
68-
```tsx Gatsby
69-
import { Inbox } from '@novu/react';
70-
import { navigate } from 'gatsby';
71-
72-
function Novu() {
73-
return (
74-
<Inbox
75-
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
76-
subscriberId="YOUR_SUBSCRIBER_ID"
77-
routerPush={(path: string) => navigate(path)}
78-
/>
79-
);
80-
}
81-
```
82-
83-
```tsx Create React App
84-
import { Inbox } from '@novu/react';
85-
import { useNavigate } from 'react-router-dom';
86-
87-
function Novu() {
88-
const navigate = useNavigate();
89-
90-
return (
91-
<Inbox
92-
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
93-
subscriberId="YOUR_SUBSCRIBER_ID"
94-
routerPush={(path: string) => navigate(path)}
95-
/>
96-
);
97-
}
98-
```
17+
```tsx Next.js
18+
import { Inbox } from '@novu/react';
19+
import { useRouter } from 'next/navigation';
20+
21+
function Novu() {
22+
const router = useRouter();
23+
24+
return (
25+
<Inbox
26+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
27+
subscriberId="YOUR_SUBSCRIBER_ID"
28+
routerPush={(path: string) => router.push(path)}
29+
/>
30+
);
31+
}
32+
```
33+
```tsx Remix
34+
import { Inbox } from '@novu/react';
35+
import { useNavigate } from '@remix-run/react';
36+
37+
function Novu() {
38+
const navigate = useNavigate();
39+
40+
return (
41+
<Inbox
42+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
43+
subscriberId="YOUR_SUBSCRIBER_ID"
44+
routerPush={(path: string) => navigate(path)}
45+
/>
46+
);
47+
}
48+
```
49+
```tsx React Router
50+
import { Inbox } from '@novu/react';
51+
import { useNavigate } from 'react-router-dom';
52+
53+
function Novu() {
54+
const navigate = useNavigate();
55+
56+
return (
57+
<Inbox
58+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
59+
subscriberId="YOUR_SUBSCRIBER_ID"
60+
routerPush={(path: string) => navigate(path)}
61+
/>
62+
);
63+
}
64+
```
65+
```tsx Gatsby
66+
import { Inbox } from '@novu/react';
67+
import { navigate } from 'gatsby';
68+
69+
function Novu() {
70+
return (
71+
<Inbox
72+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
73+
subscriberId="YOUR_SUBSCRIBER_ID"
74+
routerPush={(path: string) => navigate(path)}
75+
/>
76+
);
77+
}
78+
```
79+
```tsx Create React App
80+
import { Inbox } from '@novu/react';
81+
import { useNavigate } from 'react-router-dom';
82+
83+
function Novu() {
84+
const navigate = useNavigate();
85+
86+
return (
87+
<Inbox
88+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
89+
subscriberId="YOUR_SUBSCRIBER_ID"
90+
routerPush={(path: string) => navigate(path)}
91+
/>
92+
);
93+
}
94+
```
9995
</CodeGroup>
10096

10197
<Tip>
@@ -118,12 +114,12 @@ Novu provides the `@novu/react` package that helps to add a fully functioning In
118114
## Next Steps
119115

120116
<CardGroup cols={2}>
121-
<Card title="Customize the inbox" href={"/inbox/react/customization"}>
117+
<Card title="Customize the inbox" href="/inbox/react/styling">
122118
Learn how to customize the inbox with your own branding and design.
123119
</Card>
124120
<Card
125121
title="Learn the components"
126-
href={"/inbox/react/components"}
122+
href="/inbox/react/components/overview"
127123
>
128124
Learn more about the composable components of the inbox.
129125
</Card>

‎inbox/react/migration-guide.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ function Novu() {
125125
export default Novu;
126126
```
127127

128-
- New Implementation with @novu/react
128+
- New Implementation with `@novu/react`
129129

130130
```tsx
131131
import { Inbox } from "@novu/react";
@@ -165,7 +165,7 @@ function Novu() {
165165
export default Novu;
166166
```
167167

168-
- New Implementation with @novu/react
168+
- New Implementation with `@novu/react`
169169

170170
```tsx
171171
import { Inbox, Notifications } from "@novu/react";
@@ -220,7 +220,7 @@ function Novu() {
220220
export default Novu;
221221
```
222222

223-
- New Implementation with @novu/react
223+
- New Implementation with `@novu/react`
224224

225225
```tsx
226226
import { Inbox } from "@novu/react";
@@ -283,7 +283,7 @@ function Novu() {
283283
export default Novu;
284284
```
285285

286-
- New Implementation with @novu/react
286+
- New Implementation with `@novu/react`
287287

288288
```tsx
289289
import { Inbox } from "@novu/react";
@@ -369,7 +369,7 @@ function Novu() {
369369
export default Novu;
370370
```
371371

372-
- New Implementation with @novu/react
372+
- New Implementation with `@novu/react`
373373

374374
```tsx
375375
import { Inbox } from "@novu/react";
@@ -443,7 +443,7 @@ function Novu() {
443443
export default Novu;
444444
```
445445

446-
- New Implementation with @novu/react and Radix UI as an example
446+
- New Implementation with `@novu/react` and Radix UI as an example
447447

448448
```tsx
449449
import React from "react";
@@ -526,7 +526,7 @@ function Novu() {
526526
export default Novu;
527527
```
528528

529-
- New Implementation with @novu/react
529+
- New Implementation with `@novu/react`
530530

531531
```tsx
532532
import { Inbox } from "@novu/react";
@@ -591,7 +591,7 @@ function Novu() {
591591
export default Novu;
592592
```
593593

594-
- New Implementation with @novu/react
594+
- New Implementation with `@novu/react`
595595

596596
```tsx
597597
import { Inbox } from "@novu/react";
@@ -643,7 +643,7 @@ Organize notifications into different categories using tabs by leveraging the ta
643643

644644
- Old Implementation
645645

646-
- After defining the feeds on the Workflow UI, you were able to filter notifications based on the feedIdentifier.
646+
After defining the feeds on the Workflow UI, you were able to filter notifications based on the feedIdentifier.
647647

648648
```tsx
649649
import {
@@ -694,7 +694,7 @@ function Novu() {
694694
export default Novu;
695695
```
696696

697-
- New Implementation with @novu/react
697+
- New Implementation with `@novu/react`
698698

699699
1. Define multiple workflows with relevant tags.
700700

‎inbox/react/multiple-tabs.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const tabs = [
3333
},
3434
];
3535

36-
function Novu() {
36+
function InboxNovu() {
3737
return (
3838
<Inbox
3939
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"

0 commit comments

Comments
 (0)