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.

Install

NPM

$ npm install cheers-alert --save

Bower

$ bower install cheers-alert --save

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

Import

Import

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

Use

cheers.success({
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 cheers.info().

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

.setDuration()

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.

.setToggle()

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

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

.setStacking()

This function sets is the notification stacks.

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

For live demo Click here.