# react-bigpicture

> Parse html in your React App from any URL

Latest version **1.0.26** (published 2019-08-20) · 0 weekly downloads

## Install

```sh
npm install react-bigpicture
pnpm add react-bigpicture
yarn add react-bigpicture
bun add react-bigpicture
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.26 |
| Published | 2019-08-20 |
| First published | 2017-04-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 84 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Orkhan Jafarov |
| Maintainers | gigantz |
| Keywords | parser, react |

## Links

- npm: https://www.npmjs.com/package/react-bigpicture
- Repository: https://github.com/gigantz/react-bigpicture
- Homepage: https://github.com/gigantz/react-bigpicture#readme
- Issues: https://github.com/gigantz/react-bigpicture/issues
- npm.io page: https://npm.io/package/react-bigpicture

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [bigpicture](https://npm.io/package/bigpicture.md) ^2.1.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.26 (latest) — 2019-08-20
- 1.0.25 — 2019-08-20
- 1.0.24 — 2019-07-19
- 1.0.23 — 2019-07-19
- 1.0.22 — 2019-07-19
- 1.0.21 — 2019-07-19
- 1.0.20 — 2019-07-19
- 1.0.19 — 2019-02-07
- 1.0.18 — 2018-11-10
- 1.0.17 — 2018-11-10
- 1.0.16 — 2018-11-10
- 1.0.15 — 2018-11-10
- 1.0.14 — 2018-11-10
- 1.0.13 — 2018-11-10
- 1.0.12 — 2018-11-10
- … 12 more at https://npm.io/package/react-bigpicture/versions

## README

# react-bigpicture
React Lightbox Component based on BigPicture.js / Video and Image
<a href="https://codesandbox.io/s/m57mw5v7vp">Demo - CodeSandbox</a>


```
npm install react-bigpicture --save
```
OR

```
yarn add react-bigpicture
```

### Props
```javascript
<BigPicture
  src={'http://lorempixel.com/800/600/sports/1'}
  caption="Sport picture"
  type="image" // "video", "youtube", "vimeo", "iframe", "audio"
  noLoader
>
    <img src="http://lorempixel.com/400/200/sports/1" />
</BigPicture>
```
### Use Callbacks
```javascript
<BigPicture
  src={'http://lorempixel.com/800/600/sports/1'}
  caption="Sport picture"
  type="image" // "video", "youtube", "vimeo", "iframe", "audio"
  noLoader
  animationStart={callbackFn}
  animationEnd={callbackFn}
  onClose={callbackFn}
  onError={callbackFn}
  onChangeImage={callbackFn}
>
    <img src="http://lorempixel.com/400/200/sports/1" />
</BigPicture>
```


## Example
```javascript
import React from 'react';
import { render } from 'react-dom';
import BigPicture from "react-bigpicture";

render(
    <div>
        <BigPicture
            type="image"
            caption="Example of an optional caption."
            src="http://lorempixel.com/1200/700/sports/1"
        >
            <img src="http://lorempixel.com/400/200/sports/1" />
        </BigPicture>

        <BigPicture
            type="video"
            src="http://www.html5videoplayer.net/videos/toystory.mp4"
        >
            <img src="http://lorempixel.com/400/200/sports/2" />
        </BigPicture>

        <BigPicture
            type="youtube"
            src="https://www.youtube.com/watch?v=TTAU7lLDZYU"
        >
            <img src="http://lorempixel.com/400/200/sports/3" />
        </BigPicture>

        <BigPicture type="vimeo" src="https://vimeo.com/119287310">
            <img src="http://lorempixel.com/400/200/sports/5" />
        </BigPicture>
    </div>,
  document.querySelector('#root')
);
```

![horizontal with codes](https://camo.githubusercontent.com/d58922db18736731a116bc06b445cd203d1e7ad5/687474703a2f2f692e696d6775722e636f6d2f375436646e4e332e676966)

BigPicture by @henrygd https://github.com/henrygd/bigpicture

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