React.js ライブラリ「react-simple-image-slider」を使って軽量のLightBoxを実装する

yarn global add create-react-app
npx create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
yarn add react-simple-image-slider

import React from 'react'
import SimpleImageSlider from 'react-simple-image-slider'

const images = [
    { url: "https://mebee.info/wp-content/uploads/2021/05/image-29-890x500.png" },
    { url: "https://mebee.info/wp-content/uploads/2021/04/image-182-890x500.jpg" },
    { url: "https://mebee.info/wp-content/uploads/2020/12/image-100-890x500.png" },
]

const Sample = () => {

    return (
        <div>
            <SimpleImageSlider
                width={800}
                height={500}
                images={images}
                showBullets={true}
                showNavs={true}
            />
        </div>
    );
};

export default Sample;

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "30%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

yarn start