react-picture-show
react-picture-show copied to clipboard
dowjones
Slideshow Component
This project is not actively maintained, and as a result it uses deprecated react apis
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
installation
node
npm install react-picture-show
Usage
Basic
<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 | Array |
Null | Shape of the slideshow, for example: [16,9] |
yes |
| animationSpeed | Number |
1500 | Speed of slide transitions in px/s | yes |
| startingSlide | Number |
0 | Initial slide view | yes |
| onClickSlide | Function |
null | override click handler for slide | yes |
| onBeforeTransition | Function |
noop | Function called before transition starts | yes |
| onAfterTransition | Function |
noop | Function called after transition ends | no |
| slideBuffer | Number |
1 | The number of slides loaded to the left and right of the slide in view | yes |
| clickDivide | Number |
0.45 | The division between previous and next when clicking the slideshow | yes |
| infinite | Boolean |
true | Is the Slideshow continuous | no |
| 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:
{
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
dowjones