react-image-annotate-switchon1

React Image Annotate (SwitchOn Fork)

A powerful image/video annotation tool for React. Forked from UniversalDataTool/react-image-annotate with additional features and security fixes.

Features

• Simple input/output format
• Bounding Box, Point and Polygon Annotation
• Zooming, Scaling, Panning
• Multiple Images
• Cursor Crosshair
• Classification sidebar with hotkeys
• Configurable overlapping boundary for regions

Installation

npm install react-image-annotate-switchon1

Usage

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

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:

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

Props

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 region edit form
allowComments	boolean	Show a textarea to add comments on each annotation.	false
hidePrev	boolean	Hide Previous Image button from the header bar.	false
hideNext	boolean	Hide Next Image button from the header bar.	false
hideClone	boolean	Hide Clone button from the header bar.	false
hideSettings	boolean	Hide Settings button from the header bar.	false
hideFullScreen	boolean	Hide FullScreen/Window button from the header bar.	false
hideSave	boolean	Hide Save button from the header bar.	false

Development

Prerequisites

• Node.js >= 16
• npm >= 8

Setup

git clone https://github.com/switchontech/react-image-annotate-switchon.git
cd react-image-annotate-switchon
npm install --legacy-peer-deps

Scripts

Command	Description
npm start	Start the development server
npm run build	Build the library for publishing
npm run storybook	Launch Storybook for component dev
npm run prettier	Format source files with Prettier
npm run dist	Build and publish to npm

Branch Strategy

• master — stable release branch
• develop — active development branch

Icons

Consult these icon repositories:

• Material Icons
• Font Awesome Icons

License

ISC