Home

Awesome

React Mobile Cropper

The react mobile cropper is highly inspirited by popular Android mobile croppers. It was created as the demonstration of react-advanced-cropper possibilities and uses it under the hood. Therefore, its documentation would be helpful in the edge cases.

Demo / Sandbox

NPM <a href="https://npmcharts.com/compare/react-mobile-cropper?minimal=true"><img src="https://img.shields.io/npm/dm/react-mobile-cropper.svg?sanitize=true" alt="Downloads"></a>

Install

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

Usage

import React, { useState } from 'react';
import { CropperRef, Cropper } from 'react-mobile-cropper';
import 'react-mobile-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'}
        />
    )
};

FAQ

How to change the cropper's main color?

To change the cropper's main color you should redefine color property for the cropper.

.cropper {
	color: red;
}
<Cropper
	src={src}
	className={'cropper'}
/>

Cropper

PropTypeDescriptionDefault
srcstringThe cropping image (link / base64)
stencilType'circle', 'rectangle'The type of stencil'rectangle'
stencilComponentComponentThe stencil componentRectangleStencil
stencilPropsobjectThe props for the stencil component{}
classNamestringThe optional class for the root cropper block
imageClassNamestringThe optional class for the cropping image
boundaryClassNamestringThe optional class for the area.
backgroundClassNamestringThe optional class for the background under the image
transitionsboolean, objectEnable / disable auto zoomfalse
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
imageRestrictionstringSet restrictions for image position ('stencil', 'none')'stencil'
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

See the documentation for more props and details. Notice, in this cropper props transitions, priority, and stencilSize are not available.

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.