Naked Panda Meditations

    react-picture-show

    1.4.0 • Public • Published

    React Picture Show Build Status NPM version

    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

    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

    Install

    npm i react-picture-show

    DownloadsWeekly Downloads

    8

    Version

    1.4.0

    License

    MIT

    Last publish

    Collaborators

    • adamrights
    • ddrinf
    • nemtsov
    • skiano