FAQ

Contents

• Contents
• How to get the default state?
• How to check if the cropper is dirty?
• I want to add an additional property to the cropper. How to do it?
  • Cropper's parts
  • Cropper's settings

How to get the default state?

To get the default state you can use the corresponding cropper method.

const cropperRef = useRef<CropperRef>(null);
const getDefaultState = () => {    return cropperRef.current?.getDefaultState();}

<Cropper    ref={cropperRef}/>

If you use transitions, rotate an image a lot, and try to set the default state you can encounter the situation that image begins rolling like a barrel. It's proper behaviour, because angles are accumulating, and state.transforms.rotate can become 360, 720, 1440, etc. degrees.

To get more expected behavior you can get the closer angle (i.e. if you resetting angle to 0 from 270, the angle 360 will be the closer to 270 than 0,):

import { getCloserAngle } from 'advanced-cropper'

const getDefaultState = () => {    const currentState = cropperRef.current?.getState();    const defaultState = cropperRef.current?.getDefaultState();    return currentState && defaultState        ? {                ...defaultState,                transforms: {                    ...defaultState.transforms,                    rotate: getCloserAngle(currentState.transforms.rotate, defaultState.transforms.rotate),                },            }        : null;};

How to check if the cropper is dirty?

Get the default state and compare this state with the current state:

import { isEqualState } from 'advanced-cropper';

const isDirty = !isEqualState(cropper.getState(), defaultState);

I want to add an additional property to the cropper. How to do it?

It depends on what kind of setting you want to add.

Cropper's parts

Stencil

<Cropper    stencilComponent={CustomStencil}    stencilProps={{        color: 'red'    }}/>

The prop color will be passed into CustomStencil.

Wrapper

<Cropper    wrapperComponent={CustomWrapper}    wrapperProps={{        navigation: true    }}/>

The prop navigation will be passed into CustomWrapper.

BackgroundWrapper

<Cropper    backgroundWrapperComponent={CustomBackgroundWrapper}    backgroundWrapperProps={{        smooth: true    }}/>

The prop smooth will be passed into CustomBackgroundWrapper.

Cropper's settings

If you want to add the custom cropper's setting field, that will be used in its internal algorithms (such as defaultSize, sizeRestrictions, etc.) you can use the generic nature of cropper components:

interface CustomSettings {    stencilType: string;}

<Cropper<CustomSettings>    stencilType={'circle'}    defaultSize={(state, settings) => {        if (settings.stencilType === 'circle') {            // something        }    }}/>