0.0.4 • Published 7 years ago

snacky.js v0.0.4

Weekly downloads
4
License
MIT
Repository
github
Last release
7 years ago

Snacky.js

Travis Coveralls Version Size npm Contributors Issues License

A Material Design inspired Snackbar plugin for the web

Snacky.js is a simple and minimal node module which makes adding snackbar notifications to web apps utterly easy.

How to install

In your project root, run

npm install --save snacky.js

How to use

Require the module like any other module in your javascript file. That is,

var Snacky = require('snacky.js')

Example usage

Show Example

  var Snacky = require('snacky.js');

  // Create a new default Snacky notification (or snackbar)
  // Default message in snackbar is 'Snacky is awesome!'
  let snackbar = new Snacky();

  // Show the default snackbar
  snackbar.show();

Want Snacky.js to blend with your app style?

Change default message

  var Snacky = require('snacky.js');

  // Create a new Snacky notification with custom content
  let snackbar = new Snacky('Hello world');
      snackbar.show();
  // Tip: You can create and show a snackbar at the same time. E.g
  // let snackbar = new Snacky('Hello world').show();

Change default style and timeout duration

  var Snacky = require('snacky.js');

  // Change text color and background color
  let snackbar = new Snacky('Hello world', {color: 'red', background: '#43528f'});
  // Color value follows the same convention as in CSS

  // Change default duration
  let snacky = new Snacky('Hello world', {duration: 6000}).show();
  // The duration parameter is in miliseconds

Want to customise more

  var Snacky = require('snacky.js');

  // Combine it all
  let Snack = new Snacky('Unicorns can\' fly!', {
      color: '#fff', background: 'pink', duration: '4000'
    });
  // Add an action button!
  new Snacky('Action button', { showAction: true, actionText: 'OK'}).show();

All properties

PropertyTypeDefaultDesription
messagestringSnacky.js is awesome!Notification message
colorstring#FFFFFFColor of notification text
backgroundstring#323232Notification background color
durationinteger5000Timeout before notification is destroyed
showActionbooleanfalseShow an action button on the notification
actionTextstringDismissText to show on notification action button

Contributing

Want to contribute to make this better? Open a new issue or add a new feature then make a PR :)

License

Licensed under the MIT License