Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Annotation
✓ import Annotation from 'react-image-annotation'
✗ import { Annotation } from 'react-image-annotation'
Default export only; named import will be undefined.
default import
✓ import Annotation from 'react-image-annotation'
✗ const Annotation = require('react-image-annotation')
ESM import is correct; CommonJS require breaks default import pattern in bundlers.
RectangleSelector
✓ import { RectangleSelector } from 'react-image-annotation/selectors'
✗ import { RectangleSelector } from 'react-image-annotation'
Selectors are exported from subpath; not directly from main entry.
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;
Errors
Common errors & fixes
Module not found: Can't resolve 'react-image-annotation/selectors'
Typo or wrong import path for selectors.
fixEnsure import path is exactly 'react-image-annotation/selectors'.
TypeError: Cannot read property 'type' of undefined
Missing geometry.type in annotation object.
fixEnsure annotation geometry has a type field (e.g., 'RECTANGLE').
Warning: React does not recognize the `allowTouch` prop on a DOM element
allowTouch prop is passed to underlying DOM element instead of being consumed.
fixUpgrade to latest version or avoid using allowTouch; it may be fixed in newer releases.
Audit
Dependencies
prop-typesrequiredrequired peer dependency for runtime type checking
reactrequiredpeer dependency; requires React >=16.3
react-domrequiredpeer dependency; requires react-dom >=0.14