simple-notifySimple Notify
Simple Notify is a pure Javascript library to show nice and customizable alert notifications.
Install
npm i simple-notifyimport Notify from 'simple-notify'
import 'simple-notify/dist/simple-notify.css'Include
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify/dist/simple-notify.css" />
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/simple-notify/dist/simple-notify.min.js"></script>Parameters
| Parameter | Type | Values | Default |
|---|---|---|---|
status |
String | 'error', 'warning', 'success', 'info' |
null |
title |
String | null |
|
text |
String | You can send any type of html. | null |
customIcon |
String | You can send any type of html. | null |
customClass |
String | null |
|
speed |
Number | transition-duration in milliseconds. | 300 |
effect |
String | 'fade', 'slide' |
'fade' |
showIcon |
Boolean | true | |
showCloseButton |
Boolean | true | |
autoclose |
Boolean | true | |
autotimeout (with autoclose: true) |
Number | 3000 | |
gap (margin between notifications) |
Number | 20 | |
distance (distance to edges) |
Number | 20 | |
type |
String | 'outline', 'filled' |
'outline' |
position |
String | Combine x and y position. 'left', 'right', 'top', 'bottom', 'x-center', 'y-center' or use only 'center' to center both x and y |
'right top' |
All parameters are optional but you must specify 'title' or 'text' at least.
Functions
| Function | Description |
|---|---|
| close() | You can close the notification manually using the close function. |
How to use
Just create a new instance, notification will be sent immediately. Simple example:
function pushNotify() {
new Notify({
title: 'Notify Title',
text: 'Notify text lorem ipsum',
})
}Full example:
function pushNotify() {
new Notify({
status: 'success',
title: 'Notify Title',
text: 'Notify text lorem ipsum',
effect: 'fade',
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: true,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 'outline',
position: 'right top'
})
}Close manually:
let myNotify
function pushNotify() {
myNotify = new Notify({
status: 'success',
title: 'Notify Title',
text: 'notify text',
effect: 'slide',
type: 'filled'
})
}
function close() {
myNotify.close()
}CSS
These styles can be customized easily using CSS variables. You can overwrite them in .sn-notifications-container or your custom class.
.sn-notifications-container {
/* colors */
--sn-success-color: rgb(111, 207, 151);
--sn-success-progress-color: rgb(84, 170, 120);
--sn-error-color: rgb(235, 87, 87);
--sn-error-progress-color: rgb(192, 69, 69);
--sn-warning-color: rgb(242, 201, 76);
--sn-warning-progress-color: rgb(196, 166, 79);
--sn-info-color: rgb(81, 205, 243);
--sn-info-progress-color: rgb(84, 169, 196);
/* container */
--sn-notifications-gap: 20px; /* controlled by js */
--sn-notifications-padding: 20px; /* controlled by js */
/* notify */
--sn-notify-width: 320px;
--sn-notify-radius: 6px;
--sn-notify-transition-timing-function: ease;
--sn-notify-transition-duration: 500ms; /* controlled by js */
--sn-notify-autoclose-timeout: 30000ms; /* controlled by js */
--sn-notify-padding: 0.75em;
--sn-notify-icon-size: 2em;
--sn-notify-close-icon-size: 1em;
--sn-notify-border-size: 1px;
--sn-notify-border-color: transparent;
--sn-notify-border-style: solid;
--sn-notify-progress-color: rgb(51, 51, 51);
--sn-notify-close-icon-color: rgb(51, 51, 51);
--sn-notify-title-color: rgb(51, 51, 51);
--sn-notify-text-color: rgb(77, 77, 77);
--sn-notify-shadow-color: transparent;
--sn-notify-progress-height: 5px;
}Credits
Designed by Prabesh Shakya