Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vadimkorr/module-notification
Plugin for displaying Notifications inside specified html element containers (Modules). You can create multiple independent Modules which handle their own set of Notifications.
https://github.com/vadimkorr/module-notification
javascript module-notifications notifications npm
Last synced: 12 days ago
JSON representation
Plugin for displaying Notifications inside specified html element containers (Modules). You can create multiple independent Modules which handle their own set of Notifications.
- Host: GitHub
- URL: https://github.com/vadimkorr/module-notification
- Owner: vadimkorr
- License: mit
- Created: 2017-07-17T21:44:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:11:18.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T08:10:11.108Z (7 months ago)
- Topics: javascript, module-notifications, notifications, npm
- Language: JavaScript
- Homepage: https://vadimkorr.github.io/module-notification
- Size: 3 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# module-notification
[](https://www.npmjs.com/package/module-notification) [](https://www.npmjs.com/package/module-notification)
[](https://github.com/vadimkorr/module-notification) [](https://github.com/vadimkorr)
[](https://travis-ci.org/vadimkorr/module-notification)
[](https://www.npmjs.com/package/module-notification)
#### JS library for displaying Notifications inside specified html element containers (Modules). You can create multiple independent Modules which own separate set of Notifications.
You can check out the [Demo](https://vadimkorr.github.io/module-notification)
## Change log
- v2.0.0 - Removed jQuery dependency, used Font Awesome for icons
- v3.0.0 - Optimized builds, removed third-party font providers, add more animations
## Installation
```console
npm install module-notification
yarn add module-notification
```
## Referencing
### requirejs
```js
define(['./node_modules/module-notification/dist/index.js'], function() {
//...
})
```
### index.html (local)
```html
```
### index.html (CDN)
```html
```
## Usage
-
Create html element where notifications will be pushed
```html
```
-
Specify styles
```css
#notifications {
min-height: 250px;
width: 400px;
padding: 10px;
background-color: #f7f9ff;
border-radius: 20px;
border-color: #a8bbff;
border-width: 2px;
border-style: solid;
}
```
-
Create new module
```js
let myNotificationsModule = new MNModule({
container: '#notifications', // required
onNotificationsCountChange: number => {
console.log('Number of notifications', number)
},
})
```
-
Create group (optional)
Groups used to operate with the subset of notifications. Group may have one or more elements. You can force the group to have only one element making field `greedy` equal to `true`. It is not necessary to create group, all notifications without specifying `groupId` will be associated with group with id `default`.
```js
myNotificationsModule.createEmptyGroup({
id: 'test', // required
greedy: false,
})
```
-
Add notifications
```js
// pushNotification - appends new notification (is added from the bottom)
let myNotification1 = myMNModule.pushNotification({
title: 'Hello!',
message: "I'm a notification",
animation: 'fade', // 'fade' (by default), 'rotate'
closeInMS: 5000, // Notification will be closed automatically in specified amount of milliseconds; to prevent notification from closing, just omit this option. It does not close automatically by default.
groupId: 'test', // 'default' (by default)
type: 'info', // "info" (by default), "warning", "error", "success"
template: ({ title, message }) => `
${title}
`, // Allows to create customized notifications. If used, type will be ignored.
})
// unshiftNotification - prepends new notification (is added from the top)
let myNotification2 = myMNModule.unshiftNotification({
// same options as pushNotification
})
```
-
Remove notification
```js
myNotification1.remove()
```
-
Remove all the notifications of the specified group
```js
myModule.removeNotifications('test')
```
-
Remove all the notifications of the module
```js
myModule.removeNotifications()
```
To add customized notidfications you have to:
-
Specify function which will return custom template, e.g.
```js
const customTemplate = ({ title, message }) => {
return `
${title}
${message}
[x]
`
}
```
In order to make custom notification closable by user click assign class `.mn-close-btn` to the element which will trigger closing on click, e.g.
```html
[x]
```
-
And assign this function to `template` option:
```js
customizedNotifsModule.pushNotification({
title: 'Hello!',
message: "I'm a custom notification",
template: customTemplate,
})
```
### Example
We prepared small but pretty awesome example of customized notifications, hope you will like it
For more examples see our [demo](https://vadimkorr.github.io/module-notification/)