{"id":20663965,"url":"https://github.com/universaldatatool/react-image-annotate","last_synced_at":"2025-05-15T23:05:16.423Z","repository":{"id":39556434,"uuid":"165898316","full_name":"UniversalDataTool/react-image-annotate","owner":"UniversalDataTool","description":"Create image annotations. Classify, tag images with polygons, bounding boxes or points.","archived":false,"fork":false,"pushed_at":"2024-05-08T09:11:27.000Z","size":89366,"stargazers_count":422,"open_issues_count":89,"forks_count":182,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-12T06:45:34.681Z","etag":null,"topics":["bounding-boxes","hacktoberfest","image-annotations","polygons"],"latest_commit_sha":null,"homepage":"","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/UniversalDataTool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-15T17:59:24.000Z","updated_at":"2025-05-07T00:10:19.000Z","dependencies_parsed_at":"2024-05-11T04:03:15.766Z","dependency_job_id":"fcb71c94-b6f3-41b9-92e3-dc36af94315c","html_url":"https://github.com/UniversalDataTool/react-image-annotate","commit_stats":{"total_commits":354,"total_committers":16,"mean_commits":22.125,"dds":"0.27118644067796616","last_synced_commit":"ca3e864326c14413e0a4df2544b5c1ecdccac987"},"previous_names":["waoai/react-image-annotate"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UniversalDataTool%2Freact-image-annotate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UniversalDataTool%2Freact-image-annotate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UniversalDataTool%2Freact-image-annotate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UniversalDataTool%2Freact-image-annotate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UniversalDataTool","download_url":"https://codeload.github.com/UniversalDataTool/react-image-annotate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"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":["bounding-boxes","hacktoberfest","image-annotations","polygons"],"created_at":"2024-11-16T19:21:20.721Z","updated_at":"2025-05-15T23:05:11.384Z","avatar_url":"https://github.com/UniversalDataTool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Image Annotate\n\n[![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate)\n\nThe best image/video annotation tool ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403).\n\n## Sponsors\n\n[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)\n\n## Features\n\n- Simple input/output format\n- Bounding Box, Point and Polygon Annotation\n- Zooming, Scaling, Panning\n- Multiple Images\n- Cursor Crosshair\n\n![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)\n\n## Usage\n\n`npm install react-image-annotate`\n\n```javascript\nimport React from \"react\";\nimport ReactImageAnnotate from \"react-image-annotate\";\n\nconst App = () =\u003e (\n  \u003cReactImageAnnotate\n    labelImages\n    regionClsList={[\"Alpha\", \"Beta\", \"Charlie\", \"Delta\"]}\n    regionTagList={[\"tag1\", \"tag2\", \"tag3\"]}\n    images={[\n      {\n        src: \"https://placekitten.com/408/287\",\n        name: \"Image 1\",\n        regions: []\n      }\n    ]}\n  /\u003e\n);\n\nexport default App;\n\n```\n\nTo get the proper fonts, make sure to import the Inter UI or Roboto font, the\nfollowing line added to a css file should suffice.\n\n```css\n@import url(\"https://rsms.me/inter/inter.css\");\n```\n\n## Props\n\nAll of the following properties can be defined on the Annotator...\n\n| Prop                     | Type (\\* = required)                             | Description                                                                             | Default       |\n| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |\n| `taskDescription`        | \\*`string`                                       | Markdown description for what to do in the image.                                       |               |\n| `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |\n| `regionTagList`          | `Array\u003cstring\u003e`                                  | Allowed \"tags\" (mutually inclusive classifications) for regions.                        |               |\n| `regionClsList`          | `Array\u003cstring\u003e`                                  | Allowed \"classes\" (mutually exclusive classifications) for regions.                     |               |\n| `imageTagList`           | `Array\u003cstring\u003e`                                  | Allowed tags for entire image.                                                          |               |\n| `imageClsList`           | `Array\u003cstring\u003e`                                  | Allowed classes for entire image.                                                       |               |\n| `enabledTools`           | `Array\u003cstring\u003e`                                  | Tools allowed to be used. e.g. \"select\", \"create-point\", \"create-box\", \"create-polygon\" | Everything.   |\n| `showTags`               | `boolean`                                        | Show tags and allow tags on regions.                                                    | `true`        |\n| `selectedImage`          | `string`                                         | URL of initially selected image.                                                        |               |\n| `images`                 | `Array\u003cImage\u003e`                                   | Array of images to load into annotator                                                  |               |\n| `showPointDistances`     | `boolean`                                        | Show distances between points.                                                          | `false`       |\n| `pointDistancePrecision` | `number`                                         | Precision on displayed points (e.g. 3 =\u003e 0.123)                                         |               |\n| `onExit`                 | `MainLayoutState =\u003e any`                         | Called when \"Save\" is called.                                                           |               |\n| `RegionEditLabel`        | `Node`                                           | React Node overriding the form to update the region (see [`RegionLabel`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js))                                                          |               |\n| `allowComments`          | `boolean`                                        | Show a textarea to add comments on each annotation.                                     | `false`       |\n| `hidePrev`               | `boolean`                                        | Hide `Previous Image` button from the header bar.                                       | `false`       |\n| `hideNext`               | `boolean`                                        | Hide `Next Image` button from the header bar.                                           | `false`       |\n| `hideClone`              | `boolean`                                        | Hide `Clone` button from the header bar.                                                | `false`       |\n| `hideSettings`           | `boolean`                                        | Hide `Settings` button from the header bar.                                             | `false`       |\n| `hideFullScreen`         | `boolean`                                        | Hide `FullScreen/Window` button from the header bar.                                    | `false`       |\n| `hideSave`               | `boolean`                                        | Hide `Save` button from the header bar.                                                 | `false`       |\n\n## Developers\n\n### Development\n\nThis project uses [react-storybook](https://storybook.js.org/). To begin developing run the following commands in the cloned repo.\n\n1. `yarn install`\n2. `yarn storybook`\n\nA browser tab will automatically open with the project components.\n\nSee more details in the [contributing guidelines](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development).\n\n### Icons\n\nConsult these icon repositories:\n\n- [Material Icons](https://material.io/tools/icons/)\n- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery\u0026m=free)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funiversaldatatool%2Freact-image-annotate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funiversaldatatool%2Freact-image-annotate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funiversaldatatool%2Freact-image-annotate/lists"}