{"id":28092635,"url":"https://github.com/kunduin/react-picture-annotation","last_synced_at":"2025-05-13T13:24:52.254Z","repository":{"id":38290635,"uuid":"189996875","full_name":"Kunduin/react-picture-annotation","owner":"Kunduin","description":"A simple annotation component.","archived":false,"fork":false,"pushed_at":"2023-01-26T07:54:11.000Z","size":3965,"stargazers_count":67,"open_issues_count":44,"forks_count":57,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-06T09:11:32.030Z","etag":null,"topics":["annotation","javascript-library","react","typescript","typescript-library"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Kunduin.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}},"created_at":"2019-06-03T12:01:35.000Z","updated_at":"2025-02-26T13:08:37.000Z","dependencies_parsed_at":"2023-02-06T13:45:57.225Z","dependency_job_id":null,"html_url":"https://github.com/Kunduin/react-picture-annotation","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunduin%2Freact-picture-annotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunduin%2Freact-picture-annotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunduin%2Freact-picture-annotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunduin%2Freact-picture-annotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kunduin","download_url":"https://codeload.github.com/Kunduin/react-picture-annotation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948924,"owners_count":21989056,"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","javascript-library","react","typescript","typescript-library"],"created_at":"2025-05-13T13:24:51.355Z","updated_at":"2025-05-13T13:24:52.237Z","avatar_url":"https://github.com/Kunduin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Picture Annotation\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE) [![Travis (.com)](https://img.shields.io/travis/com/kunduin/react-picture-annotation.svg)](https://travis-ci.com/Kunduin/react-picture-annotation) [![npm](https://img.shields.io/npm/v/react-picture-annotation.svg)](https://www.npmjs.com/package/react-picture-annotation)\n\nA simple annotation component.\n\n![rect](./doc/rect.gif)\n\n## Install\n\n```Bash\n# npm\nnpm install react-picture-annotation\n\n# yarn\nyarn add react-picture-annotation\n```\n\n## Basic Example\n\n[![Edit react-picture-annotation-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-picture-annotation-example-cw49e?fontsize=14)\n\n```jsx\nconst App = () =\u003e {\n  const [pageSize, setPageSize] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight\n  });\n  const onResize = () =\u003e {\n    setPageSize({ width: window.innerWidth, height: window.innerHeight });\n  };\n\n  useEffect(() =\u003e {\n    window.addEventListener('resize', onResize);\n    return () =\u003e window.removeEventListener('resize', onResize);\n  }, []);\n\n  const onSelect = selectedId =\u003e console.log(selectedId);\n  const onChange = data =\u003e console.log(data);\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cReactPictureAnnotation\n        image=\"https://source.unsplash.com/random/800x600\"\n        onSelect={onSelect}\n        onChange={onChange}\n        width={pageSize.width}\n        height={pageSize.height}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst rootElement = document.getElementById('root');\nReactDOM.render(\u003cApp /\u003e, rootElement);\n```\n\n## ReactPictureAnnotation Props\n\n| Name                  | Type                                                                                            | Comment                                    | required |\n| --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- |\n| onChange              | `(annotationData: IAnnotation[]) =\u003e void`                                                       | Called every time the shape changes.       | √        |\n| onSelected            | `(id: string or null) =\u003e void`                                                                  | Called each time the selection is changed. | √        |\n| width                 | `number`                                                                                        | Width of the canvas.                       | √        |\n| height                | `number`                                                                                        | Height of the canvas.                      | √        |\n| image                 | `string`                                                                                        | Image to be annotated.                     | √        |\n| inputElement          | `(value: string,onChange: (value: string) =\u003e void,onDelete: () =\u003e void) =\u003e React.ReactElement;` | Customizable input control.                | X        |\n| annotationData        | `Array\u003cIAnnotation\u003e`                                                                            | Control the marked areas on the page.      | X        |\n| annotationStyle       | `IShapeStyle`                                                                                   | Control the mark style                     | X        |\n| selectedId            | `string or null`                                                                                | Selected markId                            | X        |\n| scrollSpeed           | `number`                                                                                        | Speed of wheel zoom, default 0.0005        | X        |\n| marginWithInput       | `number`                                                                                        | Margin between input and mark, default 1   | X        |\n| defaultAnnotationSize | `number[]`                                                                                      | Size for annotations created by clicking.  | X        |\n\n## IShapeStyle\n\nReactPictureAnnotation can be easily modified the style through a prop named `annotationStyle`                                                                                      \n\n```typescript\nexport const defaultShapeStyle: IShapeStyle = {\n  /** text area **/\n  padding: 5, // text padding\n  fontSize: 12, // text font size\n  fontColor: \"#212529\", // text font color\n  fontBackground: \"#f8f9fa\", // text background color\n  fontFamily:\n    \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n  \n  /** stroke style **/\n  lineWidth: 2, // stroke width\n  shapeBackground: \"hsla(210, 16%, 93%, 0.2)\", // background color in the middle of the marker\n  shapeStrokeStyle: \"#f8f9fa\", // shape stroke color\n  shadowBlur: 10, // stroke shadow blur\n  shapeShadowStyle: \"hsla(210, 9%, 31%, 0.35)\", // shape shadow color\n  \n  /** transformer style **/\n  transformerBackground: \"#5c7cfa\",\n  transformerSize: 10\n};\n```\n\n## IAnnotation\n\n```js\n{\n  id:\"to identify this shape\",    // required,\n  comment:\"string type comment\",  // not required\n  mark:{\n    type:\"RECT\",                  // now only support rect\n\n    // The number of pixels in the upper left corner of the image\n    x:0,\n    y:0,\n\n    // The size of tag\n    width:0,\n    height:0\n  }\n}\n```\n\n## Licence\n\n[MIT License](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE)\n\n## How To Contribute\n\nThis repo uses semantic release. By running `npm run commit` and merging commits into master branch, travis will automatically trigger release.\n\nThanks all your great contributions.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunduin%2Freact-picture-annotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunduin%2Freact-picture-annotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunduin%2Freact-picture-annotation/lists"}