Presentation

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


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

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
   - info

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

window.FlashMessage.addCustomTypes('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 :

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

Configuration

Moreover, flash.js comes with a lot of options :

window.FlashMessage.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
  progress: true,
  interactive: true,
  timeout: 8000,
  appear_delay: 200,
  container: '.flash-container',
  theme: 'default',
  classes: {
      container: 'flash-container',
      flash: 'flash-message',
      visible: 'is-visible',
      progress: 'flash-progress',
      progress_hidden: 'is-hidden'
  }
});

Configuration options
Option Description

progress
Boolean / false

Displays a progress bar at the bottom of the flash message

interactive
Boolean / false

Activate flash message actions (pause on mouseover, close on click)

timeout
Number / 8000

Flash message timeout (in milliseconds)

appear_delay
Number / 200

Delay before flash message appears (in milliseconds)

container
String / '.flash-container'

Flash messages container element selector

theme
String / 'default'

CSS theme
(availables: default, dark)

classes.container
String / 'flash-container'

Custom css class for flash container element

classes.flash
String / 'flash-message'

Custom css class for flash message element

classes.visible
String / 'is-visible'

Flash message element css visible class

classes.progress
String / 'flash-progress'

Flash message progress bar element css class

classes.progress_hidden
String / 'is-hidden'

Flash message progress bar element hidden css class

Try it !

Click on the button of your choice to display a flash message with flash.js :