NotificationCenter

Open in Playground

onViewAll (or viewAllHref, a link) adds a "View all" action at the bottom of the dropdown; it closes the dropdown first, then calls your handler. maxItems shows only the newest few and the action then reads "View all (12)", with the total. Customize the text with viewAllLabel; linkComponent / linkProp make viewAllHref a router link.

Open the bell and choose "View all".

Props

NotificationCenter

  • notificationsNotification[]

    Notifications, newest first. See the Notification table below.

  • onSelect(notification) => void

    Called when one is clicked.

  • onMarkRead(id) => void

    Called when an unread one is clicked.

  • onMarkAllRead() => void

    Adds a "Mark all read" action.

  • onClear() => void

    Adds a "Clear" action.

  • onViewAll() => void

    Adds a "View all" footer action; it closes the dropdown, then calls this.

  • viewAllHrefstring

    Same, as a link.

  • viewAllLabelstring
    Default: 'View all'

    Text for the "View all" action.

  • linkComponentElementType
    Default: 'a'

    Router link used for viewAllHref.

  • linkPropstring
    Default: 'href'

    Name of its destination prop.

  • maxItemsnumber

    Show only the newest this many; "View all" then shows the total.

  • emptystring
    Default: 'You are all caught up'

    Shown when there are none.

  • align'end' | 'start'
    Default: 'end'

    Which edge of the bell the panel aligns to.

Notification

  • idstring | number

    Unique id of the notification.

  • titleReactNode

    Headline of the notification.

  • bodyReactNode

    Text under the title.

  • timeReactNode

    When it arrived.

  • readboolean
    Default: false

    Whether it has been read; unread ones are counted and marked.

Related hooks and theme:useDismissable