Handy-Notification

Google+ style notification which comes from the bottom to notify.

Demo

Quick links

1. Screenshot
2. Usage
3. API
4. Contribute

Screenshot

The above screenshot is from React-Instagram-clone-2.0

Usage

1. First install the package with npm or Yarn.

   # with npm
   npm install handy-notification
   
   # or with Yarn
   yarn add handy-notification
   

2. Create a div with class handy-notify.

   <div class='handy-notify'>
       <span></span>
   </div>
   

3. And here comes the fun part.

   import Notify from 'handy-notification'
   Notify({
       value: "Hello, how are you?",   // Message to be displayed
       onClick: e => console.log('Clicked!!'),  // Function executed when clicked on the notification bar
       done: () => console.log('I notified you & went back to the bottom!')    // function to be executed when you're notified
   })
   

Example

npm run example

Run the above command and open http://localhost:7007

API

Notify(options:Object)
options = {
    beforeTop: String,
    afterTop: String,
    value: String,
    selector: jQueryElement,
    onClick: Function,
    done: Function
}

beforeTop:

Initial top position which keeps the notification bar at the bottom to hide it. Default top style is 105%.

afterTop

Top position where it comes from the bottom & stops to notify you. Default top style is 90%.

value

This will be the message.

selector

Selector you just created.

onClick

Function executed when clicked on the notification bar.

done

Function executed when you're notified.

Contribute

Show your support by 🌟 the project!!

Feel free to contribute!!

Thanks for reading!!