# reactbox

> Powerful React.js-based lightbox

Latest version **0.5.4** (published 2019-01-23) · 0 weekly downloads

## Install

```sh
npm install reactbox
pnpm add reactbox
yarn add reactbox
bun add reactbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.4 |
| Published | 2019-01-23 |
| First published | 2017-01-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 135.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nikolay Karev |
| Maintainers | karevn |

## Links

- npm: https://www.npmjs.com/package/reactbox
- Repository: https://github.com/karevn/reactbox
- Homepage: https://github.com/karevn/reactbox#readme
- Issues: https://github.com/karevn/reactbox/issues
- npm.io page: https://npm.io/package/reactbox

## Dependencies (6)

- [asap](https://npm.io/package/asap.md) ^2.0.5
- [atomicjs](https://npm.io/package/atomicjs.md) ^1.1.0
- [dot-prop](https://npm.io/package/dot-prop.md) ^4.1.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^8.2.3
- [uppercamelcase](https://npm.io/package/uppercamelcase.md) ^1.1.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.8.2

## Recent versions

- 0.5.4 (latest) — 2019-01-23
- 0.5.3 — 2018-12-10
- 0.5.2 — 2018-12-10
- 0.5.1 — 2018-04-12
- 0.5.0 — 2018-03-21
- 0.4.9 — 2018-03-06
- 0.4.8 — 2018-03-06
- 0.4.7 — 2018-03-06
- 0.4.6 — 2018-03-06
- 0.4.5 — 2018-03-06
- 0.4.4 — 2018-03-06
- 0.4.3 — 2018-03-05
- 0.4.2 — 2018-03-05
- 0.4.1 — 2018-03-05
- 0.4.0 — 2018-03-05
- … 28 more at https://npm.io/package/reactbox/versions

## README

# Reactbox - React.js lightbox

Every ecosystem needs its own lightbox, right? So does React.js.

## Main features:
* Nice minimal UI.
* Based on React.js and Flux idioms.
* Can be used in a non-react environment.
* Lots of item types.
* 3 item layout supported (see [demo](http://reactbox.karevn.com/demo)).
* No dependencies.
* Clean API - provides a simple one-function API, plus a React component.
* Responsive and mobile friendly.
* Supports swiping.
* Sharing features.
* Deeplinking support.
* Supports carousel mode.

## Supported item types
* Images.
* Youtube or Vimeo videos.
* Iframe content.
* AJAX content.
* HTML content.

All these item types come with a number of lightbox layout options.

## Installation
You can install Reactbox from npm with one command:

```
npm install --save reactbox
```

or

```
yarn add reactbox
```

## Usage

```js
import reactbox from 'reactbox'

reactbox(items)
```
This will open Reactbox in your application, passing it `items` as an option.

## Options available

### carousel
Default: `true`

If the thumbnail carousel below the mainbox will be displayed. Carousel is only displayed on if the screen is 768+ px wide.


Example:

```js
reactbox({
  items: [...],
  carousel: false
})
```
### share

Defines the list of the sharing services displayed.

Default:
```js
{
  facebook: {
    url: "//www.facebook.com/share.php?v=4&src=bm&u=%url%",
    name: 'Facebook'
  },
  twitter: {
    url: "//twitter.com/home?status=%url%"
    name: 'Twitter'
  },
  googleplus: {
    url: "//plus.google.com/share?url=%url%",
    name: 'Google Plus'
  },
  reddit: {
    url: "//reddit.com/submit?url=%url%",
    name: 'Reddit'
  },
  digg: {
    url: "//digg.com/submit?phase=2&url=%url%",
    name: 'Digg'
  }
  stumbleupon: {
    url: "http://www.stumbleupon.com/submit?url=%url%&title=%title%",
    name: "Stumbleupon"
  }
  delicious: {
    url: "//delicious.com/post?url=%url%",
    name: 'Delicious'
  }
  pinterest: {
    url: "https://www.pinterest.com/pin/create/button/?url=%url%&media=%image_url%&description=%description%&title=%title%",
    name: 'Pinterest'
  }
  vk: {
    url: "http://vk.com/share.php?url=%url%",
    name: 'VK'
  }
```

Example:
```js
// Will only show Facebook for sharing
reactbox({
  items: [...],
  share: {
    facebook: {
      url: "//www.facebook.com/share.php?v=4&src=bm&u=%url%",
      name: 'Facebook'
    }
  }
})
```

### theme

Color theme used. Valid values are `null`, `"black"` or `"white"`.

Default: `"black"`

### items

An array of the items you want to show in a lightbox. See below for the docs on the item description format.

Default: `null`

Example:
```js
reactbox({
  items: [{url: 'http:/example.com/img/image.jpg'}]
})
```

#### Item properties:
##### url
  default: `null`

  The URL of the object (image, video, ajax request, iframe).
##### type
  default: `image`

  The type of the item. Valid types are:
  * `image`
  * `video`
  * `ajax`
  * `html`
  * `iframe`

##### thumbnail
  default: `null`

  Thumbnail URL for the carousel. When no thumbnail is provided - the item does
  not show in a carousel  (but is still shown in a lightbox).

##### description
  default: `null`

Item description object:
```js
{
  style: 'none', // one of the 'none', 'mini', 'right', 'bottom'
  title: 'some title', // description title
  text: 'Some text' // description text
}
```
##### download
  default: `null`

  Item download URL. Enables the download link at the top of the lightbox window.

##### alt
  default: `null`

  Item alt description to be added as alt tag to the thumbnails and main lightbox
  image.

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