Create image annotations. Classify, tag images with polygons, bounding boxes or points.
The best image/video annotation tool ever. Check out the demo here. Or the code sandbox here.
npm install react-image-annotate
import React from "react"; import ReactImageAnnotate from "react-image-annotate";const App = () => ( );
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");
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| Allowed "tags" (mutually inclusive classifications) for regions. | | |
regionClsList|
Array| Allowed "classes" (mutually exclusive classifications) for regions. | | |
imageTagList|
Array| Allowed tags for entire image. | | |
imageClsList|
Array| Allowed classes for entire image. | | |
enabledTools|
Array| 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| 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) | |
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.
Consult these icon repositories: