NotificationCardHeaderShell

The <NotificationCardHeaderShell> is part of a group of components that allow full customization of the notification card. The <NotificationCardHeaderShell> allows creating a custom header while keeping the built-in Notification context menu features such as "Mark Read" or "Snooze".

Props

Prop	Type	Required	Default value	Description
notification	INotification	No		The Notification to be displayed. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time
uiContext	"center"|"toasts"	No		The context in which the custom notification card will be rendered. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time
removeNotification	Function	No		The function that gets called when removing a toast from view. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time.

<NotificationCardHeaderShell> accepts child components to render.

The <NotificationCardHeaderShell> accepts child components to render. If there are no children, the default Finsemble notification card header will be rendered.

Usage

import {
    NotificationCardPropType,
    NotificationCardShell,
    NotificationCardHeaderShell,
    NotificationCardBodyShell
} from "@finsemble/finsemble-ui/react/components/notifications";

export const CustomNotificationCard: React.FunctionComponent<NotificationCardPropType> = (props) => {
    return (
        <NotificationCardShell {...props}>
            <NotificationCardHeaderShell  {...props}>
                {/*Custom NotificationCardHeader Child Components Go here... No children will render the default header*/}
                <div>{props.notification.title}</div>
            </NotificationCardHeaderShell>
            <NotificationCardBodyShell {...props} />
        </NotificationCardShell>
    );
};

Related UI Components:

NotificationCardShell, NotificationCardBodyShell