{"id":28131,"library":"react-image-annotation","title":"react-image-annotation","description":"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.","status":"maintenance","version":"0.9.10","language":"javascript","source_language":"en","source_url":"https://github.com/Secretmapper/react-image-annotation","tags":["javascript","react-component"],"install":[{"cmd":"npm install react-image-annotation","lang":"bash","label":"npm"},{"cmd":"yarn add react-image-annotation","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-image-annotation","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required peer dependency for runtime type checking","package":"prop-types","optional":false},{"reason":"peer dependency; requires React >=16.3","package":"react","optional":false},{"reason":"peer dependency; requires react-dom >=0.14","package":"react-dom","optional":false}],"imports":[{"note":"Default export only; named import will be undefined.","wrong":"import { Annotation } from 'react-image-annotation'","symbol":"Annotation","correct":"import Annotation from 'react-image-annotation'"},{"note":"ESM import is correct; CommonJS require breaks default import pattern in bundlers.","wrong":"const Annotation = require('react-image-annotation')","symbol":"default import","correct":"import Annotation from 'react-image-annotation'"},{"note":"Selectors are exported from subpath; not directly from main entry.","wrong":"import { RectangleSelector } from 'react-image-annotation'","symbol":"RectangleSelector","correct":"import { RectangleSelector } from 'react-image-annotation/selectors'"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport Annotation from 'react-image-annotation';\nimport { RectangleSelector } from 'react-image-annotation/selectors';\n\nclass Simple extends Component {\n  state = {\n    annotations: [],\n    annotation: {}\n  };\n\n  onChange = (annotation) => {\n    this.setState({ annotation });\n  };\n\n  onSubmit = (annotation) => {\n    const { geometry, data } = annotation;\n    this.setState({\n      annotation: {},\n      annotations: this.state.annotations.concat({\n        geometry,\n        data: { ...data, id: Math.random() }\n      })\n    });\n  };\n\n  render() {\n    return (\n      <div>\n        <Annotation\n          src='https://example.com/image.jpg'\n          alt='example'\n          annotations={this.state.annotations}\n          type={this.state.type || 'RECTANGLE'}\n          value={this.state.annotation}\n          onChange={this.onChange}\n          onSubmit={this.onSubmit}\n          selectors={[RectangleSelector]}\n        />\n      </div>\n    );\n  }\n}\n\nexport default Simple;","lang":"typescript","description":"Basic usage of Annotation component with state management for annotations."},"warnings":[{"fix":"Consider migrating to actively maintained alternative like 'react-image-annotate'.","message":"Package has not been updated since 2019 and may contain unpatched vulnerabilities.","severity":"deprecated","affected_versions":"all"},{"fix":"Upgrade React to >=16.3 or use an older version of the library (<0.9.0).","message":"React 16.3+ required; will not work with React <16.3.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Use import { RectangleSelector } from 'react-image-annotation/selectors'.","message":"Selectors must be imported from 'react-image-annotation/selectors' subpath, not from main entry.","severity":"gotcha","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Ensure import path is exactly 'react-image-annotation/selectors'.","cause":"Typo or wrong import path for selectors.","error":"Module not found: Can't resolve 'react-image-annotation/selectors'"},{"fix":"Ensure annotation geometry has a type field (e.g., 'RECTANGLE').","cause":"Missing geometry.type in annotation object.","error":"TypeError: Cannot read property 'type' of undefined"},{"fix":"Upgrade to latest version or avoid using allowTouch; it may be fixed in newer releases.","cause":"allowTouch prop is passed to underlying DOM element instead of being consumed.","error":"Warning: React does not recognize the `allowTouch` prop on a DOM element"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}