react-photostory

#react-photostory

A lightweight carousel made in React and optimized for mobile.

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

npm install --save react-photostory

Basic Usage

JSX:

import { Slide, Swipe } from 'react-photostory';

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

CSS

@import "react-photostory/dist/swipe" // contains CSS of Slide

/*
In case you wan't to only use the Slide component
as an image lazy loading component, just import
the CSS for slide
*/
@import "react-photostory/dist/slide"

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

.gotoSlide(i)

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

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

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

<Slide/> Component

prop	default	description
className	string	custom classname for Slide component
image	string	final image to be loaded
defaultImage	string	pre-loader image to be shown
autoLoad	false	should the component automatically lazyLoad the image
attributes	{}	Additional attributes for component root
title	''	serves like alt attribute for img tag
lazyLoad	true	enable/disable lazy load

.load()

If autoload is set to false the you have to manually call .load() to load the image

// This will not load `image` automatically. Will load default1.jpg
const a = <Slide image="a.jpg" defaultImage="default1.jpg">Text 1</Slide>
a.load() // now image will be loaded

// Alternatively set `autoLoad` to true. So `a.jpg` will automatically replace
// default1.jpg when it is loaded.
<Slide image="a.jpg" defaultImage="default1.jpg" autoLoad={true}>Text 1</Slide>

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