# nice-popup

> Customizable script for displaying images or inline content

Latest version **0.5.6** (published 2021-10-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.6 |
| Published | 2021-10-28 |
| First published | 2019-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Victor Vedenin |
| Maintainers | fallenmaster |
| Keywords | popup, lightbox, gallery |

## Links

- npm: https://www.npmjs.com/package/nice-popup
- Repository: https://github.com/ninedev-i/nice-popup
- Homepage: https://github.com/ninedev-i/nice-popup#readme
- Issues: https://github.com/ninedev-i/nice-popup/issues
- npm.io page: https://npm.io/package/nice-popup

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

- 0.5.6 (latest) — 2021-10-28
- 0.5.5 — 2021-10-28
- 0.5.4 — 2019-06-25
- 0.5.3 — 2019-06-23
- 0.5.2 — 2019-06-03
- 0.5.1 — 2019-04-27
- 0.5.0 — 2019-04-14
- 0.4.0 — 2019-04-08
- 0.3.0 — 2019-03-30
- 0.2.22 — 2019-03-30
- 0.2.21 — 2019-03-28
- 0.2.2 — 2019-03-28
- 0.2.1 — 2019-03-27
- 0.2.0 — 2019-03-27
- 0.1.1 — 2019-03-26
- … 1 more at https://npm.io/package/nice-popup/versions

## README

# Nice PopUp

Customizable script for displaying images or inline content.

**N.B. This is a beta version!**
## Install
1. Install package by command ```npm install nice-popup``` or ```yarn add nice-popup```
2. Import styles to your .css ```@import '~nice-popup/dist/app.css';```.

## Usage
```javascript
import {NicePopup} from 'nice-popup';

new NicePopup({
    showArrows: true,
    mouseAdditionalButtons: true,
    keyboard: true
});
```

## Examples
##### 1. Gallery.

Just add **data-nice="gallery"** attribute to your links.
```html
<a data-nice="gallery" href="pic1.jpg">
   <img src="pic1.jpg">
</a>
<a data-nice="gallery" href="pic2.jpg">
   <img src="pic2.jpg">
</a>
```

##### 2. Inline content.

Add **data-nice="inline"** to your link and set href attribute.
```html
<a data-nice="inline" href="#hiddenContent">Open inline content</a>
<div id="hiddenContent" style="display: none;">Hidden text</div>
```

## Options

| Props                   | Type    | Default | Description |
|:------------------------|:--------|:--------|:-----------------------|
| overlayColor            | String  |'#0f0f11'| Set overlay color |
| showArrows              | Boolean | true    | Show right and left arrow |
| arrowsPosition          | String  | 'top'   | Set arrows position: top or side |
| keyboard                | Boolean | true    | Allow to control by keyboard arrow keys and escape |
| mouseAdditionalButtons  | Boolean | true    | Allow to control by mouse additional buttons |
| draggable               | Boolean | true    | Allow to control by dragging |

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