NoticeZ | A small, simple library for creating push notifications

Installation

You can download noticez to your project using npm by exectute this command

npm install noticez

Then to import to your project and use it, run this command

let NoticeZ = require ( 'noticez' );

NoticeZ ( 'hello' , 'testing' );

Or you can download the code from here. Then add a script tag that point to the library

< script src= 'path/to/library/NoticeZ.js' />

Basic notification

To create a basic notification, you will only need to specify the title and content of the notification then let the library do the rest.

Notes:
The default background for the notification is #3498db
The default time until disappear is 3 secs
The default position is bottom right

NoticeZ ( "Success" , "A task has been successfully executed !" )

Custom time and position notification

To customize "time until disappear" of a notification, you can specify the time property in the options. If you set the time to a negative number, for example: -1, the notification will never disappear. However, it can be closed using the canClose option to create a close button.

            let
             options = {
          

              time: 3000 //3secs 
          

            }
          

            NoticeZ
            (
            'Hello'
            ,
            'Good bye in 3 secs'
            ,
            options
            )
          

To change the position of the notification, the position property has been provided.

There are 4 different types of position:

top left

top right

bottom left

bottom right

            let
             options = {
          

              position: 
            'top right'
            ,
          

              time: 5000 // 5 secs 
          

            }
          

            NoticeZ
            (
            'Hello'
            ,
            'Good bye in 5 secs'
            ,
            options
            )
          

Custom styles

To change the style of the notification you can add these properties to the options

background: (type: string) The hex or name or rgba of the background color

textColor: (type: string) The hex or name or rgba of the text color

roundness: (type: int) The roundness of the corner in pixel (px)

font: (type: string) The font for both title and content

titleFont: (type: string) The font for just the title

contentFont: (type: string) The font for just the content

width: (type: int) The width of the notification in pixel (px)

height: (type: int) The height of the notification in pixel (px)

            let
             options = {
          

              background: 
            '#34495e'
            ,
          

              textColor: 
            '#f1c40f'
            ,
          

              roundness: 15
            ,
          

              font: 
            'Raleway'
            ,
          

            }
          

            NoticeZ
            (
            'Hello'
            ,
            'This is a custom notification'
            ,
            options
            )
          

Events

Currently there're 4 basic events:

OnMouseOver

OnMouseLeave

OnDisappear

OnClick

You can add those event to the 4th parameter

            let
             events = {
          
              // es6 arrow function
          
              OnMouseOver: () => {
          
            alert 
            (
            'mouse on'
            );
          
              },
          
              OnMouseLeave: () => {
          
            alert 
            (
            'mouse off'
            );
          
              },
          
              OnDisappear: () => {
          
            alert 
            (
            'good bye'
            );
          
              }
          
            }
          
            NoticeZ
            (
            'Hello'
            ,
            "I'm a notification try hover me"
            ,
            {}
            ,
            events
            )

Other options

canClose : This property will create a close button for the notification

NoticeZ ( 'Hey' , 'I have a close button' , { canClose: true } )

image : If you want to display an image on the notification you can use this property. This property is a string that contains link to your desired image.

NoticeZ ( 'Hey' , "There's an image on me" , { image: "https://avatars1.githubusercontent.com/u/12984316?s=460&v=4" } )

html : This property will allow both title and content of the notification to include html code.

NoticeZ ( '<font size="30px">Hey</font>' , 'Important message' , { html: true } )