Package Exports

@dataunion/react-annotate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dataunion/react-annotate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Image Annotate

The best image/video annotation tool ever. Check out the demo here. Or the code sandbox here.

Features

Simple input/output format
Bounding Box, Point and Polygon Annotation
Zooming, Scaling, Panning
Multiple Images
Cursor Crosshair

Screenshot of Annotator

Usage

npm install react-image-annotate

import React from "react";
import ReactImageAnnotate from "react-image-annotate";

const App = () => (
  <ReactImageAnnotate
    labelImages
    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
    regionTagList={["tag1", "tag2", "tag3"]}
    images={[
      {
        src: "https://placekitten.com/408/287",
        name: "Image 1",
        regions: []
      }
    ]}
  />
);

export default App;

To get the proper fonts, make sure to import the Inter UI or Roboto font, the following line added to a css file should suffice.

@import url("https://rsms.me/inter/inter.css");

Props

All of the following properties can be defined on the Annotator...

Prop	Type (* = required)	Description	Default
`taskDescription`	*`string`	Markdown description for what to do in the image.
`allowedArea`	`{ x: number, y: number, w: number, h: number }`	Area that is available for annotation.	Entire image.
`regionTagList`	`Array<string>`	Allowed "tags" (mutually inclusive classifications) for regions.
`regionClsList`	`Array<string>`	Allowed "classes" (mutually exclusive classifications) for regions.
`imageTagList`	`Array<string>`	Allowed tags for entire image.
`imageClsList`	`Array<string>`	Allowed classes for entire image.
`enabledTools`	`Array<string>`	Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon"	Everything.
`showTags`	`boolean`	Show tags and allow tags on regions.	`true`
`selectedImage`	`string`	URL of initially selected image.
`images`	`Array<Image>`	Array of images to load into annotator
`showPointDistances`	`boolean`	Show distances between points.	`false`
`pointDistancePrecision`	`number`	Precision on displayed points (e.g. 3 => 0.123)
`onExit`	`MainLayoutState => any`	Called when "Save" is called.
`RegionEditLabel`	`Node`	React Node overriding the form to update the region (see `RegionLabel`)
`allowComments`	`boolean`	Show a textarea to add comments on each annotation.	`false`

Developers

Development

This project uses react-storybook. To begin developing run the following commands in the cloned repo.

yarn install
yarn storybook

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

Icons

Consult these icon repositories:

@dataunion/react-annotate