https://github.com/react-cropper/react-cropper

Cropperjs as React component
https://github.com/react-cropper/react-cropper

crop crop-image cropper cropperjs react react-components react-cropper reactjs

Last synced: 27 days ago
JSON representation

Cropperjs as React component

• Host: GitHub
• URL: https://github.com/react-cropper/react-cropper
• Owner: react-cropper
• License: mit
• Created: 2015-05-06T06:32:36.000Z (over 9 years ago)
• Default Branch: develop
• Last Pushed: 2023-09-11T20:22:16.000Z (about 1 year ago)
• Last Synced: 2024-10-11T07:33:57.465Z (about 1 month ago)
• Topics: crop, crop-image, cropper, cropperjs, react, react-components, react-cropper, reactjs
• Language: TypeScript
• Homepage: https://react-cropper.github.io/react-cropper/
• Size: 4.84 MB
• Stars: 2,020
• Watchers: 17
• Forks: 269
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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(null);

  const onCrop = () => {

    const cropper = cropperRef.current?.cropper;

    console.log(cropper.getCroppedCanvas().toDataURL());

  };

  return (

    

  );

};

```

## Options

### src

-   Type: `string`

-   Default: `null`

```js

```

### 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:[email protected])

## Maintainer

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

## License

MIT