ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スライドを共有する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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2