Notification List
Display a simple list of notifications showing recent actions which may be of interest
Live Demo
When to use #
The <NotificationList /> renders a list of notifications, showing users things that have happened recently which may be directly relevant to them. The list will automatically contain notifications about things that happened inside Cord components, such as the user being @-mentioned.
Send your own notifications via Cord
Our REST API enables you 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 #
import { NotificationList } from "@cord-sdk/react";
export const Example = () => {
return (
<NotificationList
maxCount={10}
fetchAdditionalCount={3}
filter={{
location: {page: 'foo'}
metadata: {category: 'sales'}
organizationID: 'org123'
}}
/>
);
};Copy
Properties #
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.
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.
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.A JSON object that can be used to filter notifications displayed in the
NotificationList.This is an object with the following fields:
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" } }.The location where the notifications live. This will be the location of the thread containing the message which prompted the notification.
The organization to which the message that prompted the notification belongs.