diff --git a/inbox/react/components.mdx b/inbox/react/components.mdx index 60ebac96..e064d57f 100644 --- a/inbox/react/components.mdx +++ b/inbox/react/components.mdx @@ -1,7 +1,7 @@ --- -title: "Inbox Components" -sidebarTitle: "Components" -description: "Learn how to use the different components of the Inbox" +title: 'Inbox Components' +sidebarTitle: 'Components' +description: 'Learn how to use the different components of the Inbox' --- ## Components @@ -20,7 +20,7 @@ It renders an opinionated `` with a bell button, that triggers a popove #### Default Inbox ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { return ( @@ -35,7 +35,7 @@ function Novu() { #### Controlled Popover state ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { const [open, setOpen] = React.useState(false); @@ -55,8 +55,13 @@ function Novu() { #### Custom Notification item +Customize the notification item by passing a render function to the `renderNotification` prop. +You can access the notification object and render the notification item as per your requirements. +The `notification.data` property allows you acessing the custom information while rendering notification item. +You can check how to pass it with the Novu Framework in-app step output [here](/sdks/framework/typescript/steps/inbox#inbox-step-output). + ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { return ( @@ -67,6 +72,7 @@ function Novu() {

{notification.subject}

{notification.body}

+

{notification.data.text}

)} /> @@ -77,7 +83,7 @@ function Novu() { #### Custom Bell ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { return ( @@ -97,7 +103,7 @@ function Novu() { #### Handle notification click ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { return ( @@ -112,10 +118,15 @@ function Novu() { } ``` +#### Redirect on the notification click + +The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) allows to define the URL to visit when clicking on the notification item. +The value will be implicitly passed to the notification and used when click event happens. + #### Handle notification button clicks ```tsx -import { Inbox } from "@novu/react"; +import { Inbox } from '@novu/react'; function Novu() { return ( @@ -133,12 +144,17 @@ function Novu() { } ``` +#### Redirect on the notification action button click + +The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) on the `primaryAction` or `secondaryAction` prop allows to define the URL to visit when clicking on the notification action button. +The value will be implicitly passed to the action buttons and used when click event happens. + ### Bell The `Bell` component is used to display the notification bell icon. It can be used to show the number of unread notifications. ```tsx -import { Inbox, Bell } from "@novu/react"; +import { Inbox, Bell } from '@novu/react'; function Novu() { return ( @@ -157,8 +173,8 @@ function Novu() { You can pass custom components as children to the `Bell` component to render the custom bell icon. ```tsx -import { Inbox, Bell } from "@novu/react"; -import { BellIcon } from "./icons"; +import { Inbox, Bell } from '@novu/react'; +import { BellIcon } from './icons'; function Novu() { return ( @@ -183,7 +199,7 @@ The `Notifications` component is used to display the list of notifications. #### Notifications as a list without the Bell and Popover ```tsx -import { Inbox, Notifications } from "@novu/react"; +import { Inbox, Notifications } from '@novu/react'; function Novu() { return ( @@ -200,7 +216,7 @@ function Novu() { ### Notifications as a list with custom Notification item ```tsx -import { Inbox, Notifications } from "@novu/react"; +import { Inbox, Notifications } from '@novu/react'; function Novu() { return ( @@ -213,6 +229,7 @@ function Novu() {

{notification.subject}

{notification.body}

+

{notification.data.text}

)} /> @@ -227,7 +244,7 @@ The `Preferences` component is used to display the preferences. It can be used t Use the `Preferences` component to show the preferences without the bell and popover. ```tsx -import { Inbox, Preferences } from "@novu/react"; +import { Inbox, Preferences } from '@novu/react'; function Novu() { return ( @@ -247,11 +264,11 @@ component allows you to bring your own popover component along with custom compo Below is an example of how you can bring your own popover component with Radix UI. ```tsx -import React from "react"; -import * as Popover from "@radix-ui/react-popover"; -import { BellIcon, Cross2Icon } from "@radix-ui/react-icons"; -import { Inbox, Bell, Notifications } from "@novu/react"; -import "./styles.css"; +import React from 'react'; +import * as Popover from '@radix-ui/react-popover'; +import { BellIcon, Cross2Icon } from '@radix-ui/react-icons'; +import { Inbox, Bell, Notifications } from '@novu/react'; +import './styles.css'; const PopoverDemo = () => ( - The subject of the inbox notification. This property communicates the subject of the notification to the user. + The subject of the inbox notification. This property communicates the subject + of the notification to the user. - The avatar shown in the inbox notification. When specified, overrides the avatar of the actor initiating the notification. + The avatar shown in the inbox notification. When specified, overrides the + avatar of the actor initiating the notification. + + + The redirect object is used to define the URL to visit when interacting with + the notification. This property can be omitted in place of an + `onNotificationClick` + [handler](/inbox/react/components#handle-notification-click) implemented in + the Inbox component. + + + The URL to visit when clicking on the notification. + + + The target attribute specifies where the new window or tab will be opened. + This property is optional and defaults to `_blank`. The supported values + are: `_self, _blank, _parent, _top, _unfencedTop`. + + - Define a primary action to be shown in the inbox notification. The primary action will appear with an accent color. + Define a primary action to be shown in the inbox notification. The primary + action will appear with an accent color. - The label of the action. + The label of the action. - - The URL to visit when interacting with the action. This property can be omitted in place of an `onClick` handler implemented in the Inbox component. + + The redirect object is used to define the URL to visit when interacting + with the notification action buttons. This property can be omitted in + place of an `onPrimaryActionClick` + [handler](/inbox/react/components#handle-notification-button-clicks) + implemented in the Inbox component. + + + The URL to visit when clicking on the notification action button. + + + The target attribute specifies where the new window or tab will be + opened. This property is optional and defaults to `_blank`. The + supported values are: `_self, _blank, _parent, _top, _unfencedTop`. + + - Define a secondary action to be shown in the inbox notification. The secondary action will appear with a muted color. + Define a secondary action to be shown in the inbox notification. The secondary + action will appear with a muted color. - The label of the action. + The label of the action. - - The URL to visit when interacting with the action. This property can be omitted in place of an `onClick` handler implemented in the Inbox component. + + The redirect object is used to define the URL to visit when interacting + with the notification action buttons. This property can be omitted in + place of an `onSecondaryActionClick` + [handler](/inbox/react/components#handle-notification-button-clicks) + implemented in the Inbox component. + + + The URL to visit when clicking on the notification action button. + + + The target attribute specifies where the new window or tab will be + opened. This property is optional and defaults to `_blank`. The + supported values are: `_self, _blank, _parent, _top, _unfencedTop`. + + + + Custom data to be sent with the notification. This data can be used to + [customize the notification item + rendered](/inbox/react/components#custom-notification-item) in the Inbox. + ## Inbox Step Result - A flag indicating if the notification has been seen. This property is useful when conditionally delivering notifications in subsequent steps via the `skip` function. A notification is marked as seen when the user views the notification. + A flag indicating if the notification has been seen. This property is useful + when conditionally delivering notifications in subsequent steps via the `skip` + function. A notification is marked as seen when the user views the + notification. - A flag indicating if the notification has been read. A notification is marked as read when the user confirms the notification. + A flag indicating if the notification has been read. A notification is marked + as read when the user confirms the notification. - The date the notification was last seen. This corresponds to the date the `seen` property was set to `true`, or `null` if the notification has not been seen. + The date the notification was last seen. This corresponds to the date the + `seen` property was set to `true`, or `null` if the notification has not been + seen. - The date the notification was last read. This corresponds to the date the `read` property was set to `true`, or `null` if the notification has not been read. + The date the notification was last read. This corresponds to the date the + `read` property was set to `true`, or `null` if the notification has not been + read.