npm install one-notificationOr in browser you can use One Notification with UNPKG:
<link rel="stylesheet" href="https://unpkg.com/one-notification/dist/one-notification.min.css">
<script src="https://unpkg.com/one-notification"></script>import oneNotification from "one-notification";
import "one-notification/dist/one-notification.min.css";
oneNotification({
/* configuration */
});There are some configuration properties that you can pass into the function parameter:
| key | type | required | default | description |
|---|---|---|---|---|
| text | string |
required | Text that displayed on notification | |
| icon | string |
required | Icon that displayed on notification (You can use text, or HTML tag) | |
| onClick | function |
A function that fired when notification is clicked | ||
| iconSize | number |
21 | Icon size in pixels | |
| iconColor | string |
#FFFFFF | Icon color | |
| iconBackgroundSize | number |
42 | Icon background size in pixels | |
| iconBackgroundColor | string |
#1B9CFC | Icon background color | |
| duration | string |
4s | Duration of notification | |
| color | string |
#FFFFFF | Text color | |
| backgroundColor | string |
#1E272E | Notification color | |
| fontSize | number |
14 | Font size in pixels | |
| fontWeight | number |
500 | Font weight | |
| fontFamily | string |
sans-serif | Font family (use it when you are already imported font file in somewhere else) | |
| iconScale | number |
0.70 | Scale down icon when notification is active | |
| borderRadius | number |
1000 | Notification border radius | |
| zIndex | number |
1400 | Notification z-index |
One Notification is released under the MIT license.