Skip to content

housinghq/react-photostory

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#react-photostory

A lightweight carousel made in React and optimized for mobile.

codecov Build Status npm GitHub license

Demo is available here. Make sure devtools is open and mobile emulation is selected as this library currently only supports touch events.

##Features

  1. lazy-loading by default
  2. AutoPlay
  3. Drag and swipe

Installation

This library works with react-lazy-card (don't worry. they are very light even when used together . react-lazy-card may serve other purposes in the app so we separated it).

npm install --save react-photostory react-lazy-card

Basic Usage

JSX:

import Swipe from 'react-photostory';
import LazyCard from 'react-lazy-card';

<Swipe className="photostory">
    <LazyCard image="a.jpg" defaultImage="default1.jpg">Text 1</LazyCard>
    <LazyCard image="b.jpg" defaultimage="default2.jpg">Text 2</LazyCard>
</Swipe>

CSS

@import "react-photostory/dist/swipe"

Options

<Swipe/> Component

prop default description
className '' Custom classname
initialIndex 0 initially visible slide index
autoPlay false whether to display slide show or not
overScan 0 Number of Slide offsets to load excluding the current slide.If its 1 it will load current, current+-1
onSwipe ({initialIndex, currentIndex}) function executed whenever the current slide changes
onClick {index} function executed when a slide is clicked
prev <button>PREV</button> React element to replace the PREV button
next <button>NEXT</button> React element to replace the NEXT button
threshold 0.5 Ratio of carousel width one should drag to make successful swipe
responsive false whether or not to listen to window resize event
renderFirst true don't lazy load the initial slide
height 300 height of the carousel

.gotoSlide(i)

To manually go to a particular slide you can use gotoSlide(i) method

const x = (
<Swipe className="photostory">
    <LazyCard image="a.jpg" defaultImage="default1.jpg">Text 1</LazyCard>
    <LazyCard image="b.jpg" defaultimage="default2.jpg">Text 2</LazyCard>
    <LazyCard image="c.jpg" defaultimage="default3.jpg">Text 2</LazyCard>
</Swipe>
)

x.gotoSlide(2) // will go to the 3rd slide

<Story/>

<Story
  height={300}
>
  {({handleClick, handleSwipe}) => {
    return (
      <Swipe
        overScan={number('overScan', 0)}
        autoPlay={boolean('autoPlay', false)}
        autoPlayInterval={number('Autoplay Interval', 4000)}
        onSwipe={handleSwipe}
        responsive={true}
        onClick={handleClick}
      >
        <LazyCard
          defaultImage={defaultImage}
          title={'Image 1'}
          subTitle={'title 1'}
          image='https://is1-2.housingcdn.com/afe3f526/1264f1fbf64cb1d23dfaa3beb33ff0ef/v2/medium.jpg'/>
        <LazyCard
          title={'Image 2'}
          subTitle={'title 2'}
          defaultImage={defaultImage}
          image='https://is1-3.housingcdn.com/afe3f526/13b186eece020d2d4ad85cea21cdb991/v4/medium.jpg'/>
        <LazyCard
          title={'Image 3'}
          subTitle={'title 3'}
          defaultImage={defaultImage}
          image='https://is1-3.housingcdn.com/afe3f526/7114b67ecce8e089fa750d76372d4636/v3/medium.jpg'/>
      </Swipe>)
  }}
</Story>

Development

git clone https://github.com/housinghq/react-photostory
cd react-photostory
npm install
npm run storybook

Make sure you develop in emulation mode (open devtools and select mobile emulation). Currently this only supports touch events.

Open an issue before opening a PR. This package is optimised for mobile so its hard to include all the features.

###License MIT @ Loconsolutions