# react-multi-crops

> A multiple cropping component for React

Latest version **0.0.10** (published 2018-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-multi-crops
pnpm add react-multi-crops
yarn add react-multi-crops
bun add react-multi-crops
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2018-08-21 |
| First published | 2018-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Author | Victor Wang |
| Maintainers | beizhedenglong |
| Keywords | react-crop, img-crop, cropping, react-img-crop, react-multi-crops, react |

## Links

- npm: https://www.npmjs.com/package/react-multi-crops
- Repository: https://github.com/beizhedenglong/react-multi-crops
- Homepage: https://github.com/beizhedenglong/react-multi-crops#readme
- Issues: https://github.com/beizhedenglong/react-multi-crops/issues
- npm.io page: https://npm.io/package/react-multi-crops

## Dependencies (8)

- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [react](https://npm.io/package/react.md) ^16.2.0
- [shortid](https://npm.io/package/shortid.md) ^2.2.8
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [interactjs](https://npm.io/package/interactjs.md) ^1.4.0-alpha.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [styled-jsx](https://npm.io/package/styled-jsx.md) ^2.2.6
- [react-multi-crops](https://npm.io/package/react-multi-crops.md) ^0.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.10 (latest) — 2018-08-21
- 0.0.9 — 2018-08-21
- 0.0.8 — 2018-04-04
- 0.0.7 — 2018-04-04
- 0.0.6 — 2018-03-07
- 0.0.5 — 2018-03-07
- 0.0.4 — 2018-03-07
- 0.0.3 — 2018-03-07
- 0.0.2 — 2018-03-07
- 0.0.1 — 2018-03-06

## README

# React Multi Crops

A multiple cropping component for React

[online demo](https://beizhedenglong.github.io/react-multi-crops/)

![kumamon](./examples/imgs/kumamon.gif)


## Installation
```
npm install react-multi-crops --save
```


## Usage

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

---
_Source: https://npm.io/package/react-multi-crops · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._