# react-image-annotate > [![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate) Latest version **1.8.0** (published 2021-02-12) · 0 weekly downloads ## Install ```sh npm install react-image-annotate pnpm add react-image-annotate yarn add react-image-annotate bun add react-image-annotate ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.8.0 | | Published | 2021-02-12 | | First published | 2019-03-13 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 31 | | Unpacked size | 230.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | seveibar, mrdadah | ## Links - npm: https://www.npmjs.com/package/react-image-annotate - Repository: https://github.com/UniversalDataTool/react-image-annotate - Homepage: http:///react-image-annotate - Issues: https://github.com/UniversalDataTool/react-image-annotate/issues - npm.io page: https://npm.io/package/react-image-annotate ## Dependencies (31) - [clamp](https://npm.io/package/clamp.md) ^1.0.1 - [moment](https://npm.io/package/moment.md) ^2.23.0 - [autoseg](https://npm.io/package/autoseg.md) ^0.0.12 - [mmgc1-cpp](https://npm.io/package/mmgc1-cpp.md) ^1.0.50 - [react-use](https://npm.io/package/react-use.md) ^13.27.0 - [storybook](https://npm.io/package/storybook.md) ^5.3.14 - [color-alpha](https://npm.io/package/color-alpha.md) ^1.0.4 - [react-select](https://npm.io/package/react-select.md) ^3.0.8 - [use-key-hook](https://npm.io/package/use-key-hook.md) ^1.3.0 - [react-hotkeys](https://npm.io/package/react-hotkeys.md) ^2.0.0 - [shallow-equal](https://npm.io/package/shallow-equal.md) ^1.2.1 - [get-image-data](https://npm.io/package/get-image-data.md) ^3.0.1 - [react-markdown](https://npm.io/package/react-markdown.md) ^4.0.6 - [material-survey](https://npm.io/package/material-survey.md) ^1.0.34 - [react-json-view](https://npm.io/package/react-json-view.md) ^1.19.1 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.6.0 - [react-full-screen](https://npm.io/package/react-full-screen.md) ^0.3.1 - [react-use-measure](https://npm.io/package/react-use-measure.md) ^2.0.0 - [styled-components](https://npm.io/package/styled-components.md) ^5.2.1 - [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1 - [seamless-immutable](https://npm.io/package/seamless-immutable.md) ^7.1.4 - [use-event-callback](https://npm.io/package/use-event-callback.md) ^0.1.0 - [react-monaco-editor](https://npm.io/package/react-monaco-editor.md) ^0.25.1 - [react-remove-scroll](https://npm.io/package/react-remove-scroll.md) ^2.0.4 - [@semantic-release/git](https://npm.io/package/@semantic-release/git.md) ^9.0.0 - [react-syntax-highlighter](https://npm.io/package/react-syntax-highlighter.md) ^12.2.1 - [transformation-matrix-js](https://npm.io/package/transformation-matrix-js.md) ^2.7.6 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.3 - [react-material-workspace-layout](https://npm.io/package/react-material-workspace-layout.md) ^1.0.9 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.12 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.6.3 ## Recent versions - 1.8.0 (latest) — 2021-02-12 - 1.7.12 — 2021-01-18 - 1.7.11 — 2020-12-19 - 1.7.10 — 2020-12-14 - 1.7.9 — 2020-12-14 - 1.7.8 — 2020-12-13 - 1.7.7 — 2020-12-10 - 1.7.6 — 2020-11-28 - 1.7.5 — 2020-11-23 - 1.7.4 — 2020-10-20 - 1.7.3 — 2020-10-07 - 1.7.2 — 2020-10-04 - 1.7.1 — 2020-09-19 - 1.7.0 — 2020-09-15 - 1.6.2 — 2020-08-21 - … 73 more at https://npm.io/package/react-image-annotate/versions ## README # React Image Annotate [![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate) The best image/video annotation tool ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403). ## Sponsors [![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai) ## Features - Simple input/output format - Bounding Box, Point and Polygon Annotation - Zooming, Scaling, Panning - Multiple Images - Cursor Crosshair ![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png) ## Usage `npm install react-image-annotate` ```javascript 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. ```css @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` | 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`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js)) | | ## Developers ### Development This project uses [react-storybook](https://storybook.js.org/). 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](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development). ### Icons Consult these icon repositories: - [Material Icons](https://material.io/tools/icons/) - [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free) --- _Source: https://npm.io/package/react-image-annotate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._