https://github.com/kunduin/react-picture-annotation
A simple annotation component.
https://github.com/kunduin/react-picture-annotation
annotation javascript-library react typescript typescript-library
Last synced: 8 months ago
JSON representation
A simple annotation component.
- Host: GitHub
- URL: https://github.com/kunduin/react-picture-annotation
- Owner: Kunduin
- License: mit
- Created: 2019-06-03T12:01:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T07:54:11.000Z (almost 3 years ago)
- Last Synced: 2025-05-06T09:11:32.030Z (8 months ago)
- Topics: annotation, javascript-library, react, typescript, typescript-library
- Language: TypeScript
- Size: 3.78 MB
- Stars: 67
- Watchers: 1
- Forks: 57
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Picture Annotation
[](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE) [](https://travis-ci.com/Kunduin/react-picture-annotation) [](https://www.npmjs.com/package/react-picture-annotation)
A simple annotation component.
## Install
```Bash
# npm
npm install react-picture-annotation
# yarn
yarn add react-picture-annotation
```
## Basic Example
[](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.