Notification - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Notification /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/Notification and @zippytech/react-toolkit/Notification/index.css.
To show notifications, you have to render a <NotificationBoard /> in your app. Optionally, you can give it an id property so the <NotificationBoard /> instance will be exposed under the global zippy.notification.<ID> namespace so you can use it to call .addNotification() to display notifications in your app. Alternatively, get a ref to it and use the referenced <NotificationBoard /> instance to call .addNotification() on that ref.
By default, notification messages dissapear after 3s, but you can customize this delay or can have them pinned, so the user needs to close them explicitly.
In the above code snippet, by default, notifications are closed after 3000ms. By pinning a notification, it is no longer closed after this delay. But once you unpin it, after 3000ms (the value specified by autoHideDelay) elapse, the notification is closed. Or, the user can just click the closeButton and dismiss the notification immediately.
There are other options of persisting notifications as well:
  • cancelAutoHideOnClick - if this is true (which is the default), when the user clicks the notification, it will no longer closed after the configured hide delay.
  • 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.
Notifications also support auto-pinning when clicking anywhere inside the notification, via cancelAutoHideOnClick=true.
Notifications can be displayed in multiple positions on the screen and stacked in various ways. The default stacking is ['bottom','left'], which means that new notifications make the stack grow towards the bottom of the screen and then wrap towards the left of the screen. This means that the first notification is displayed in the top-right of the screen.
Additionally, new notifications can be pushed to the start of the list, or to the end of the list, depending on the value of push (defaults to "start").
When 'center' is used for stacking - so you want to center the notifications to one of the sides of the screen (or constrain region), wrapping is not possible. Valid values for center stacking are:
  • ['top', 'center']: stacks from top to bottom centered
  • ['bottom', 'center']: stacks from bottom to top centered
  • ['left', 'center']: stacks from left to right centered
  • ['right', 'center']: stacks from right to left centered
You can read more about stacking in the Stacking and Positioning section.
By default, notifications are constrained to the browser viewport. However, this can be configured via the region prop.
Use regionOffset to specify an offset (distance) from the specified region, so notifications respect the given offset when computing their position.
You can read more about constraining notifications in the Constraining to a region section .