React Multi Crops
A multiple cropping component for React
Installation
npm install react-multi-crops --save
Usage
Component state = coordinates: { this } { this } { return <MultiCrops src=img width=1000 coordinates=thisstatecoordinates onChange=thischangeCoordinate onDelete=thisdeleteCoordinate /> </div> } ReactDOM
Props
Prop | Description | Type | Default |
---|---|---|---|
src | Src of background image. | string | - |
coordinates | An array of coordinate( see the table blew), {id, x, y, width, height}. | array | [] |
width | Width of background image. | number(in pixel) | - |
height | Height of background image. | number(in pixel) | - |
onDraw | A callback which hanppends when a user starts drawing a new rectangle. | funtion(coordinate , index, coordinates) | - |
onDrag | A callback which hanppends when a user stars draging a exited rectangle. | funtion(coordinate , index, coordinates) | - |
onResize | A callback which hanppends when a user starts resizing a exited rectangle. | funtion(coordinate , index, coordinates) | - |
onChange | A callback which hanppends when a user starts drawing, draging or resizing a new/exited rectangle. | funtion(coordinate , index, coordinates) | - |
onDelete | A callback which hanppends when a user delete a exited rectangle. | funtion(coordinate , index, coordinates) | - |
onLoad | The callback is triggered when the background image is loaded. | onLoad(e) | - |
coordinate
Prop | Description | Type | Default |
---|---|---|---|
id | Unique between in coordinates array | string | - |
x | X coordinate relative to left corner(0,0) of background image. From left to right, x will go up. | number(in pixel) | - |
y | Y coordinate relative to left corner(0,0) of background image. From top to bottom, y will go up. | number(in pixel) | - |
width | Width of coordinate | number(in pixel) | - |
height | Height of coordinate | number(in pixel) | - |