react-multi-crops

A multiple cropping component for React

Usage no npm install needed!

<script type="module">
  import reactMultiCrops from 'https://cdn.skypack.dev/react-multi-crops';
</script>

README

React Multi Crops

A multiple cropping component for React

online demo

kumamon

Installation

npm install react-multi-crops --save

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import MultiCrops from 'react-multi-crops'
import img from './imgs/kumamon.jpg'

class App extends React.Component {
  state = {
    coordinates: [],
  }

  changeCoordinate = (coordinate, index, coordinates) => {
    this.setState({
      coordinates,
    })
  }
  deleteCoordinate = (coordinate, index, coordinates) => {
    this.setState({
      coordinates,
    })
  }
  render() {
    return
        <MultiCrops
          src={img}
          width={1000}
          coordinates={this.state.coordinates}
          onChange={this.changeCoordinate}
          onDelete={this.deleteCoordinate}
        />
      </div>
  }
}


ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root'),
)

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) -