Zenn
💁

React でプレゼン用スライドボードができる npm package 作りました 🎉

2021/10/12に公開
React
TypeScript
tech

10/15 追記

React speaker Board v0.2.3 に合わせて、修正しました!

はじめに

ども!先日、React でプレゼン用スライドボードが作成できる React Speacker Board をリリースしました。

https://github.com/bebeji-nappa/react-speaker-board

使い方

まずは、React 環境を構築します

$ npx create-react-app my-app
$ cd my-app

次に、React Speaker Board をインストールします

$ npm install react-speaker-board

slide.jsx を作成後、下記コードをコピペします

slide.jsx
import React from 'react'
import { Title, Text, Content, Spacer, Layout, Theme } from 'react-speaker-board'

const Subject = () => {
  return (
    <Theme themeColor="sky" textColor="white">
      <Layout layout="subject">
        <Title textAlign="center">React Speaker Board</Title>
        <Spacer />
        <Content align="center">
          <Text textAlign="center">
	    Easily create presentation board using React.
	  </Text>
        </Content>
      </Layout>
    </Theme>
  )
}

const Concept = () => {
  return (
    <Theme themeColor="sky" textColor="white">
      <Layout layout="section">
        <Spacer />
        <Spacer />
        <Title textAlign="center">
          Concept
        </Title>
        <Spacer />
        <Spacer />
        <Content align="center">
          <Content align="left" size="xlarge">
            <li>Easy to make</li>
            <li>Easy to customize</li>
            <li>Abundant theme colors</li>
          </Content>
        </Content>
      </Layout>
    </Theme>
  )
}

const Documentation = () => {
  return (
    <Theme themeColor="sky" textColor="white">
      <Layout layout="subject">
        <Title textAlign="center">
          Let's use React Speaker Board!
        </Title>
      </Layout>
    </Theme>
  )
}

export const Slide = [
  Subject,
  Concept,
  Documentation,
]

最後に、先程作った slide.jsx を index.jsx に読み込みます。

index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { ReactSpeakerBoard } from 'react-speaker-board'
import 'react-speaker-board/styles/style.css'
import { Slide } from './slide'

ReactDOM.render(
  <ReactSpeakerBoard slide={Slide} mode="slide" />,
  document.getElementById('root')
);

解説

React Speaker Board は、簡単に作成できるように、いくつかのコンポーネントを用意しています。
Props の値を変更することで、文字の色や大きさ、配置を変えることが出来ます。
基本的には、Theme Layout の直下は自由にコンポーネントやHTMLを置くことができます。

const Subject = () => {
  return (
    <Theme themeColor="sky" textColor="white">
      <Layout layout="subject">
        {/* ここは、自由にHTMLやコンポーネントをおいちゃって良い */}
      </Layout>
    </Theme>
  )
}

そして、 ReactSpeakerBoard というコンポーネントでスライドを表示します。

import React from 'react'
import ReactDOM from 'react-dom'
import { ReactSpeakerBoard } from 'react-speaker-board'
import 'react-speaker-board/styles/style.css'

ReactDOM.render(
  <ReactSpeakerBoard slide={Slide} mode="slide" />,
  document.getElementById('root')
);

通常は全画面表示ですが、Props.mode の値を inlineSlide にすることで、ページに埋め込んで表示することが出来ます。

最後に

ドキュメント作ったので、より詳しく知りたい方は見てください!
https://react-speaker-board-website.vercel.app/docs/ja/introduction

余談ですが、このドキュメントは自分が作った Richmd で作ってます!
https://github.com/bebeji-nappa/richmd

Discussion