Responsive and Flexible Toast Alerts – Jam Toast

Jam Toast is a lightweight vanilla JavaScript library for creating non-intrusive toast popups on web pages. It provides various notification types with customizable positioning and timeout settings.

This library enables you to display brief, informative messages to users without disrupting their workflow. Typical use cases include:

• Confirming form submissions
• Displaying API response messages
• Notifying users about system messages like maintenance notices or updates.
• Showing validation messages

How to use it:

1. Import the needed stylesheet and module into your project.

<link rel="stylesheet" href="jam-toast.css">

<script type="module">
  import { JamToast } from './jam-toast.js';
</script>

2. Instantiate a new toast notification object using the JamToast() method. You can customize parameters such as maximum simultaneous notifications, display duration, and screen position.

• maxCount: Specifies the maximum number of toast notifications that can be displayed at the same time. Once this limit is reached, the oldest notification will be removed to make room for new ones. Default Value: 3
• timeout: Determines the duration in milliseconds that a toast notification remains visible before automatically dismissing. Default Value: 3000 (milliseconds)
• position: Sets the default position of toast notifications. Available options are: ‘top-right’, ‘top-left’, ‘bottom-right’, ‘bottom-left’. Default Value: ‘top-right’

const myToast = new JamToast({
  maxCount: 5,
  timeout: 5000,
  position: 'bottom-right',
});

3. Display toast messages by type:

myToast.showToast('Form submitted!', 'success');
myToast.showToast('Please check your input', 'error');
myToast.showToast('Loading data...', 'info');
myToast.showToast('Updates pending', 'warning');

4. Create new notifications types of modify existing styles through CSS.

.toast-info {
  background-color: #007bff;
}
.toast-success {
  background-color: #28a745;
}
.toast-warning {
  background-color: #ffc107;
  color: black;
}
.toast-error {
  background-color: #dc3545;
}