Neutrinos Peludos Magnéticos

    react-multi-crops

    0.0.10 • Public • Published

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

    Install

    npm i react-multi-crops

    DownloadsWeekly Downloads

    3,166

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • beizhedenglong