react-image-area-select v1.0.1

react-image-area-select

React typescript lib, with ability to select area on the image and leave comments.

screencast-localhost_5173-2023.01.17-22_55_14.webm

Demo

Live Demo

Installation

# with npm
npm install react-image-area-select

# with yarn
yarn add react-image-area-select

Basic usage

import ImageSelectArea from 'react-image-area-select';

const saveDataHandler = (data: IAreaData) => {
  console.log('Area data : ', data)
}

<ImageSelectArea
  imageUrl="https://yourimageurl.jpg"
  width={ 900 }
  height={ 600 }
  borderColor={ '#0FB839' }
  borderWidth={ 3 }
  saveData={ saveDataHandler }
/>

Types

interface IAreaData {
  index: number,
  lineWidth: number,
  color: string,
  comment: string,
  coordinates: {
    width: number,
    height: number,
    x: number,
    y: number,
  },
}

Props

Styling

Styling on you. Here classes you can use for that: