# lit-popup

> A modern popup module with no dependencies.

Latest version **1.8.0** (published 2022-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install lit-popup
pnpm add lit-popup
yarn add lit-popup
bun add lit-popup
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2022-09-21 |
| First published | 2019-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 35.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pavel Mazhuga |
| Maintainers | pavelmazhuga |
| Keywords | popup, vanilla js, modal, typescript |

## Links

- npm: https://www.npmjs.com/package/lit-popup
- Repository: https://github.com/pavel-mazhuga/lit-popup
- Homepage: https://github.com/pavel-mazhuga/lit-popup#readme
- Issues: https://github.com/pavel-mazhuga/lit-popup/issues
- npm.io page: https://npm.io/package/lit-popup

## Dependencies (3)

- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.18.2
- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^28.1.1
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.17.12

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.8.0 (latest) — 2022-09-21
- 1.7.0 — 2022-07-19
- 1.6.0 — 2022-06-13
- 1.5.1 — 2022-06-13
- 1.5.0 — 2022-06-13
- 1.4.1 — 2022-06-13
- 1.4.0 — 2022-06-13
- 1.3.1 — 2022-04-21
- 1.3.0 — 2021-02-16
- 1.2.1 — 2020-10-06
- 1.2.0 — 2020-10-06
- 1.1.5 — 2020-09-04
- 1.1.4 — 2020-09-04
- 1.1.3 — 2020-08-26
- 1.1.2 — 2020-07-12
- … 10 more at https://npm.io/package/lit-popup/versions

## README

# LitPopup

## A customizable lightweight popup plugin with no dependencies.

## Why?

I needed full control over popup animation and its lifecycle.

## Installation

### NPM

Install it from NPM:
`npm i lit-popup`

## Usage

Include css from **node_modules/lit-popup/dist/css/lit-popup.min.css** (or write your own)

```html
<div class="lit-popup" data-lit-popup="popup">
    <div class="lit-popup-container">
        <!-- Layout here -->
    </div>
</div>
```

```javascript
import LitPopup from 'lit-popup';

const popup = new LitPopup('name');
```

## API

### Hooks (lifecycle callbacks)

| Hook            | Parameters           | Description                                                                                                  |
| --------------- | -------------------- | ------------------------------------------------------------------------------------------------------------ |
| onOpen          | (instance: LitPopup) | Runs before opening animation                                                                                |
| onOpenComplete  | (instance: LitPopup) | Runs after opening animation                                                                                 |
| onClose         | (instance: LitPopup) | Runs before closing animation                                                                                |
| onCloseComplete | (instance: LitPopup) | Runs after closing animation                                                                                 |
| onDestroy       | (instance: LitPopup) | Runs when 'destroy' method is called                                                                         |
| openAnimation   | (instance: LitPopup) | A function describing an opening animation. **It must return a promise and resolve when animation is done**. |
| closeAnimation  | (instance: LitPopup) | A function describing a closing animation. **It must return a promise and resolve when animation is done**.  |

### Events

| Event          | Parameters | Description                              |
| -------------- | ---------- | ---------------------------------------- |
| open           | none       | Triggers before opening animation        |
| open-complete  | none       | Triggers after opening animation         |
| close          | none       | Triggers before closing animation        |
| close-complete | none       | Triggers after closing animation         |
| destroy        | none       | Triggers when 'destroy' method is called |

### Methods

| Method  | Parameters                              | Return          | Description                                                                       |
| ------- | --------------------------------------- | --------------- | --------------------------------------------------------------------------------- |
| open    | none                                    | Promise`<void>` | Opens the modal                                                                   |
| close   | none                                    | Promise`<void>` | Closes the modal                                                                  |
| destroy | none                                    | void            | Destroys the instance, disposes memory                                            |
| on      | (eventName: string, listener: Function) | void            | Adds an event listener to the popup element                                       |
| one     | (eventName: string, listener: Function) | void            | Adds an event listener to the popup element which will be executed only once      |
| off     | (eventName: string, listener: Function) | void            | Removes an event listener from the popup element which will be executed only once |
| trigger | (eventName: string)                     | void            | Triggers an event on the popup element                                            |

### Accessibility

_Work on progress_

---
_Source: https://npm.io/package/lit-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._