# react-picture-show

> Slideshow Component for React.js

Latest version **1.4.0** (published 2015-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-picture-show
pnpm add react-picture-show
yarn add react-picture-show
bun add react-picture-show
```

## 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.4.0 |
| Published | 2015-09-01 |
| First published | 2015-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | gregoryskiano@gmail.com |
| Maintainers | adamrights, nemtsov, skiano |
| Keywords | react-component, slideshow, carousel |

## Links

- npm: https://www.npmjs.com/package/react-picture-show
- Repository: https://github.com/areusjs/react-picture-show
- Issues: https://github.com/areusjs/react-picture-show/issues
- npm.io page: https://npm.io/package/react-picture-show

## Dependencies (3)

- [react](https://npm.io/package/react.md) >=0.11.2 <1.0.0
- [lodash](https://npm.io/package/lodash.md) ^3.3.1
- [react-swipeable](https://npm.io/package/react-swipeable.md) ^2.0.0

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.4.0 (latest) — 2015-09-01
- 1.3.1 — 2015-08-20
- 1.3.0 — 2015-08-11
- 1.2.0 — 2015-05-05
- 1.1.0 — 2015-03-04
- 1.0.1 — 2015-03-02

## README

# React Picture Show [![Build Status](https://secure.travis-ci.org/dowjones/react-picture-show.png)](http://travis-ci.org/dowjones/react-picture-show) [![NPM version](https://badge.fury.io/js/react-picture-show.svg)](http://badge.fury.io/js/react-picture-show)

A Bare bones slideshow component that handles transitions between slides and exposes control so that it is easy to decorate with other controls. Out of the box, it supports **swiping to paginate, clicking left and right, and lasyloading slides**

**[PictureShow Demo](http://areusjs.github.io/react-picture-show/)**

## installation

#### node

``` jsx
npm install react-picture-show
```

## Usage

#### Basic

```jsx
  
<PictureShow>
  <img src='http://...'/>
  <img src='http://...'/>
  <div>another thing</div>
  <img src='http://...'/>
  <img src='http://...'/>
</PictureShow>

```

### Component Properties Overview

Properties | Type | Default | Description | Supported 
:--------- | :--- | :------ | :---------- | :-------- 
**[ratio](#ratio)** | ```Array``` | Null | Shape of the slideshow, for example: `[16,9]` | yes 
**[animationSpeed](#animationspeed)** | ```Number``` | 1500 | Speed of slide transitions in px/s | yes
**[startingSlide](#startingslide)** | ```Number``` | 0 | Initial slide view | yes
**[onClickSlide](#onClickSlide)** | ```Function``` | null | override click handler for slide | yes
**[onBeforeTransition](#onbeforetransition)** | ```Function``` | noop | Function called before transition starts | yes
**[onAfterTransition](#onaftertransition)** | ```Function``` | noop | Function called after transition ends | no
**[slideBuffer](#slidebuffer)** | ```Number``` | 1 | The number of slides loaded to the left and right of the slide in view | yes
**[clickDivide](#clickdivide)** | ```Number``` | 0.45 | The division between previous and next when clicking the slideshow | yes 
**[infinite](#infinite)** | ```Boolean``` | true | Is the Slideshow continuous | no
**[suppressPending](#suppresspending)** | ```Boolean``` | true | Should slides outside the slideBuffer be suppressed  | no

### Public methods on mounted component

Method | Description | Supported 
:----- | :---------- | :--------
next | Go forward one slide | yes
previous | Go backward one slide | yes 
goToSlide | Go to a specific slide index | yes
disable | Deactivate slideshow | no
enable | Acticate slideshow | no

### How slides work

Slides are the direct child components of a ``<PictureShow/>``. They are cloned with the following additional properties:

```jsx
{
  slideRatio: Number, // the ratio of the outer slide (w/h)
  slidePending: Boolean // whether the slide can be lazyloaded
}
```
By cloning the children with these props, you are free to create 'slide' components that react to them however you want. If the child already has one of these props it will be replaced (even for ```<img/>``` components)

_Note: If ```suppressPending``` property is true on ```<PictureShow/>```, then the slide will not render, so you will not need to handle the ```pending``` prop at the slide level. ```suppressPending``` exists for edge cases where the user wants to define how 'not loading' works_

## Properties in Depth

#### ratio

Defines the shape of the slideshow as a fixed ratio so that it can flex inside its parent container.

#### animationSpeed

speed...

#### startingSlide

staring slide...

#### onClickSlide

function...

#### onBeforeTransition

function...

#### onAfterTransition 

function...

#### slideBuffer

lazy loading...

#### clickDivide

next and prev...

#### infinite

more stuff...

#### suppressPending

control pending....

## License

[MIT](/LICENSE)

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