react-roi

React library to draw, move and resize rectangles.

Installation

npm i react-roi

Usage

Wrap your component tree in a RoiProvider, render a RoiContainer around the target (typically an image) and put a RoiList inside the container:

import { RoiContainer, RoiList, RoiProvider, TargetImage } from 'react-roi';

export function App() {
  return (
    <RoiProvider initialConfig={{ rois: [] }}>
      <RoiContainer target={<TargetImage src="/my-image.jpg" />}>
        <RoiList />
      </RoiContainer>
    </RoiProvider>
  );
}

Any component rendered inside the RoiProvider can read and update the state with the following hooks:

• useActions: various callbacks for mutating the ROIs
• useCommittedRois: read the state of committed ROIs (updates only when an ROI is committed)
• useRoiState: read live ROI state (updates on every change) and other metadata like the selected ROI

Which component takes which option?

Each component owns one kind of concern. When looking for an option, start from what it affects:

Component	Owns
RoiProvider	Global options: initial ROIs, mode, zoom domain, commit and boundary rules
RoiContainer	The viewport and the pointer interactions on the container: panning, zooming, unselecting, drawing new ROIs
RoiList	Individual ROI styles and behaviours