react-image-annotation

0.9.10 verified Sat May 09 auth: no javascript maintenance

A React library for adding annotations to images. Current stable version is 0.9.10 (last updated 2019). Release cadence is low; no active development since 2020. Supports customizable selectors (rectangle, point, oval) and full rendering control via render props. Key differentiator: provides both annotation creation (geometry) and metadata storage (data) with custom component slots. Requires React 16.3+ and prop-types. Alternative for newer versions or ESM-only environments may need to consider forks.

Common errors

error Module not found: Can't resolve 'react-image-annotation/selectors' ↓

cause Typo or wrong import path for selectors.

fix

Ensure import path is exactly 'react-image-annotation/selectors'.

error TypeError: Cannot read property 'type' of undefined ↓

cause Missing geometry.type in annotation object.

fix

Ensure annotation geometry has a type field (e.g., 'RECTANGLE').

error Warning: React does not recognize the `allowTouch` prop on a DOM element ↓

cause allowTouch prop is passed to underlying DOM element instead of being consumed.

fix

Upgrade to latest version or avoid using allowTouch; it may be fixed in newer releases.

Warnings

deprecated Package has not been updated since 2019 and may contain unpatched vulnerabilities. ↓

fix Consider migrating to actively maintained alternative like 'react-image-annotate'.

breaking React 16.3+ required; will not work with React <16.3. ↓

fix Upgrade React to >=16.3 or use an older version of the library (<0.9.0).

gotcha Selectors must be imported from 'react-image-annotation/selectors' subpath, not from main entry. ↓

fix Use import { RectangleSelector } from 'react-image-annotation/selectors'.

Install

npm install react-image-annotation

yarn add react-image-annotation

pnpm add react-image-annotation

Imports

Annotation

wrong

import { Annotation } from 'react-image-annotation'

correct

import Annotation from 'react-image-annotation'

Default export only; named import will be undefined.

default import
wrong
```
const Annotation = require('react-image-annotation')
```
correct
```
import Annotation from 'react-image-annotation'
```
ESM import is correct; CommonJS require breaks default import pattern in bundlers.

RectangleSelector

wrong

import { RectangleSelector } from 'react-image-annotation'

correct

import { RectangleSelector } from 'react-image-annotation/selectors'

Selectors are exported from subpath; not directly from main entry.

Quickstart

Basic usage of Annotation component with state management for annotations.

import React, { Component } from 'react';
import Annotation from 'react-image-annotation';
import { RectangleSelector } from 'react-image-annotation/selectors';

class Simple extends Component {
  state = {
    annotations: [],
    annotation: {}
  };

  onChange = (annotation) => {
    this.setState({ annotation });
  };

  onSubmit = (annotation) => {
    const { geometry, data } = annotation;
    this.setState({
      annotation: {},
      annotations: this.state.annotations.concat({
        geometry,
        data: { ...data, id: Math.random() }
      })
    });
  };

  render() {
    return (
      <div>
        <Annotation
          src='https://example.com/image.jpg'
          alt='example'
          annotations={this.state.annotations}
          type={this.state.type || 'RECTANGLE'}
          value={this.state.annotation}
          onChange={this.onChange}
          onSubmit={this.onSubmit}
          selectors={[RectangleSelector]}
        />
      </div>
    );
  }
}

export default Simple;