Simple Sliding Alert Notifications with Notico.js

Preview:

Description:

Notico is a simple and lightweight JavaScript notification library to create clear, non-intrusive, sliding alerts on your webpage. It currently includes four notification types: info, success, warning, and error, each with corresponding icons.

With customizable delay times, these notifications can automatically disappear after a set timeout or be manually closed by clicking a ‘close’ button. The notifications are stackable, meaning you can display multiple at once without clutter.

How to use it:

1. Download the Notico package and load the Notico.js script in your HTML document:

<script src="notico.js"></script>

2. Use the showToast method to display notifications. Each type has its own method, such as info, success, warning, or error. Here’s how you can display each type:

showToast.info({
  title: 'Information',
  message: 'This is an info notification',
  time: 5000
});
showToast.success({
  title: 'Success',
  message: 'Operation completed successfully',
  time: 5000
});
showToast.warning({
  title: 'Warning',
  message: 'Be cautious of this warning',
  time: 5000
});
showToast.error({
  title: 'Error',
  message: 'An error occurred',
  time: 5000
});

How Notico Works:

Notico uses JavaScript to create and manage notifications, and CSS to style them.

The library defines an object showToast with methods for creating and closing notifications. createToast generates the notification HTML, including a designated icon, title, and message. It adds this HTML to a container (toast-container) appended to the document body.

CSS styles define the appearance and animation of notifications, including their sliding entry and exit. The time parameter sets a timeout for automatic dismissal, and a close button provides manual control. The different notification types utilize a mapping to associate each type with its specific icon.