Pop Notify
A modern custom element to create toast notifications
Nice features
- Use popover when available in the browser (no more z-index!)
- Inject from anywhere in the dom or in js
- Compatible with any framework
- Fully standalone
- Fully accessible
- Nice animations
- Actions support
- Dark mode support
- Android style toast and/or notifications
- Just 7kb (11kb with styles)
How to use
Using simple html or just text:
<body>
...
<pop-notify autohide>
<div class="notification notification-simple">
Welcome to pop notify! <button type="button" class="btn-close" aria-label="Close"></button>
</div>
</pop-notify>
<pop-notify autohide variant="info">
Or plain text
</pop-notify>
...
</body>Using javascript:
customElements
.get("pop-notify")
.notifyHtml(
`<div class="notification notification-simple">A simple notification! <button type="button" class="btn-close" aria-label="Close"></button></div>`
);Using javascript with a template, actions, icons...:
customElements.get("pop-notify").notify("My warning message", {
variant: "warning",
header: "Sticky!",
autohide: false,
icon: "warning",
actions: [
{
label: "Some action",
class: "btn-warning",
onclick: (ev, inst) => {
alert("You clicked on some action");
},
},
{
label: "Just close",
class: "btn-dark",
onclick: (ev, inst) => {
inst.close();
},
},
],
});Fit any style
pop-notify doesn't come with any style, but you are free to use the default styles if you want to. It works quite nicely for example with bootstrap toasts, without any javascript from bootstrap itself.
You can check the config for the available options, but you might want to:
Override the default html
Simply set a new template generator function using configure.
customElements.get("pop-notify").configure({
template: (opts) => {
const html = opts.body;
return html;
},
});Customize how icons are displayed
By default, icons are injected "as-is" (eg: if you pass svg icons). You might want to adjus this to your own framework, for example here with materials symbols:
customElements.get("pop-notify").configure({
iconTransformer: (icon) => {
return `<span class="material-symbols-outlined">${icon}</span>`;
},
});Good friend with htmx
If you happen to use htmx, or any kind of library that injects content dynamically in the page, you might want to notify your user of the update (think, some kind of polling script that might or might not update the page).
Since pop-notify is a regular html element, you can simply inject it anywhere you want and it will automatically be moved to the toast container and displayed accordingly.
Android toasts
If you want to have more "lightweight" toast messages, like those you can find on android, you can use the toast method
customElements.get("pop-notify").toast("My message");or
<pop-notify toast>
I'm a toast
</pop-notify>These toasts messages are:
- centered, with variable width, at the bottom
- have no close icon and autohide automatically
- have no template and a consistent look
These can be combined with your regular notifications since they belong to a distinct container and work nicely with light/dark mode.
Config
Simply call the static configure method.
customElements.whenDefined("pop-notify").then(() => {
customElements.get("pop-notify").configure({});
});| Name | Type | Description |
|---|---|---|
| placement | String |
Where to position container |
| noTransition | Boolean |
Disable animation instead of relying on media queries |
| defaultDuration | Number |
Default duration for autohide in seconds |
| closeSelector | String |
Selector to find close button |
| closeLabel | String |
Close label in the template |
| classPrefix | String |
Prefix for the css classes in the template |
| buttonClass | String |
Base class for buttons |
| iconTransformer | function |
Icon transformer function |
| template | function |
Generator function |
Demo
Check out demo.html or a simple code pen below
https://codepen.io/lekoalabe/pen/NWoXRaV
Browser supports
Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.