pekon-multiple-crops v0.0.17

React Multi Crops

A multiple cropping component for React

comment: <> (online demo(https://beizhedenglong.github.io/pekon-multiple-crops/))

comment: <> ((./examples/imgs/kumamon.gif))

Installation

npm install pekon-multiple-crops --save

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import MultiCrops from 'pekon-multiple-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}
          color={"blue"}
          width={1000}
          coordinates={this.state.coordinates}
          onChange={this.changeCoordinate}
          onDelete={this.deleteCoordinate}
        />
      </div>
  }
}


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

Props

coordinate