Legacy version 6 documentation. View current documentation.Legacy version 6 documentation. View current documentation.
The NotificationCardShell provides a wrapper for creating a custom notification card. The shell provides the new notification highlight functionality seen in the Notification Center.
| 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. |
<NotificationCardShell> accepts child components to render.
The <NotificationCardShell> accepts child components to render. If there are no children, the default Finsemble Notification will be rendered.
import {
NotificationCardPropType,
NotificationCardHeaderShell,
NotificationCardShell,
NotificationCardHeaderLogo,
NotificationCardBodyShell,
NotificationCardBodyContentLogo
} from "@finsemble/finsemble-ui/react/components/notifications";
export const CustomNotificationCard: React.FunctionComponent<NotificationCardPropType> = (props) => {
return (
<NotificationCardShell {...props}>
<NotificationCardHeaderShell {...props}>
{/* The Component children should be empty if you want the default Finsemble Notification Header */}
<NotificationCardHeaderLogo headerLogo={props.notification.headerLogo} />
<div className="notification-card__title">Custom</div>
{/* NotificationCardHeaderShell will render the notification context menu */}
</NotificationCardHeaderShell>
<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>
);
};