スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。 今回紹介するReact SlideShow UIは画像をスライド風に切り替えて表示できるビューワーです。

React SlideShow UIの使い方

Reactコンポーネントの記述法です。imagesで複数の画像を指定できます。

<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}`);
  }}
/>

表示例です。

クリックでスライドを切り替えます。

React SlideShow UIはフルスクリーン表示もあり、まさにSlideshareやSpeakerdeck風の表示が実現できます。画像さえあればできるので、プレゼンテーションの資料に限らず使いどころがありそうです。

React SlideShow UIはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

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