pop-notify

v1.2.1

Published

2 months ago

A modern custom element to create toast notifications

Downloads

232

0High
0Medium
0Low

lekoala

DOM pop notify toast popover notification bootstrap bootstrap5 bootstrap 5 es6

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");

<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.

Toast dark

Toast light

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.