next-popup v0.0.1

next-popup

Next-Popup is a lightweight and simple popup, tooltip, dropdown library, with no other dependencies, and Typescript friendly.

中文文档

Install

npm i next-popup

or

yarn add next-popup

or

pnpm add next-popup

or via CDN

<script src="https://unpkg.com/next-popup@latest/dist/popup.umd.js"></script>
<script>
  const { NextPopup } = window;
  const { PlacementType, EmitType } = NextPopup;
  // use `NextPopup.default`
  new NextPopup.default({
    // config
  });
</script>

Usage

import Popup, { PlacementType, EmitType } from 'next-popup'

const trigger = document.querySelector('.trigger'); 

const content = "Hello Next-Popup";
// or
// const content = document.createElement('div'); // You need to pop up the displayed content
// content.classList.add('content');
// content.innerHTML = "Hello Next-Popup";

const appendTo = document.querySelector('.mount-container'); // default: document.body

const popup = new Popup({
  trigger, // required
  content, // required
  appendTo,
  placement: "top", // Set the position of the popup
  emit: "hover" // Set to open the popup when the mouse hovers over the trigger
});

trigger.onclick = () => {
  popup.toggle();
  // or
  // if (popup.opened) {
  //   popup.close();
  // } else {
  //   popup.open();
  // }
}

// if you don't need it anymore
popup.destroy();

CSS Animation

The animationClass parameter allows you to add CSS animations when showing and hiding the popup.

const popup = new Popup({
  animationClass: 'fade'
});

Popup will add the following 6 classes through the animationClass.

`${animationClass}-enter-from` // Starts displaying and is removed in the next frame.
`${animationClass}-enter-active` // Added in the next frame and removed when the animation ends.
`${animationClass}-enter-to` // Added in the next frame and removed when the animation ends.
`${animationClass}-exit-from` // Starts hiding and is removed in the next frame.
`${animationClass}-exit-active` // Added in the next frame and removed when the animation ends.
`${animationClass}-exit-to` // Added in the next frame and removed when the animation ends.
`${animationClass}-${placement}` // Current popup placement

You can write CSS styles like this:

.fade-enter-from,
.fade-exit-to {
  transform: scale(.7);
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
  transition: transform .1s ease, opacity .1s ease;
}

Scroll

The closeOnScroll parameter controls whether the popup automatically closes when the trigger element is scrolled.

Hook

Popup provides rich hook functions that can execute code during various stages of the popup's lifecycle.

new Popup({
  onBeforeEnter() {
    // Executed before the CSS display animation starts.
  },
  onEntered() {
    // Executed after the CSS display animation completes.
  },
  onBeforeExit() {
    // Executed before the CSS hide animation starts.
  },
  onExited() {
    // Executed after the CSS hide animation completes.
  },
  onOpen() {
    // Executed when the popup is displayed.
  },
  onClose() {
    // Executed when the popup is closed.
  }
});

API

Config

Instance properties

Methods

open()

Open the Popup instance.

open(): void;

close()

Close the Popup instance.

close(): void;

toggle()

Toggle the Popup instance open or close.

toggle(): void;

openWithDelay()

Open the popup after config.openDelay time.

openWithDelay(): void;

closeWithDelay()

Close the popup after config.closeDelay time.

closeWithDelay(): void;

enable()

Enable.

enable(): void

disable()

Disable and close popup.

disable(): void

updateConfig()

Update config.

updateConfig(config: Partial<PopupConfig>): void;

destroy()

Destroy the Popup instance.

destroy(): void;

onScroll()

Manually trigger the onScroll event.

onScroll(): void;

update()

Manually update the position of the Popup instance.

update(): void;