Socket
Socket
Sign inDemoInstall

react-multi-crops

Package Overview
Dependencies
8
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-multi-crops


Version published
Maintainers
1
Install size
28.5 MB
Created

Readme

Source

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

PropDescriptionTypeDefault
srcSrc of background image.string-
coordinatesAn array of coordinate( see the table blew), {id, x, y, width, height}.array[]
widthWidth of background image.number(in pixel)-
heightHeight of background image.number(in pixel)-
onDrawA callback which hanppends when a user starts drawing a new rectangle.funtion(coordinate , index, coordinates)-
onDragA callback which hanppends when a user stars draging a exited rectangle.funtion(coordinate , index, coordinates)-
onResizeA callback which hanppends when a user starts resizing a exited rectangle.funtion(coordinate , index, coordinates)-
onChangeA callback which hanppends when a user starts drawing, draging or resizing a new/exited rectangle.funtion(coordinate , index, coordinates)-
onDeleteA callback which hanppends when a user delete a exited rectangle.funtion(coordinate , index, coordinates)-
onLoadThe callback is triggered when the background image is loaded.onLoad(e)-

coordinate

PropDescriptionTypeDefault
idUnique between in coordinates arraystring-
xX coordinate relative to left corner(0,0) of background image. From left to right, x will go up.number(in pixel)-
yY coordinate relative to left corner(0,0) of background image. From top to bottom, y will go up.number(in pixel)-
widthWidth of coordinatenumber(in pixel)-
heightHeight of coordinatenumber(in pixel)-

Keywords

FAQs

Last updated on 21 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc