Loaf Alert

Create a small notification box that appears briefly and disappears.
Notice boxes that are easy to modify and use in 'Webpack' and 'Babel' projects.

Install

npm install --save loaf-alert

How to use

import lAlert from 'loaf-alert';

document.addEventListener('click', () => {
  // Print message notification box
  lAlert('Show alert message');
});

Capture

Options

You can get the setOptions function and set the options.

import { setOptions } from 'loaf-alert';

setOptions({
  length: 4, // Maximum number of notification boxes to show (Default. 4)
  duration: 5000, // Duration of exposure of the notification box (Default. 5000 (5s))
  class: 'custom-class' // Add a class attribute for modify the style (Default. '')
});

Alert message

import lAlert from 'loaf-alert';

lAlert('message text or html');

Modify style

The following styles are applied by default.

#loaf-alert-container {
  position: fixed;
  left: 20px;
  bottom: 20px;
}
.loaf-alert-box {
  background: #000;
  margin: 10px 0 0 0;
  color: #fff;
  width: 240px;
  padding: 10px 20px;
  font-size: 13px;
  line-height: 20px;
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

After you specify an additional class

import { setOptions } from 'loaf-alert';

setOptions({
  class: 'custom-class'
});

You can modify the style as shown below.

.custom-class .loaf-alert-box {
  background: #fff;
  color: #000;
}

Example

You can go to the 'example' directory, install the example source, and check the run.

cd ./example

npm install

npm start

License

MIT