React Preferences Component

By default, Novu will show the subscriber preferences cog icon on the Inbox component.

Users can enable/disable any active channel in the workflow using subscriber preferences or they can update the preference globally for all workflows under the Global Preferences.

Basic usage

The Preferences component is used to display the subscriber preferences. Use it when you want to render preferences in another part of your application or create a custom layout for the Inbox.

import { Inbox, Preferences } from '@novu/react';
 
function Novu() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
      <Preferences />
    </Inbox>
  );
}

Customization options

Filtering preferences

Hiding global preferences

Global subscriber preferences are shown by default. To hide them, add the following code to your global CSS file:

.nv-workflowContainer:first-child {
  display: none;
}

Grouping preferences

Preference grouping lets you organize extensive lists of workflows into well-organized, meaningful groups. This ensures that your end-users get a better experience when managing their preferences.

To implement preference grouping, use the preferenceGroups prop on the Inbox component. Each group requires:

• name: The text displayed for the group
• filter: Criteria for which preferences appear in the group (object or function)

Here are the key ways to filter preferences:

Filter by tags

Use this approach to group preferences that share specific tags.

const preferenceGroups = [
{
 name: 'General',
 filter: {
   tags: ['account'],
 },
},
];

Filter by tags and workflow IDs:

Combine tags and workflow IDs to define a more targeted group of preferences.

const preferenceGroups = [
{
 name: 'Marketing',
 filter: {
   tags: ['marketing'],
   workflowIds: ['workflow-id'],
 },
},
];

Include all workflows

Include every available workflow, regardless of its tag or grouping, by returning the full preferences list.

const preferenceGroups = [
{
 name: 'All Workflows',
 filter: ({ preferences }) => preferences,
},
];

Custom filtering logic

You can implement custom filtering logic using a function that receives the preferences array (excluding global preferences) and returns filtered preferences based on your criteria.

Here’s how the preferenceGroups prop fits into the full <Inbox /> component:

import { Inbox } from '@novu/react';
 
function InboxWithGroups() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      preferenceGroups={[
        {
          name: 'General',
          filter: { tags: ['account'] },
        },
        {
          name: 'Marketing',
          filter: { tags: ['marketing'], workflowIds: ['workflow-id'] },
        },
        {
          name: 'All Workflows',
          filter: ({ preferences }) => preferences,
        },
      ]}
    />
  );
}