@aegisjsproject/toast-message

A modern, dependency-free web component powered by the Popover API

• Code of Conduct
• Contributing

Installation

Install via npm:

npm install @aegisjsproject/toast-message

Usage

Import Map with unpkg

You can use the component without a build step by utilizing an import map and a CDN like unpkg:

<script type="importmap">
  {
    "imports": {
      "@aegisjsproject/toast-message": "https://unpkg.com/@aegisjsproject/[email protected]/toast-message.min.js"
    }
  }
</script>

Basic HTML Examples

1. Declarative Usage

You can write the element directly in your HTML. Using the autoshow attribute will trigger it immediately when added to the DOM.

<toast-message autoshow duration="5000" position="bottom-center" theme="dark">
	<span slot="content">Your profile has been updated successfully.</span>
</toast-message>

2. Programmatic Usage

You can import the class and use its static methods to dynamically generate and display toasts from JavaScript.

<button id="toast-btn" type="button">Show Toast</button>

<script type="module">
	import { HTMLToastMessageElement } from '@aegisjsproject/toast-message';

	document.getElementById('toast-btn').addEventListener('click', () => {
		HTMLToastMessageElement.toast('Action completed successfully!', {
			duration: 3000,
			position: 'top-end',
			theme: 'light',
			autoRemove: true
		});
	});
</script>