Skip to content

React Slideshow to show images like slideshare and speakerdeck.

License

Notifications You must be signed in to change notification settings

shisama/react-slideshow-ui

Repository files navigation

React SlideShow UI

GitHub license Join the chat at https://gitter.im/shisama/react-slideshow-ui Dependency Status devDependency Status npm Build Status

React UI Component for slideshow like SlideShare or SpeakerDeck.

NPM

React SlideShow

Demo(Updated with every release)

Installation

npm install --save react-slideshow-ui

Usage

import React from 'react';
import {render} from 'react-dom';
import SlideShow from 'react-slideshow-ui';

class App extends React.Component {
  render() {
    return (
      <div>
        <SlideShow
          style={{width: 400}}
          images={[
            './img/example1.png',
            './img/example2.png',
            './img/example3.png',
          ]}
          withTimestamp={true}
          pageWillUpdate={(index, image) => {
            console.log(`Page Update! index: ${index}, image: ${image}`);
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('slideshow'));

Props

name type reqired description
style Object Yes style of this component. This object is immutable.
images Array<string> Yes url strings of images for slide.
prevIcon Dom No icon for button to move previous page.
nextIcon Dom No icon for button to move next page.
withTimestamp boolean No set true if you want to add timestamp to img url. i.e. example.png?1483228800
pageWillUpdate function No function that is invoked when the page is turned over.
showFullscreenIcon boolean No is icon to toggle fullscreen shown? default:true
className string No className of this component. default:slideshow

Browser Support

Chrome@latest Firefox@latest Safari@latest IE11

License

This project is licensed under the terms of the MIT license

{rootdir:/demo/index.tsx}