NotificationCardBodyShell

The <NotificationCardBodyShell> is part of a group of components that allow full customization of the notification card. The <NotificationCardBodyShell> allows creating a custom notification while keeping built-in rendering of actions.

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

<NotificationCardBodyShell> accepts child components to render.

The <NotificationCardBodyShell> accepts child components to render. If there are no children, the default Finsemble Notification body will be rendered.

Usage

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

export const CustomNotificationCard: React.FunctionComponent<NotificationCardPropType> = (props) => {
    return (
        <NotificationCardShell {...props}>
            <NotificationCardHeaderShell {...props} />
            <NotificationCardBodyShell {...props}>
                {/* The Component children should be empty if you want the default Finsemble Notification Header */}
                <NotificationCardBodyContentLogo contentLogo={props.notification.contentLogo} />
                <div className="notification-card__body_text">Custom</div>
                {/* NotificationCardBodyShell will render the notification Actions */}
            </NotificationCardBodyShell>
        </NotificationCardShell>
    );
};

Related UI Components:

NotificationCardShell, NotificationCardHeaderShell