Skip to main content

Create the cropper you desire

This react cropper library gives you the possibility to create croppers that exactly suited for your website design. Not only the appearance, but the behavior alike. Don’t limit yourself. Rotate, zoom, transitions, autozoom and many other features included.
ReactVue
Cropper
Image

Features

Fully Customisable
Customise almost any aspect of the cropper component, or use it right out of the box.
Mobile Support
React Advanced Cropper supports desktop and mobile devices alike. Built-in support of touch events, cropper resizing, etc.
Canvas / Coordinates
This react cropper can be used to create a canvas with a cropped area or just coordinates relative to the original image to crop it server-side in the future.
Advanced Features
Set minimum and maximum aspect ratios, customize minimum and maximum height and width, etc.

How to start?

This library gives you numerous possibilities to customize your cropper. It's almost the framework for creating of the croppers. But also it's very easy to use. Install the library and use the fragments of code below. That's all that you need to start.
/
$yarn add react-advanced-cropper

import React, { useState } from 'react';import { CropperRef, Cropper } from 'react-advanced-cropper';import 'react-advanced-cropper/dist/style.css'
export const GettingStartedExample = () => {    const [image] = useState(        'https://images.unsplash.com/photo-1599140849279-1014532882fe?fit=crop&w=1300&q=80',    );
    const onChange = (cropper: CropperRef) => {        console.log(cropper.getCoordinates(), cropper.getCanvas());    };
    return (        <Cropper            src={image}            onChange={onChange}            className={'cropper'}        />;    )};
It should be noted, that the documentation contains more different examples that covers almost all of common aspect of using the cropper. From the basic ones to the advanced ones.