Top
Notification - Dismissing & persisting
Notification
This section will show in detail how notifications can be configured to be persistent and various ways that they can be dismissed.
By default, notifications are dismissed after a configured delay (the default is 3000ms), as specified by autoHideDelay. Specifying autoHideDelay=0 or autoHideDelay=false will make the notifications persistent, so the user will need to manually dismiss them by clicking the close button.
There are a number of other props that influence when/how notifications are dismissed:
  • cancelAutoHideOnClick - when this is true (which is the default value), if the user clicks anywhere inside the notification, the notification is no longer dismissed automatically.
    When pinButton=true, a pin-button is displayed in the top-right (or top-left for rtl) corner of the notification. A notification is pinned (persisted) by clicking on the pin button once, or, when cancelAutoHideOnClick=true, clicking the notification has the same effect as clicking on the pin button. However, clicking inside the notification cannot un-pin the notification. The user has to explicitly click the unpin button to unpin the notification.
  • delayAutoHideOnMouseOver - when this is true (which is the default), when the user hovers the mouse over the notification, the notification will not be dismissed. Only after the mouseout event is triggered, the notification will be hidden after another autoHideDelay time interval has elapsed.
  • hideOnClick - when this is true (the default value is false), notifications will be dismissed when the user clicks them.
Additionally, there is the nonBlocking (defaults to false) prop, which, if true, adds pointer-events: none, so notifications cannot be clicked - any clicks and mouse/pointer events are not captured, but rather go "through" the notification and target whatever is "underneath" that notification instead.
Notifications can also be managed programatically via any of the following methods:Those methods change the visible property of notifications.
By default, removeOnHide is true, which means notifications are automatically removed from the <NotificationBoard /> and from memory as soon as they are hidden. However, when removeOnHide=false, notifications are kept in memory, even if they are hidden, so they can be restored (shown) at a later time.