Introducing “cheers-alert”

cheers-alert demo

As look for NPM package for website notification, an idea popped into my head. The idea of why not make one. This package is inspired by a MeteorJS package, themeteorchef:bert. This is my first NPM package and I’m willing to accept opinions and suggestions about it.



$ npm install cheers-alert --save


$ bower install cheers-alert --save

Once we’ve successfully installed the package, we’re ready to use it.



import cheers from 'cheers-alert';
import 'cheers-alert/src/cheers-alert.css'; //load style
import 'font-awesome/css/font-awesome.min.css'; //load font-awesome

First, we import cheers from cheers-alert. Second, we load the css which the package uses. Please note that the icons in the notifications depends on font-awesome so we also need to install it.

$ npm install font-awesome --save


title: 'Warning',
message: 'Validation error',
alert: 'slideleft',
icon: 'fa-user',
duration: 3

Finally, we can start using the package by calling cheers.success() and passing in the object as argument. BTW, you can also call cheers.warning(), cheers.error(), and

The object we’re passing sets the following data into our notification. The only required key in the object is the message. The other keys when not set sets a default value. Here the default values when other keys are not set.

title = ''
alert = 'fadein'
duration = 4

For the icon key the default value depends on what function you’re using. Either .success().warning().error(), or .info().

success = 'fa-check'
warning = 'fa-exclamation'
error = 'fa-times'
info = 'fa-info'

Other Functions


This function sets the duration of all notification so you don’t need to keep on assigning duration. Minimum value to be assign is 2.

cheers.setDuration(10); //sets all notification's transition.


This function sets if the notification can be dismissed on click.

cheers.setToggle(false); //defaults to true when not set.


This function sets is the notification stacks.

cheers.setStacking(false); //defaults to true when not set.

For live demo Click here.