Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-image-annotate with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactImageAnnotate = require("react-image-annotate")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-image-annotate v1.7.4

React Image Annotate

npm version

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

Sponsors

wao.ai sponsorship image

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...

PropType (* = required)DescriptionDefault
taskDescription*stringMarkdown 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.
regionTagListArray<string>Allowed "tags" (mutually inclusive classifications) for regions.
regionClsListArray<string>Allowed "classes" (mutually exclusive classifications) for regions.
imageTagListArray<string>Allowed tags for entire image.
imageClsListArray<string>Allowed classes for entire image.
enabledToolsArray<string>Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon"Everything.
showTagsbooleanShow tags and allow tags on regions.true
selectedImagestringURL of initially selected image.
imagesArray<Image>Array of images to load into annotator
showPointDistancesbooleanShow distances between points.false
pointDistancePrecisionnumberPrecision on displayed points (e.g. 3 => 0.123)
onExitMainLayoutState => anyCalled when "Save" is called.
RegionEditLabelNodeReact Node overriding the form to update the region (see RegionLabel)

Developers

Development

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

  1. yarn install
  2. yarn storybook

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

Icons

Consult these icon repositories:

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free