# react-picture-annotation > A simple annotation component. Latest version **1.2.0** (published 2020-12-19) · MIT license · 0 weekly downloads ## Install ```sh npm install react-picture-annotation pnpm add react-picture-annotation yarn add react-picture-annotation bun add react-picture-annotation ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2020-12-19 | | First published | 2019-06-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 1.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 68 | | Author | Bay | | Maintainers | kunduin | | Keywords | react, typescript-library, javascript-library, annotation | ## Links - npm: https://www.npmjs.com/package/react-picture-annotation - Repository: https://github.com/Kunduin/react-picture-annotation - Homepage: https://github.com/Kunduin/react-picture-annotation#readme - Issues: https://github.com/Kunduin/react-picture-annotation/issues - npm.io page: https://npm.io/package/react-picture-annotation ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2020-12-19 - 1.1.0 — 2020-08-05 - 1.0.3 — 2019-10-09 - 1.0.2 — 2019-06-14 - 1.0.1 — 2019-06-11 - 1.0.0 — 2019-06-10 - 0.1.3 — 2019-06-09 - 0.1.2 — 2019-06-09 - 0.1.1 — 2019-06-09 - 0.1.0 — 2019-06-09 - 0.0.9 — 2019-06-09 - 0.0.8 — 2019-06-09 - 0.0.7 — 2019-06-09 - 0.0.6 — 2019-06-09 - 0.0.5 — 2019-06-09 - … 4 more at https://npm.io/package/react-picture-annotation/versions ## README # React Picture Annotation [![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) A simple annotation component. ![rect](./doc/rect.gif) ## Install ```Bash # npm npm install react-picture-annotation # yarn yarn add react-picture-annotation ``` ## Basic Example [![Edit react-picture-annotation-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-picture-annotation-example-cw49e?fontsize=14) ```jsx const App = () => { const [pageSize, setPageSize] = useState({ width: window.innerWidth, height: window.innerHeight }); const onResize = () => { setPageSize({ width: window.innerWidth, height: window.innerHeight }); }; useEffect(() => { window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const onSelect = selectedId => console.log(selectedId); const onChange = data => console.log(data); return (
); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); ``` ## ReactPictureAnnotation Props | Name | Type | Comment | required | | --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- | | onChange | `(annotationData: IAnnotation[]) => void` | Called every time the shape changes. | √ | | onSelected | `(id: string or null) => void` | Called each time the selection is changed. | √ | | width | `number` | Width of the canvas. | √ | | height | `number` | Height of the canvas. | √ | | image | `string` | Image to be annotated. | √ | | inputElement | `(value: string,onChange: (value: string) => void,onDelete: () => void) => React.ReactElement;` | Customizable input control. | X | | annotationData | `Array` | Control the marked areas on the page. | X | | annotationStyle | `IShapeStyle` | Control the mark style | X | | selectedId | `string or null` | Selected markId | X | | scrollSpeed | `number` | Speed of wheel zoom, default 0.0005 | X | | marginWithInput | `number` | Margin between input and mark, default 1 | X | | defaultAnnotationSize | `number[]` | Size for annotations created by clicking. | X | ## IShapeStyle ReactPictureAnnotation can be easily modified the style through a prop named `annotationStyle` ```typescript export const defaultShapeStyle: IShapeStyle = { /** text area **/ padding: 5, // text padding fontSize: 12, // text font size fontColor: "#212529", // text font color fontBackground: "#f8f9fa", // text background color fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif", /** stroke style **/ lineWidth: 2, // stroke width shapeBackground: "hsla(210, 16%, 93%, 0.2)", // background color in the middle of the marker shapeStrokeStyle: "#f8f9fa", // shape stroke color shadowBlur: 10, // stroke shadow blur shapeShadowStyle: "hsla(210, 9%, 31%, 0.35)", // shape shadow color /** transformer style **/ transformerBackground: "#5c7cfa", transformerSize: 10 }; ``` ## IAnnotation ```js { id:"to identify this shape", // required, comment:"string type comment", // not required mark:{ type:"RECT", // now only support rect // The number of pixels in the upper left corner of the image x:0, y:0, // The size of tag width:0, height:0 } } ``` ## Licence [MIT License](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE) ## How To Contribute This repo uses semantic release. By running `npm run commit` and merging commits into master branch, travis will automatically trigger release. Thanks all your great contributions. --- _Source: https://npm.io/package/react-picture-annotation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._