# react-cropper

> Cropper as React Component

Latest version **2.3.3** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cropper
pnpm add react-cropper
yarn add react-cropper
bun add react-cropper
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.3 |
| Published | 2023-04-12 |
| First published | 2015-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 20 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2078 |
| Author | Fong Kuanghuei |
| Maintainers | roadmanfong, shekhar-shubhendu |
| Keywords | react, react-component, cropper, image, cropperjs |

## Links

- npm: https://www.npmjs.com/package/react-cropper
- Repository: https://github.com/react-cropper/react-cropper
- Homepage: https://github.com/react-cropper/react-cropper/
- Issues: https://github.com/react-cropper/react-cropper/issues
- npm.io page: https://npm.io/package/react-cropper

## Dependencies (1)

- [cropperjs](https://npm.io/package/cropperjs.md) ^1.5.13

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

- 2.3.3 (latest) — 2023-04-12
- 2.3.0-0 (beta) — 2023-03-09
- 2.3.2 — 2023-03-14
- 2.3.1 — 2023-03-10
- 2.3.0 — 2023-03-10
- 2.2.0-0 — 2021-10-16
- 2.1.8 — 2021-06-28
- 2.1.8-1 — 2021-05-24
- 2.1.8-0 — 2021-04-26
- 2.1.7 — 2021-02-20
- 2.1.6 — 2021-02-16
- 2.1.6-0 — 2021-02-12
- 2.1.5 — 2021-02-08
- 2.1.5-0 — 2021-02-08
- 2.1.4 — 2020-09-14
- … 37 more at https://npm.io/package/react-cropper/versions

## README

# react-cropper

[Cropperjs](https://github.com/fengyuanchen/cropperjs) as React component

[![NPM](https://img.shields.io/npm/v/react-cropper/latest)](https://www.npmjs.com/package/react-cropper)
[![NPM](https://img.shields.io/npm/v/react-cropper/beta)](https://www.npmjs.com/package/react-cropper)
[![NPM downloads](https://img.shields.io/npm/dt/react-cropper)](https://www.npmjs.com/package/react-cropper)
[![Bundle Size minZip](https://img.shields.io/bundlephobia/minzip/react-cropper)](https://www.npmjs.com/package/react-cropper)
[![Bundle Size min](https://img.shields.io/bundlephobia/min/react-cropper)](https://www.npmjs.com/package/react-cropper)
[![License](https://img.shields.io/github/license/react-cropper/react-cropper)](https://github.com/react-cropper/react-cropper/blob/develop/LICENSE)
[![codecov](https://codecov.io/gh/react-cropper/react-cropper/branch/develop/graph/badge.svg)](https://codecov.io/gh/react-cropper/react-cropper)

## Demo

[Click for a Demo](https://codesandbox.io/s/wonderful-pine-i7fs3)

## Docs

- [Cropperjs](https://github.com/fengyuanchen/cropperjs)

## Installation

Install via [npm](https://www.npmjs.com/package/react-cropper)

```shell
npm install --save react-cropper
```

You need `cropper.css` in your project which is from [cropperjs](https://www.npmjs.com/package/cropperjs).
Since this project have dependency on [cropperjs](https://www.npmjs.com/package/cropperjs), it located in `/node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css` or `node_modules/cropperjs/dist/cropper.css` for npm version `3.0.0` later

## Quick Example

```ts
import React, { useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<ReactCropperElement>(null);
  const onCrop = () => {
    const cropper = cropperRef.current?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};
```

## Options

### src

-   Type: `string`
-   Default: `null`

```js
<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />
```

### alt

-   Type: `string`
-   Default: `picture`

### crossOrigin

-   Type: `string`
-   Default: `null`

### dragMode

https://github.com/fengyuanchen/cropperjs#dragmode

### scaleX

https://github.com/fengyuanchen/cropperjs#scalexscalex

### scaleY

https://github.com/fengyuanchen/cropperjs#scalexscaley

### enable

https://github.com/fengyuanchen/cropperjs#enable

### disable

https://github.com/fengyuanchen/cropperjs#disable

### zoomTo

https://github.com/fengyuanchen/cropperjs#zoomto

### rotateTo

https://github.com/fengyuanchen/cropperjs#rotateto

### Other options

Accept all options in the [docs](https://github.com/fengyuanchen/cropperjs#options) as properties.

## Methods

Use the `cropper` instance from `onInitialized` to access cropperjs [methods](https://github.com/fengyuanchen/cropper#methods)

## Build

```sh
npm run build
```

## Development

```sh
npm start
```

## Author

[Fong Kuanghuei](mailto:fongkuanghui@gmail.com)

## Maintainer

[Shubhendu Shekhar](https://github.com/shekhar-shubhendu)

## License

MIT

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