A reimplementation of react-region-select by David Langer of casavi.de, updated to use modern React and TypeScript.

import RegionSelect from "react-region-select-2";

<RegionSelect maxRegions={5} regions={this.state.regions} onChange={this.onChange} regionRenderer={this.regionRenderer}>
    <img src="/static/example-doc.jpg" width="700px" />
</RegionSelect>

This is "dumb component", meaning it will not track it's internal state (the regions). The parent component needs to do that. This means implementing onChange and managing the regions (see example).

Place an image or anything else as children to draw rectangular regions above it. It supports rendering custom componentes per region (see regionRenderer).

Homepage: connordoman.dev Author: Connor Doman

Array of regions. Regions are objects with the following properties:

interface RegionInfo {
    pos: ClientPosition;
    dim: ClientDimension;
    data: RegionData;
}

interface ClientPosition {
    x: number;
    y: number;
}

interface ClientDimension {
    width: number;
    height: number;
}

type RegionData = Record<string, any>;

Callback used when the regions change (moving, resizing, dragging to create new one)

Place objects inside the component and the regions will appear above them.

Maximum number of allowed regions. If exceeded the last one will be replaced when dragging the canvas.

Default: 5

Optional function to render arbitrary components in a region. Can be used by the parent component to manipulate custom RegionInfo.data.

e.g. you can use data.isChanging to hide complex UI while the user is changing the region.

Display a table with information about each region. Useful for debugging.

Use for styling the outer layer i.e. <RegionSelect />

Use for styling the outer layer i.e. <RegionSelect />

See src/example/Demo.tsx

Run the Webpack development server using npm run dev and open http://localhost:3000/ in your browser.

• For development: React Hot Boilerplate / Playground
• Inspiration for region selection: React Image Crop