Skip to content

A Material Design inspired Snackbar plugin for the web

License

Notifications You must be signed in to change notification settings

collinsnji/Snacky

Repository files navigation

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

<script src='/dist/snacky.min.js'></script> <script> function showExample(){ new Snacky().show('Simple snackbar example'); } </script>

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

Property Type Default Desription
message string Snacky.js is awesome! Notification message
color string #FFFFFF Color of notification text
background string #323232 Notification background color
duration integer 5000 Timeout before notification is destroyed
showAction boolean false Show an action button on the notification
actionText string Dismiss Text 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

About

A Material Design inspired Snackbar plugin for the web

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published