Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

pop-notify

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pop-notify

A modern custom element to create toast notifications

latest
Source
npmnpm
Version
1.2.1
Version published
Maintainers
1
Created
Source

Pop Notify

NPM Downloads

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.

Toast dark

Toast light

Config

Simply call the static configure method.

customElements.whenDefined("pop-notify").then(() => {
  customElements.get("pop-notify").configure({});
});
NameTypeDescription
placementStringWhere to position container
noTransitionBooleanDisable animation instead of relying on media queries
defaultDurationNumberDefault duration for autohide in seconds
closeSelectorStringSelector to find close button
closeLabelStringClose label in the template
classPrefixStringPrefix for the css classes in the template
buttonClassStringBase class for buttons
iconTransformerfunctionIcon transformer function
templatefunctionGenerator 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.

Keywords

DOM
pop
notify
toast
popover
notification

FAQs

Package last updated on 17 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Research

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.

By Kirill Boychenko  -  Sep 24, 2025