Update content for inbox headless mode#1002
Conversation
✅ Deploy Preview for docs-novu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughRewrites the headless Inbox documentation to use the React package Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant Provider as NovuProvider
participant Component as UI Components
participant Hooks as useNotifications / useCounts / useNovu
participant Backend as Novu Backend
rect rgba(220,235,255,0.6)
App->>Provider: wrap app (applicationId / subscriberId)
Component->>Hooks: mount -> call hooks
Hooks->>Backend: fetch notifications & subscribe realtime
Backend-->>Hooks: push events (notification_received, counts_changed)
Hooks-->>Component: update state & expose actions (markAsRead, archive)
Component->>Hooks: invoke action -> Hooks -> Backend (API call)
Hooks-->>Backend: subscribe/unsubscribe for realtime events
end
note right of Hooks `#f3f4f6`: Hooks perform cleanup on unmount (novu.off / unsubscribe)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (3)📓 Common learnings📚 Learning: 2025-08-09T13:28:47.834ZApplied to files:
📚 Learning: 2025-08-10T17:11:58.975ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/inbox/headless-mode.mdx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: jackall3n
Repo: novuhq/docs PR: 929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:48-53
Timestamp: 2025-08-09T13:28:47.834Z
Learning: In the novu/react-native and novu/react packages, the NovuProvider component uses the prop name `subscriber` (not `subscriberId`) to pass the subscriber identifier. This is consistent across all documentation examples and the actual implementation.
📚 Learning: 2025-08-09T13:28:47.834Z
Learnt from: jackall3n
Repo: novuhq/docs PR: 929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:48-53
Timestamp: 2025-08-09T13:28:47.834Z
Learning: In the novu/react-native and novu/react packages, the NovuProvider component uses the prop name `subscriber` (not `subscriberId`) to pass the subscriber identifier. This is consistent across all documentation examples and the actual implementation.
Applied to files:
content/docs/platform/inbox/headless-mode.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Build and Lint
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
🔇 Additional comments (5)
content/docs/platform/inbox/headless-mode.mdx (5)
26-39: NovuProvider implementation looks correct.The prop name is correctly
subscriber(notsubscriberId), which aligns with the actual Novu React SDK implementation. Based on learnings from prior reviews, this is the correct pattern.
45-67: Notification fetching example is well-structured.The
useNotificationsexample properly handles loading and error states, includes pagination setup (though not actively demonstrated), and uses safe optional chaining. The rendering logic is clear and practical.
73-94: Unread count badge pattern is practical.The
useCountsexample with filter configuration and fallback to?? 0demonstrates defensive programming. The badge rendering uses appropriate conditional logic.
102-148: Notification actions implementation is comprehensive.The
NotificationItemcomponent demonstrates proper error handling in async operations (lines 112-113, 120-121), disables buttons based on notification state, and shows both common actions (read, archive). Type import usingimport typeis correctly applied.
156-190: Event listener example demonstrates proper cleanup.The event names
notifications.notification_receivedandnotifications.unread_count_changedare supported by the Novu React SDK. TheNotificationListenercomponent correctly subscribes to events on mount (lines 178-179) and properly unsubscribes in the cleanup function (lines 182-185), preventing memory leaks. The event naming convention used is consistent with Novu's standard.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/inbox/headless-mode.mdx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: jackall3n
Repo: novuhq/docs PR: 929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:48-53
Timestamp: 2025-08-09T13:28:47.834Z
Learning: In the novu/react-native and novu/react packages, the NovuProvider component uses the prop name `subscriber` (not `subscriberId`) to pass the subscriber identifier. This is consistent across all documentation examples and the actual implementation.
📚 Learning: 2025-08-09T13:28:47.834Z
Learnt from: jackall3n
Repo: novuhq/docs PR: 929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:48-53
Timestamp: 2025-08-09T13:28:47.834Z
Learning: In the novu/react-native and novu/react packages, the NovuProvider component uses the prop name `subscriber` (not `subscriberId`) to pass the subscriber identifier. This is consistent across all documentation examples and the actual implementation.
Applied to files:
content/docs/platform/inbox/headless-mode.mdx
📚 Learning: 2025-08-10T17:11:58.975Z
Learnt from: jackall3n
Repo: novuhq/docs PR: 929
File: content/docs/platform/sdks/react-native/hooks/novu-provider.mdx:51-53
Timestamp: 2025-08-10T17:11:58.975Z
Learning: In the Novu React Native SDK documentation, when updating from `backendUrl` to `apiUrl`, the EU API endpoint is documented as `https://eu.api.novu.co` without the `/v1` path segment, even though the REST API documentation may specify the `/v1` path. The SDK and REST API may have different URL requirements.
Applied to files:
content/docs/platform/inbox/headless-mode.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build and Lint
🔇 Additional comments (5)
content/docs/platform/inbox/headless-mode.mdx (5)
1-10: Documentation rewrite looks comprehensive and well-structured.The shift from generic JavaScript SDK narrative to React-focused hooks (NovuProvider, useNotifications, useCounts, useNovu) is clear and practical. Code examples are concrete with proper error handling and state management. All pending verification items relate to confirming exact API method names, event names, and type properties match the actual @novu/react implementation.
The shell scripts above will confirm all API details are accurate. This ensures the documentation matches the current SDK implementation.
77-81: Filter syntax and property names are correct.The code at lines 77-81 uses the correct
useCountsfilter syntax. Thefiltersparameter acceptsNotificationFilter[]as documented, andread: falseis a valid filter property shown in the official React SDK examples. The implementation matches the documented API exactly.
177-180: Event names verified as correct.The @novu/react v3.x SDK emits both
notifications.notification_receivedandnotifications.unread_count_changedevents, matching the implementation at lines 178–179. The event names and subscription pattern are consistent with SDK documentation.
130-145: No issues found—Notification type properly supports these properties.The
Notificationtype from @novu/react includesisReadandisArchivedboolean properties. The code at lines 133 and 140 correctly uses these properties to disable buttons, consistent with official documentation and usage patterns across other parts of the codebase.
31-34: Code is correct—no issues found with NovuProvider props.The
subscriberprop is correct per retrieved learnings and multiple examples across the documentation repository (e.g.,content/docs/platform/sdks/react/hooks/novu-provider.mdx). TheapplicationIdentifieris confirmed as a valid required prop for initializing NovuProvider.
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
Co-authored-by: DianaHackmamba <diana@hackmamba.io>
DianaHackmamba
left a comment
DianaHackmamba
left a comment
There was a problem hiding this comment.
A couple minor things, then g2g.
3 participants
Summary by CodeRabbit