victor78 / flashjs

Flash.js is a JavaScript library to create and handle HTML flash messages

FlashJS

Flash.js is a simple JavaScript library allowing you to create and handle HTML flash messages. You can try it yourself here.

Installation :

You only have to include the flash.js script into your HTML. That's it !

<script src="path/to/flash.min.js"></script>

Getting started :

Vanilla JS

Use flash.js is very easy. To display a success flash message, you just have to add this line below.

window.FlashMessage.success('This is a successs flash message !');

By default, four verbs are availables : success, warning, error and info.

You can add custom verbs with by call the static method addCustomVerbs on the FlashMessage class :

window.FlashMessage.addCustomVerbs('forbidden', 'example', 'custom');
window.FlashMessage.forbidden('My custom forbidden flash message !');

In the example above, three custom verbs have been added. As you can see, you can now use thses verbs !

You can also create a flash message by instanciating the FlashMessage class or by using the static method create :

new window.FlashMessage('This is a successs flash message !', 'success');

// OR

window.FlashMessage.create('Flash.js is awesome !', 'success')

Flash.js also allows you to simply add flash behavior on existing DOM elements (especially if HTML is rendered server-side) :

HTML

<div class="flash-container">
  <div class="flash-message" data-type="success" data-timeout="8000">My awesome success message !</div>
  <div class="flash-message" data-type="error" data-timeout="8000">My sadly sad error message !</div>
</div

JS

new window.Flash('.flash-message');

// OR

window.Flash.create('.flash-message');

jQuery

However, you can easily use flash.js with the jQuery plugin (by adding behavior on existing DOM elements, when HTML is rendered server-side for example) :

HTML

<div class="flash-container">
  <div class="flash-message flash-success">My awesome success message with the Flash.js jQuery plugin !</div>
  <div class="flash-message flash-error">My sadly sad error message with the Flash.js jQuery plugin !</div>
</div>

<!-- Don't forget to add flash.js jQuery plugin script right after the flash.js library ! -->
<script src="path/to/flash.min.js"></script>
<script src="path/to/flash.jquery.min.js"></script>

JS

$('document').ready(function () {

  $('.flash-message').flashjs({
    timeout: 5000
  });

});

Options :

Flash.js can optionnaly takes an object in parameter, as following :

window.FlashMessage.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
  progress: true, // displays a progress bar at the bottom of the flash message
  interactive: true, // Define flash message actions (pause on mouseover, close on click) 
  timeout: 8000, // Flash message timeout
  appear_delay: 200, // Delay before flash message appears
  container: '.flash-container', // Flash messages container element selector
  theme: 'default', // CSS theme (availables: default, dark)
  classes: {
      container: 'flash-container', // Custom container css class
      flash: 'flash-message', // Flash message element css class
      visible: 'is-visible', // Flash message element css visible class
      progress: 'flash-progress', // Flash message progress bar element css class
      progress_hidden: 'is-hidden' // Flash message progress bar element hidden css class
  }
});

You can read the documentation for more informations.