Cord LogoDocs
Sign inStart now

Notification List Launcher

Components /

Display a simple launcher button to open a notification list anywhere

Live Demo

When to use #

The <NotificationListLauncher /> displays a button that will open and close a <NotificationList /> when it is clicked. The notification list will appear in a floating modal below the button. The icon and text of the button can be customized.

This component accepts all of the properties/attributes that a <NotificationList /> accepts. These properties/attributes will be applied to the NotificationList rendered by the <NotificationListLauncher />.

Send your own notifications via Cord

Our REST API enables you to push custom notifications into the list. Out of the box, you get read/unread tracking, mark-all-as-read and much more.

How to use #

React:
import { NotificationListLauncher } from "@cord-sdk/react";

export const Example = () => {
  return (
   <NotificationListLauncher
      filter={{
        location: { page: 'foo' },
        metadata: {category: 'sales'},
        groupID: 'group123'
      }}
    />
  );
};
Vanilla JavaScript:

<cord-notification-list-launcher filter='{"location":{"page":"foo"}, "metadata":{"category":"sales"}, "groupID": "group123"}'>
</cord-notification-list-launcher>
import { NotificationListLauncher } from "@cord-sdk/react";

export const Example = () => {
  return (
   <NotificationListLauncher
      filter={{
        location: { page: 'foo' },
        metadata: {category: 'sales'},
        groupID: 'group123'
      }}
    />
  );
};
Copy

Properties #

label #

optional
string
This sets the text label on the launcher button.
The default label is an empty string which means the button will not have a label

iconURL #

optional
string
This URL sets the image used as the icon for the launcher button. When set to an empty string, the button will not have an icon.
The default setting is Bell icon. If set to an empty string, the button will have no icon.

disabled #

optional
boolean
This controls whether the button is disabled or not.
The default is set to false.

maxCount #

optional
number
When the list first loads, this is the maximum number of notifications which will be initially loaded and displayed. If this value is set too small, there may not be enough notifications fetched to fill the list. If this value is set too large, it will take an unnecessarily long time to fetch and display so many notifications.
The default value strikes a reasonable balance, and only needs to be changed if the notification list is especially tall.

fetchAdditionalCount #

optional
number
When the list is scrolled all the way to the bottom, this is the number of notifications which will loaded into the bottom of the list to allow the user to continue scrolling. Increasing this value trades fewer server roundtrips for each individual load taking more time.
The default value strikes a reasonable balance for nearly all use-cases.

showPlaceholder #

optional
boolean
If false, when the notification list has no notifications, it will show a completely empty container. If set to true, it will instead show a placeholder, containing a description of the types of notifications a user will see.
The default value is true.

onClick #

optional
function
Callback invoked when the launcher button is clicked.

filter #

optional
NotificationListFilter
A JSON object that can be used to filter notifications displayed in the NotificationList.

This is an object with the following fields:

metadata #

optional
EntityMetadata
An arbitrary JSON object specified when the notification is created. The value for a metadata entry should be an object representing the metadata key/value to filter on. For example, to show only notifications with the metadata key of "category" set to "sales", set the filter to { metadata: { category: "sales" } }.

location #

optional
Location
The location where the notifications live. This will be the location of the thread containing the message which prompted the notification.

groupID #

optional
string
The group to which the message that prompted the notification belongs.

onNotificationClick #

optional
function
Callback invoked when a user clicks a notification.

Want to customize the components further?

Head to our CSS customization guide

Ask Cordy