🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Messg is a javascript library with css3 for animated notification messages.

Core Java Script CSS

Documentation

messg Build Status

Messages via CSS3 animations

Install

npm install --save messg

Usage

import messg from 'messg';  messg   .success('Awesome!')   .button('Ok');

API

messg(text[, type, delay])

Create Message instance.

text

Type: string

Message text.

type

Type: string
Default: 'default'

Message type:

  • default
  • success
  • info
  • warning
  • error

delay

Type: number
Default: null

Аutohide timeout.

messg.default(text[, delay])

messg.success(text[, delay])

messg.info(text[, delay])

messg.warning(text[, delay])

messg.error(text[, delay])

Aliases for messg(text[, type, delay])

messg.warning('Connection is lost'); messg.success('Task completed', 2500);

.button(name[, fn])

Add button.

name

Type: string

Button title.

fn

Type: function

Handler for click on the button.

Buttons with handler:

messg   .warning('Are you sure?')   .button('Yes', () => {    })   .button('No', () => {    });

Simple close button:

messg   .success('Task completed')   .button('Ok');

If buttons not specified, close message by clicking on it.

.hide(fn)

Add hide handler.

fn

Type: function

Handler for hide the message.

messg   .warning('Hello!')   .hide(() => {    });

messg.clean()

Close all messages in flow.

Options

messg.speed

Type: number
Default: 250

Show and hide speed (ms).

messg.position

Type: string
Default: 'top'

Messages position:

  • top
  • top-left
  • top-right
  • bottom
  • bottom-left
  • bottom-right

messg.flow

Type: boolean
Default: true

Disable messages flow if false.

messg.max

Type: number
Default: null

Max flow length.

messg.delay

Type: number
Default: null

Global delay for all messages.

License

MIT


You May Also Like