Getting started

Introduction

This react cropper library is built on the advanced-cropper core. It's the official binding for React and it belongs to the advanced croppers family that based on the same core and philosophy.

Motivation

There are many different croppers. No point in creating another one without a clear vision of something special that would be distinguish it from another croppers.

The core idea was to create the cropper that would be native for the used framework and give the developer possibility to customize and extend it in a familiar way. It began with simple stencil component replacement, but now this library gives the almost full control over a cropper to a developer. Ranging from appearance to behavior details.

During the development another important part was creating the smooth and lovely experience for cropper users. This resulted in appearing of solid mobile support, transitions and many other features that are integral part of this cropper now.

As a result, this cropper is a ready out the box with the polished default behavior, predefined themes, etc, and unlimited power to customize almost every its aspect.

Package installation

To use this library you should install it with npm or yarn

npm install -S react-advanced-cropper

yarn add react-advanced-cropper

Then import the Cropper component and the styles somewhere:

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

Minimal working example

The example below shows the usage of the cropper inside some arbitrary component.

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'}        />    )};

If you need to change the behavior of the cropper (for example, you want to create a fixed one for mobile devices), please read this detailed article about the different variants of croppers.