Notifications panel

Display and manage notifications with NotificationsPanel, configure refresh and inline or overlay rendering, and customize the panel's individual UI elements.

NotificationsPanel lists the in-app notifications of the current user, such as triggered alerts, and lets them mark notifications as read. It’s exported from @gooddata/sdk-ui-ext.

The panel:

shows all notifications or only the unread ones,
marks one notification or all of them as read,
refreshes the list at an interval you set,
loads long lists page by page with virtual scrolling,
renders inline or in an overlay opened by your button,
lets you replace each of its parts with your own component.

Basic usage

In overlay mode (the default), pass a NotificationsPanelButton component. The panel positions itself next to the button through buttonRef.

import { NotificationsPanel, type INotificationsPanelButtonComponentProps } from "@gooddata/sdk-ui-ext";
import { isAlertNotification } from "@gooddata/sdk-model";

import "@gooddata/sdk-ui-ext/styles/css/main.css";

function NotificationsPanelButton({
    buttonRef,
    toggleNotificationPanel,
}: INotificationsPanelButtonComponentProps) {
    return (
        <button
            // Provide button ref, so notification panel can be properly positioned
            ref={buttonRef}
            onClick={toggleNotificationPanel}
        >
            Notifications
        </button>
    );
}

function Header() {
    return (
        <header>
            <nav>
                <NotificationsPanel
                    onNotificationClick={(notification) => {
                        if (isAlertNotification(notification)) {
                            const dashboardURL = notification.details.data.automation.dashboardURL;
                            window.open(dashboardURL);
                        }
                    }}
                    NotificationsPanelButton={NotificationsPanelButton}
                />
            </nav>
        </header>
    );
}

Inline rendering

Set renderInline to render the panel in place instead of in an overlay. The panel then takes the size of its parent element, and you don’t pass NotificationsPanelButton.

import { NotificationsPanel } from "@gooddata/sdk-ui-ext";
import { CustomHeader, CustomNotification } from "./components";

import "@gooddata/sdk-ui-ext/styles/css/main.css";

function MyComponent() {
    return (
        <div style={{ width: 400, height: 500 }}>
            <NotificationsPanel
                NotificationsPanelHeader={CustomHeader}
                Notification={CustomNotification}
                renderInline
                refreshInterval={300000}
                onNotificationClick={(notification) => {
                    console.log("Notification clicked:", notification);
                }}
            />
        </div>
    );
}

Defaults

Prop	Default
`locale`	`"en-US"`
`renderInline`	`false`
`refreshInterval`	`600000` (10 minutes). `0` turns refreshing off.
`itemsPerPage`	`50`
`maxWidth`	`370` (overlay mode only)
`maxListHeight`	`527` (overlay mode only)
`itemHeight`	`52`
`itemsGap`	`10`
`itemPadding`	`15`
`skeletonItemsCount`	`5`

NotificationsPanelButton is required when renderInline is false.

Customizable components

To change how the panel looks, pass your own components instead of the default ones. Don’t override the panel’s CSS classes: they can change in any release.

The components are nested like this:

NotificationsPanel
├── NotificationsPanelButton (when not inline)
└── NotificationsPanel
    ├── NotificationsPanelHeader
    └── NotificationsList
        ├── NotificationsListEmptyState (when empty)
        ├── NotificationsListErrorState (when error)
        ├── NotificationSkeletonItem (when loading)
        └── Notification (for each notification)

Each component can be replaced on its own. A custom component must handle the props it receives, so the panel keeps working.

Prop	Default component	Props it receives	What it renders
`NotificationsPanelButton`	none	`INotificationsPanelButtonComponentProps`	The button that opens the panel: gets `buttonRef`, functions to open, close, or toggle the panel, and whether it’s open and has unread notifications.
`NotificationsPanel`	`DefaultNotificationsPanel`	`INotificationsPanelComponentProps`	The panel body.
`NotificationsPanelHeader`	`DefaultNotificationsPanelHeader`	`INotificationsPanelHeaderComponentProps`	The header with the “All” and “Unread” tabs and the “Mark all as read” button: gets the active view, a function to change it, the unread count, and `markAllNotificationsAsRead`.
`NotificationsList`	`DefaultNotificationsList`	`INotificationsListComponentProps`	The list: gets the notifications, the loading status and error, paging functions, the item sizes, and the item components below.
`NotificationsListEmptyState`	`DefaultNotificationsListEmptyState`	`INotificationsListEmptyStateComponentProps`	The message shown when the list is empty, for the active view.
`NotificationsListErrorState`	`DefaultNotificationsListErrorState`	`INotificationsListErrorStateComponentProps`	The message shown when loading fails: gets the `error`.
`Notification`	`DefaultNotification`	`INotificationComponentProps`	One notification: gets the `notification`, `markNotificationAsRead`, and `onNotificationClick`.
`NotificationSkeletonItem`	`DefaultNotificationSkeletonItem`	`INotificationSkeletonItemComponentProps`	A loading placeholder: gets its `itemHeight`.

Props

Prop	Type	Required	Description	Inherited from
`backend`	`IAnalyticalBackend`	No	Backend to use. - If not defined, the backend from the BackendProvider context will be used.	—
`enableScheduleNotifications`	`boolean`	No	Enable export to document storage. - Default: false	—
`itemHeight`	`number`	No	Height of the item in notifications list in pixels. - Default: 52	—
`itemPadding`	`number`	No	Padding of the notification item (from left and right) in pixels. - Default: 15	—
`itemsGap`	`number`	No	Gap between notification items in the list in pixels. - Default: 10	—
`itemsPerPage`	`number`	No	Number of notifications to load per page. - Default: 50	—
`locale`	`ILocale`	No	Locale to use.	—
`maxListHeight`	`number`	No	Maximum height of the notifications list in pixels. - Default: 527 - Does not have effect when renderInline is true - inline rendering always fills the parent container.	—
`maxWidth`	`number \| string`	No	Optionally override max width of the notifications panel. - Does not have effect when renderInline is true - inline rendering always fills the parent container.	—
`onNotificationClick`	`(notification:` `INotification) => void`	No	Callback for notification click.	—
`refreshInterval`	`number`	No	Refresh interval in milliseconds. - Default: 600000 (10 minutes) - If set to 0, notifications won’t be refreshed automatically.	—
`renderInline`	`boolean`	No	Enable inline rendering of the notifications panel - Default: false - If enabled, NotificationsPanelButton won’t be rendered, and NotificationsPanel won’t be rendered inside modal - This is useful when you want to render notifications panel in a custom modal.	—
`skeletonItemsCount`	`number`	No	Number of skeleton items to render when loading notifications. - Default: 5	—
`workspace`	`string`	No	Workspace ID to use. - If not defined, the workspace ID from the WorkspaceProvider context will be used. - If workspace is not defined and there is no WorkspaceProvider, notifications will be loaded from all workspaces.	—
`Notification`	`ComponentType<INotificationComponentProps>`	No	Custom notification component.	`INotificationsPanelCustomComponentsProps`
`NotificationSkeletonItem`	`ComponentType<INotificationSkeletonItemComponentProps>`	No	Custom notification skeleton item component.	`INotificationsPanelCustomComponentsProps`
`NotificationsList`	`ComponentType<INotificationsListComponentProps>`	No	Custom notifications list component.	`INotificationsPanelCustomComponentsProps`
`NotificationsListEmptyState`	`ComponentType<INotificationsListEmptyStateComponentProps>`	No	Custom notifications list empty state component.	`INotificationsPanelCustomComponentsProps`
`NotificationsListErrorState`	`ComponentType<INotificationsListErrorStateComponentProps>`	No	Custom notifications list error state component.	`INotificationsPanelCustomComponentsProps`
`NotificationsPanel`	`ComponentType<INotificationsPanelComponentProps>`	No	Custom notifications panel component.	`INotificationsPanelCustomComponentsProps`
`NotificationsPanelButton`	`ComponentType<INotificationsPanelButtonComponentProps>`	No	Custom open notifications panel button component. - Required if renderInline is not enabled.	`INotificationsPanelCustomComponentsProps`
`NotificationsPanelHeader`	`ComponentType<INotificationsPanelHeaderComponentProps>`	No	Custom notifications panel header component.	`INotificationsPanelCustomComponentsProps`