Legacy version 6 documentation. View current documentation.Legacy version 6 documentation. View current documentation.
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.
| 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.
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>
);
};