slides

React Slideshow to show images like slideshare and speakerdeck

Nov 05, 2018
React Slideshow to show images like slideshare and speakerdeck

React SlideShow UI

React UI Component for slideshow like SlideShare or SpeakerDeck.

View Demo Download Source

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

nametypereqireddescription
styleObjectYesstyle of this component. This object is immutable.
imagesArrayYesurl strings of images for slide.
prevIconDomNoicon for button to move previous page.
nextIconDomNoicon for button to move next page.
withTimestampbooleanNoset true if you want to add timestamp to img url. i.e. example.png?1483228800
pageWillUpdatefunctionNofunction that is invoked when the page is turned over.
showFullscreenIconbooleanNois icon to toggle fullscreen shown? default:true
classNamestringNoclassName of this component. default:slideshow

Browser Support

[email protected]
[email protected]
[email protected]
IE11

GitHub

Recommended