$ npm install @zippytech/react-toolkit --save
$ yarn add @zippytech/react-toolkit
<Notification />component, all you need to import is
React, the code and styles of the component itself:
<NotificationBoard />in your app. Optionally, you can give it an
idproperty 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
refto it and use the referenced
<NotificationBoard />instance to call
.addNotification()on that ref.
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
closeButtonand dismiss the notification immediately.
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
autoHideDelaytime interval has elapsed.
['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.
'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
['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
regionOffsetto specify an offset (distance) from the specified region, so notifications respect the given offset when computing their position.