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