@dynamods/notifications-panel
v0.0.10
Published
HIG NotificationsPanel
Downloads
29
Keywords
Readme
Notifications Panel
The notifications panel provides information and warnings that products may recover from without user involvement. It is meant to be displayed in a flyout as a list of notifications.
Getting started
yarn add @hig/notifications-panel @hig/theme-context @hig/theme-data
Import the component
import NotificationsPanel, { Notification } from "@hig/notifications-panel";
Basic usage
<NotificationsPanel>
<Notification>
<p>Your subscription expires May 5</p>
</Notification>
</NotificationsPanel>
Advanced usage
import NotificationsPanel, { anchorPoints } from "@hig/notifications-panel";
import Timestamp from "@hig/timestamp";
<NotificationsPanel
open
heading="Alerts"
indicatorTitle="View application alerts"
notifications={[
{
id: "unique-id",
featured: true,
unread: true,
timestamp: <Timestamp timestamp="2018-08-20T20:24:50.333Z" />,
content: <p>Something happened</p>
},
{
content: "Hello world"
}
]}
/>