{"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.","language":"javascript","status":"maintenance","last_verified":"Sat May 09","install":{"commands":["npm install react-image-annotation"],"cli":null},"imports":["import Annotation from 'react-image-annotation'","import Annotation from 'react-image-annotation'","import { RectangleSelector } from 'react-image-annotation/selectors'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}