https://github.com/luisvinicius167/notti

Dead simple user notification.
https://github.com/luisvinicius167/notti

javascript library notifications

Last synced: 16 days ago
JSON representation

Dead simple user notification.

• Host: GitHub
• URL: https://github.com/luisvinicius167/notti
• Owner: luisvinicius167
• Created: 2017-02-05T15:43:14.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-06T19:18:46.000Z (almost 8 years ago)
• Last Synced: 2024-08-01T00:55:58.276Z (3 months ago)
• Topics: javascript, library, notifications
• Language: JavaScript
• Homepage: https://notti.surge.sh
• Size: 39.1 KB
• Stars: 70
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# notti

[![npm package](https://img.shields.io/badge/npm-v0.0.5-lightgray.svg)](https://www.npmjs.com/package/notti)

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

---



  



[notti Website ➞](https://notti.surge.sh/)

## 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/[email protected]`

#### The Gist:

```javascript

import { notti } from 'notti';

notti('Hello User!');

notti({

  // HTML Element

  message: 'Hello! User',

  isHTML: true,

  style : {

    backgroundColor: '#333',

    color:'#fff',

    bottom: '10px',

    right: '10px'

  },

  onHide: () => {

    console.log('Awesome notti.js!')

  }

});

```


### API

```javascript

/**

 * @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

```javascript

/**

  * @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' || '
Hi Folks
',

    // 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')}

  }

```