https://github.com/shisama/react-slideshow-ui

React Slideshow to show images like slideshare and speakerdeck.
https://github.com/shisama/react-slideshow-ui

javascript presentation react slide slideshare slideshow speakerdeck

Last synced: 8 days ago
JSON representation

React Slideshow to show images like slideshare and speakerdeck.

• Host: GitHub
• URL: https://github.com/shisama/react-slideshow-ui
• Owner: shisama
• License: mit
• Created: 2017-05-25T15:43:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-15T23:24:20.000Z (8 months ago)
• Last Synced: 2024-04-14T08:35:05.090Z (7 months ago)
• Topics: javascript, presentation, react, slide, slideshare, slideshow, speakerdeck
• Language: TypeScript
• Size: 3 MB
• Stars: 6
• Watchers: 3
• Forks: 5
• Open Issues: 58
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React SlideShow UI

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shisama/react-slideshow/blob/master/LICENSE)

[![Join the chat at https://gitter.im/shisama/react-slideshow-ui](https://badges.gitter.im/shisama/react-slideshow-ui.svg)](https://gitter.im/shisama/react-slideshow-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)





[![npm](https://img.shields.io/npm/dt/react-slideshow-ui.svg)](https://www.npmjs.com/package/react-slideshow-ui)

[![Build Status](https://travis-ci.org/shisama/react-slideshow-ui.svg?branch=master)](https://travis-ci.org/shisama/react-slideshow-ui)

React UI Component for slideshow like [SlideShare](https://www.slideshare.net/) or [SpeakerDeck](https://speakerdeck.com/).

[![NPM](https://nodei.co/npm/react-slideshow-ui.png?downloads=true&stars=true)](https://nodei.co/npm/react-slideshow-ui/) 

![React SlideShow](https://github.com/shisama/react-slideshow-ui/raw/master/screenshot.png) 

## [Demo](https://shisama.github.io/react-slideshow-ui/demo/)(Updated with every release)

## Installation

```

npm install --save react-slideshow-ui

```

## Usage

```javascript

import React from 'react';

import {render} from 'react-dom';

import SlideShow from 'react-slideshow-ui';

class App extends React.Component {

  render() {

    return (

      


         {

            console.log(`Page Update! index: ${index}, image: ${image}`);

          }}

        />

      

    );

  }

}


render(, document.getElementById('slideshow'));

```

## Props

|name|type|reqired|description|

|----|----|-------|-----------|

|style|Object|Yes|style of this component. This object is immutable.|

|images|Array\|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](https://github.com/shisama/react-slideshow/blob/master/LICENSE)

  {rootdir:/demo/index.tsx}