This project is based on the original notification system by X:/Notify by Xtrendence but follows a slightly different approach. Instead of having just a single JavaScript file it uses JavaScript and less. The latter does almost all the styling. Both files together are even smaller than the original single file.

As far as the interface is concerned there is one major change: Instead of success, error, alert, and info there only is display - the kind of output is controlled by the optional second parameter that defaults to 'info'. In addition to this the style options no longer exists - as far as notifications are concerned I prefer consistency over more freedom how they are displayed.

Important My version of X-Notify is intended to be used with a builder like esbuild. You can however still use it in the following manner provided that you remove the export default from the beginning of the code:

To add X-Notify to a web page, you need to include x-notify.js and x-notify.css (alternatively x-notify.min.js and x-notify.min.css), i.e. use

<script src="x-notify.js"></script>
<link rel="stylesheet" href="x-notify.css" type="text/css">

or similar.

const Notify = new XNotify('TopLeft');

Notify.display({
  title: 'Title',
  description: 'Description',
  duration: 4000
},
'success');

The above would show a notification on the top right of the screen and it'd stay there for 4 seconds before disappearing. There are quite a few options you can change, such as:

Notify.display({
  title: 'Failed to Upload File',
  description: 'The file you submitted couldn't be uploaded.',
  duration: 4000
},
'error');

There are 4 different notification types: 'success', 'error', 'alert', and 'info', all of which can be used in the following manner:

Notify.display(options, 'success');
Notify.display(options, 'error');
Notify.display(options, 'alert');
Notify.display(options, 'info'); // alternatively just 'Notify.display(options)'

Here's a list of all the options you can use, and acceptable values:

A full example with a button click event listener, and a fully custom notification:

document.addEventListener('DOMContentLoaded', () => {
  const Notify = new XNotify();

  let custom = document.getElementById('custom');

  custom.addEventListener('click', () => {
    Notify.display({
      title: 'Customized Notification',
      description: 'Description of the notification.',
      duration: 10000
    },
    'info');
  });
});