React.js ライブラリ「react-picture-annotation」を使ってannotation(アノテーション・タグを付ける)を実装する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-picture-annotation

import React, { useState, useEffect } from 'react';
import { ReactPictureAnnotation } from "react-picture-annotation";

export const Sample = () => {
    const [pageSize, setPageSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
      });
      const onResize = () => {
        setPageSize({ width: window.innerWidth, height: window.innerHeight });
      };
    
      useEffect(() => {
        window.addEventListener("resize", onResize);
        return () => window.removeEventListener("resize", onResize);
      }, []);
    
    const onSelect = selectedId => console.log(selectedId);
    const onChange = data => console.log(data);
    return (
        <div>            
            <ReactPictureAnnotation
                image="https://cdn.pixabay.com/photo/2017/08/10/05/18/home-2618511_960_720.jpg"
                onSelect={onSelect}
                onChange={onChange}
                width={pageSize.width}
                height={pageSize.height}
            />        
        </div>
    )
}

export default Sample

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

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

export default App;

npm start