Dead simple user notification.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
img
src
.gitignore
Gruntfile.js
README.md
package.json
yarn.lock

README.md

notti

npm package

Don't make me think - Dead simple user notification.


notti Website ➞

Why should you use notti?

  • Tiny size: 2.2kb
  • No external CSS dependency
  • No jQuery dependency
  • Fully customizable

Install

Npm: npm install notti
CDN: https://unpkg.com/notti@0.0.5

The Gist:

import { notti } from 'notti';

notti('Hello User!');

notti({
  // HTML Element
  message: '<strong>Hello!</stong> User',
  isHTML: true,
  style : {
    backgroundColor: '#333',
    color:'#fff',
    bottom: '10px',
    right: '10px'
  },
  onHide: () => {
    console.log('Awesome notti.js!')
  }
});

API

/**
 * @name notti
 * type Function
 * @description Show an notification
 * @param {String || Object } The message or customizable Object
 */

 notti('Hi Folks!');
 
 // or
 const customizable = {
   message: 'Hi folks',
   style: {
     backgroundColor: '#333',
     color: '#fff',
     top: '10px',
     right: '10px',
   }
 }

 notti(customizable);

Customizable params

/**
  * @param {String} message The notification message
  * @param {Object} style Customizable style
  * @param {Boolean} autoHide Auto hide the notification box
  * @param {Boolean} hideOnClick Hide the notification when clicked
  * @param {Boolean} isHTML If the message string contains HTML Element
  * @param {Integer} delay The notification hide delay time
  * @param {Function} onHide The Function that will be called when the notification disappear
  **/

  const config = {
    // required
    message: 'Hi Folks' || '<p>Hi <span class="username">Folks</span></p>',
    // just true if your message contains HTML Element
    isHTML: false, //default
    //optional
    style:  {}, //default
    //optional
    autoHide:  true, //default
    //optional
    hideOnClick: true, //default
    //optional
    delay:  2000, //default
    //optional
    onHide: ()=>{console.log('Awesome notti.js')}
  }