Notifications Panel

The NotificationsPanel is a customizable React component that provides a user interface for displaying and managing notifications within your application.

Features

• View and manage unread and all notifications
• Mark individual notifications or all notifications as read
• Automatic notification updates at configurable intervals
• Efficient handling of large notification lists through virtual scrolling
• Fully customizable UI components
• Flexible rendering modes (inline or overlay)
• Responsive design with adjustable dimensions

Basic Integration Example

import * as React from "react";
import { NotificationsPanel, INotificationsPanelButtonComponentProps } from "@gooddata/sdk-ui-ext";
import { isAlertNotification } from "@gooddata/sdk-model";

// Import required styles
import "@gooddata/sdk-ui-ext/styles/scss/main.scss";

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>
    );
}

Props

Customization Props

The NotificationsPanel component provides comprehensive customization options through its props. For applications requiring specific design requirements beyond the default styling, these customization props allow you to fully adapt the panel’s appearance and behavior.

Important: We strongly recommend using the provided customization props and custom components for styling modifications rather than direct CSS class overrides, which may break in future updates.

The following components can be customized by providing your own implementations:

• NotificationsPanelButton
• NotificationsPanel
• NotificationsPanelHeader
• NotificationsList
• NotificationsListEmptyState
• NotificationsListErrorState
• Notification
• NotificationSkeletonItem

Component Hierarchy

The components are organized in the following hierarchy:

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 customized independently while maintaining the overall functionality of the notifications panel. When customizing components, make sure to implement all the required props to ensure proper functionality.

Example with Custom Components and Inline Rendering

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

// Import required styles
import "@gooddata/sdk-ui-ext/styles/scss/main.scss";

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

Customizable Components

NotificationsPanelButton

The button component that opens the notifications panel. Required and rendered only when renderInline is false.

Props

NotificationsPanelHeader

The header component of the notifications panel. In the default implementation, it displays “all” / “unread” tabs and mark all as read button.

Props

NotificationsList

The main list component that displays notifications, empty state, or error component.

Props

NotificationsListEmptyState

Component displayed when there are no notifications.

Props

NotificationsListErrorState

Component displayed when there’s an error loading notifications.

Props

Notification

Component for rendering individual notification items.

Props

NotificationSkeletonItem

Component for rendering loading placeholder items.

Props