Menu
Commenze

back

Notification

  • Getting Started

  • Example Notification

  • Props Available

    notification

    unread

    timeSince

Notification

The Notification component displays a users notifications.

Example Notification

Using the props on this page and some basic HTML we can create a simple example of Notification:

jsx
<div className={unread ? "notification" : "notification--read"}>
    <p>{notification}</p>
    <p>{timeSince}</p>
</div>

Props

notification

The notification prop represents the notification text. For example "Caitlin replied to your comment". Below is a simple example of using the notification prop:

<p>{notification}</p>

unread

The unread prop represents wether or not a user has read a certain notification, allowing you to style the notification differently depending on if its been read or not. Below is a simple example of using the unread prop:

jsx
css
<div className={unread ? "notification" : "notification--read"}>
    //the notification
</div>

timeSince

The timeSince prop represents the how long ago the notification was made. Below is a simple example of using the timeSince prop:

<p>{timeSince}</p>