Home

Awesome

<p align="center"><a href="https://advanced-cropper.github.io/react-advanced-cropper/" target="_blank" rel="noopener noreferrer"><img width="133" src="https://github.com/norserium/react-advanced-cropper/blob/master/example/static/img/github-logo.svg?raw=true&timestamp=1608385818575" alt="React Advanced Cropper logo"></a></p> <p align="center"> <a href="https://npmcharts.com/compare/react-advanced-cropper?minimal=true"><img src="https://img.shields.io/npm/dm/react-advanced-cropper.svg?sanitize=true" alt="Downloads"></a> <a href="https://www.npmjs.com/package/react-advanced-cropper"><img src="https://img.shields.io/npm/v/react-advanced-cropper?color=6FCFF0" alt="Version"></a> <br> <a href="https://advanced-cropper.github.io/react-advanced-cropper/">Documentation</a target="_blank" rel="noopener noreferrer"> / <a href="https://advanced-cropper.github.io/react-advanced-cropper/docs/guides/recipes">Examples</a target="_blank" rel="noopener noreferrer"> / <a href="https://codesandbox.io/s/react-advanced-cropper-kkvbz">Sandbox</a target="_blank" rel="noopener noreferrer"> </p> <h2 align="center"> </h2>

:warning: It's the beta version. The API can be changed in the future. Therefore, it's recommended to fix the version with ~.


React Advanced Cropper is the advanced library that gives you opportunity to create your own croppers suited for any website design. It means that you are able to change not only the cropper appearance, you area able to customize its behavior also.

Features:

Install

npm install --save react-advanced-cropper
yarn add react-advanced-cropper

Usage

import React, { useState } from 'react';
import { CropperRef, Cropper } from 'react-advanced-cropper';
import 'react-advanced-cropper/dist/style.css'

export const GettingStartedExample = () => {
	const [image, setImage] = useState(
		'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80',
	);

	const onChange = (cropper: CropperRef) => {
		console.log(cropper.getCoordinates(), cropper.getCanvas());
	};

	return (
		<Cropper
			src={image}
			onChange={onChange}
			className={'cropper'}
		/>
	)
};
/*
  Maybe you need to set the limits for the cropper sizes or its container sizes
  otherwise a cropping image will try to fill all available space
*/
.cropper {
  height: 600px;
  background: #DDD;
}

Cropper

PropTypeDescriptionDefault
srcstringThe cropping image (link / base64)
stencilComponentComponentThe stencil componentRectangleStencil
stencilPropsobjectThe props for the stencil component{}
classNamestringThe optional class for the root cropper block
imageClassNamestringThe optional class for the cropping image
boundariesClassNamestringThe optional class for the area.
backgroundClassNamestringThe optional class for the background under the image
autoZoombooleanEnable / disable transitionstrue
transitionsboolean, objectEnable / disable auto zoomfalse
stencilSizeobject The size of the stencil in pixels
canvasbooleanThe flag that indicates if canvas should be usedtrue
minWidthnumberThe minimum width of the stencil (percents)
minHeightnumberThe minimum height of the stencil (percents)
maxWidthnumberThe maximum width of the stencil (percents)
maxHeightnumberThe maximum height of the stencil (percents)
checkOrientationbooleanCheck if EXIF orientation should be checkedtrue
resizeImageboolean, objectThe options for the image resizing (details)true
moveImageboolean, objectThe options for the image moving (details)true
rotateImageboolean, objectThe options for the image moving (details)false
imageRestrictionstringSet restrictions for image position ('fillArea' 'fitArea', 'stencil', 'none')'fillArea'
defaultSizeobject, FunctionThe function that returns the default size of the stencil or object
defaultPositionobject, FunctionThe function that returns the default position of the stencil or object
defaultTransformsobject, FunctionThe function that returns the default image transforms or object
wrapperComponentComponentThe wrapper componentCropperWrapper
wrapperPropsobjectThe props for the wrapper component{}
backgroundWrapperComponentComponentThe background wrapper componentCropperBackgroundWrapper
backgroundWrapperPropsobjectThe props for the background wrapper component{}

See the documentation for more props and details.

RectangleStencil

PropTypeDescriptionDefault
aspectRationumberThe aspect ratio
minAspectRationumberThe minimum aspect ratio
maxAspectRationumberThe maximum aspect ratio
classNamestringThe class for root block of the stencil component
previewClassNamestringThe class for the preview component
movingClassNamestringThe class applied when user drag the stencil
resizingClassNamestringThe class applied when user resize the stencil
boundingBoxClassstringThe class for the bounding box component
handlerComponentComponentThe handler component
handlersobjectThe object of handlers that should be visible or hidden.
handlerClassNamesobjectThe object of custom handler classes
handlerWrapperClassNamesobjectThe object of custom handler wrapper classes
lineComponentComponentThe handler component
linesobjectThe object of lines that should be visible or hidden.
lineClassNamesobjectThe object of custom line classes
lineWrapperClassNamesobjectThe object of custom line wrapper classes

See the documentation for more props and details.

License

The source code of this library is licensed under MIT, the documentation content belongs to Norserium, except the photos that belong to their respective owners.