{"id":13402572,"url":"https://github.com/Secretmapper/react-image-annotation","last_synced_at":"2025-03-14T08:30:58.382Z","repository":{"id":37732924,"uuid":"121967748","full_name":"Secretmapper/react-image-annotation","owner":"Secretmapper","description":" An infinitely customizable image annotation library built on React","archived":true,"fork":false,"pushed_at":"2023-03-04T20:44:35.000Z","size":3186,"stargazers_count":318,"open_issues_count":52,"forks_count":134,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-14T06:28:15.309Z","etag":null,"topics":["annotation","annotation-tool","annotations","react"],"latest_commit_sha":null,"homepage":"https://secretmapper.github.io/react-image-annotation/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Secretmapper.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-18T16:17:01.000Z","updated_at":"2024-04-13T11:33:24.000Z","dependencies_parsed_at":"2024-01-12T23:43:06.454Z","dependency_job_id":"b4dbdacd-1230-489e-998a-6f5362716892","html_url":"https://github.com/Secretmapper/react-image-annotation","commit_stats":{"total_commits":130,"total_committers":5,"mean_commits":26.0,"dds":"0.12307692307692308","last_synced_commit":"3ddde7c7f52073c7f977485456e825b5592afb1d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Secretmapper%2Freact-image-annotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Secretmapper%2Freact-image-annotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Secretmapper%2Freact-image-annotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Secretmapper%2Freact-image-annotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Secretmapper","download_url":"https://codeload.github.com/Secretmapper/react-image-annotation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221449528,"owners_count":16823607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotation","annotation-tool","annotations","react"],"created_at":"2024-07-30T19:01:17.810Z","updated_at":"2024-10-25T18:30:27.161Z","avatar_url":"https://github.com/Secretmapper.png","language":"JavaScript","readme":"React Image Annotation\n=========================\n\nAn infinitely customizable image annotation library built on React\n\n![Annotation demo](demo.gif)\n\n## Installation\n\n```\nnpm install --save react-image-annotation\n# or\nyarn add react-image-annotation\n```\n\n## Usage\n\n```js\nexport default class Simple extends Component {\n  state = {\n    annotations: [],\n    annotation: {}\n  }\n\n  onChange = (annotation) =\u003e {\n    this.setState({ annotation })\n  }\n\n  onSubmit = (annotation) =\u003e {\n    const { geometry, data } = annotation\n\n    this.setState({\n      annotation: {},\n      annotations: this.state.annotations.concat({\n        geometry,\n        data: {\n          ...data,\n          id: Math.random()\n        }\n      })\n    })\n  }\n\n  render () {\n    return (\n      \u003cRoot\u003e\n        \u003cAnnotation\n          src={img}\n          alt='Two pebbles anthropomorphized holding hands'\n\n          annotations={this.state.annotations}\n\n          type={this.state.type}\n          value={this.state.annotation}\n          onChange={this.onChange}\n          onSubmit={this.onSubmit}\n        /\u003e\n      \u003c/Root\u003e\n    )\n  }\n}\n```\n\n\n### Props\n\nProp | Description | Default\n---- | ----------- | -------\n`src` | Image src attribute |\n`alt` | Image alt attribute |\n`annotations` | Array of annotations |\n`value` | Annotation object currently being created. See [annotation object](#annotation-object)  |\n`onChange` | `onChange` handler for annotation object |\n`onSubmit` | `onSubmit` handler for annotation object |\n`type` | Selector type. See [custom shapes](#using-custom-shapes) | `RECTANGLE`\n`allowTouch` | Set to `true` to allow the target to handle touch events. This disables one-finger scrolling | `false`\n`selectors` | An array of selectors. See [adding custom selector logic](#adding-custom-selector-logic) | `[RectangleSelector, PointSelector, OvalSelector]`\n`activeAnnotations` | Array of annotations that will be passed as 'active' (active highlight and shows content) |\n`activeAnnotationComparator` | Method to compare annotation and `activeAnnotation` item (from `props.activeAnnotations`). Return `true` if it's the annotations are equal | `(a, b) =\u003e a === b`\n`disableAnnotation` | Set to `true` to disable creating of annotations (note that no callback methods will be called if this is `true`) | `false`\n`disableSelector` | Set to `true` to not render `Selector` | `false`\n`disableEditor` | Set to `true` to not render `Editor` | `false`\n`disableOverlay` | Set to `true` to not render `Overlay` | `false`\n`renderSelector` | Function that renders `Selector` Component | See [custom components](#using-custom-components)\n`renderEditor` | Function that renders `Editor` Component | See [custom components](#using-custom-components)\n`renderHighlight` | Function that renders `Highlight` Component | See [custom components](#using-custom-components)\n`renderContent` | Function that renders `Content` | See [custom components](#using-custom-components)\n`renderOverlay` | Function that renders `Overlay` | See [custom components](#using-custom-components)\n`onMouseUp` | `onMouseUp` handler on annotation target |\n`onMouseDown` | `onMouseDown` handler on annotation target |\n`onMouseMove` | `onMouseMove` handler on annotation target |\n`onClick` | `onClick` handler on annotation target |\n\n#### Annotation object\n\nAn Annotation object is an object that conforms to the object shape\n\n```js\n({\n  selection: T.object, // temporary object for selector logic\n  geometry: T.shape({ // geometry data for annotation\n    type: T.string.isRequired // type is used to resolve Highlighter/Selector renderer\n  }),\n  // auxiliary data object for application.\n  // Content data can be stored here (text, image, primary key, etc.)\n  data: T.object\n})\n```\n\n## Using custom components\n\n`Annotation` supports `renderProp`s for almost every internal component.\n\nThis allows you to customize everything about the the look of the annotation interface, and you can even use canvas elements for performance or more complex interaction models.\n\n- `renderSelector` - used for selecting annotation area (during annotation creation)\n- `renderEditor` - appears after annotation area has been selected (during annotation creation)\n- `renderHighlight` - used to render current annotations in the annotation interface. It is passed an object that contains the property `active`, which is true if the mouse is hovering over the higlight\n- `renderComponent` - auxiliary component that appears when mouse is hovering over the highlight. It is passed an object that contains the annotation being hovered over. `{ annotation }`\n- `renderOverlay` - Component overlay for Annotation (i.e. 'Click and Drag to Annotate')\n\nYou can view the default renderProps [here](src/components/defaultProps.js)\n\n**Note**: You cannot use `:hover` selectors in css for components returned by `renderSelector` and `renderHighlight`. This is due to the fact that `Annotation` places DOM layers on top of these components, preventing triggering of `:hover`\n\n## Using custom shapes\n\n`Annotation` supports three shapes by default, `RECTANGLE`, `POINT` and `OVAL`.\n\nYou can switch the shape selector by passing the appropriate `type` as a property. Default shape `TYPE`s are accessible on their appropriate selectors:\n\n```js\nimport {\n  PointSelector,\n  RectangleSelector,\n  OvalSelector\n} from 'react-image-annotation/lib/selectors'\n\n\u003cAnnotation\n  type={PointSelector.TYPE}\n/\u003e\n```\n\n### Adding custom selector logic\n\n#### This is an Advanced Topic\n\nThe Annotation API allows support for custom shapes that use custom logic such as polygon or freehand selection. This is done by defining your own selection logic and passing it as a selector in the `selectors` property.\n\nSelectors are objects that must have the following properties:\n\n- `TYPE` - string that uniquely identifies this selector (i.e. `RECTANGLE`)\n- `intersects` - method that returns true if the mouse point intersects with the annotation geometry\n- `area` - method that calculates and returns the area of the annotation geometry\n- `methods` - object that can contain various listener handlers (`onMouseUp`, `onMouseDown`, `onMouseMove`, `onClick`). These listener handlers are called when triggered in the annotation area. These handlers must be reducer-like methods - returning a new annotation object depending on the change of the method\n\nYou can view a defined `RectangleSelector` [here](src/hocs/RectangleSelector.js)\n\n### Connecting selector logic to Redux/MobX\n\nFirst see [Selectors](#adding-custom-selector-logic)\n\nYou can use `Selector` methods to connect these method logic to your stores. This is due to the fact that selector methods function as reducers, returning new state depending on the event.\n\n***Note that it is not necessary to connect the selector logic with redux/mobx. Connecting the annotation and annotations state is more than enough for most use cases.***\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript","Image / video","Labeling Tools"],"sub_categories":["Open source","Images"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSecretmapper%2Freact-image-annotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSecretmapper%2Freact-image-annotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSecretmapper%2Freact-image-annotation/lists"}