Skip to main content

RectangleStencil

Props#

aspectRatio#

  • Type: number

  • Details:

    Define the fixed aspect ratio of the crop box. By default, the crop box is free ratio.

minAspectRatio#

  • Type: number

  • Details:

    Define the minimum aspect ratio of the crop box. By default, the crop box is free ratio.

maxAspectRatio#

  • Type: number

  • Details:

    Define the maximum aspect ratio of the crop box. By default, the crop box is free ratio.

movable#

  • Type: boolean

  • Default: true

  • Details:

    Define if stencil can be moved.

resizable#

  • Type: boolean

  • Default: true

  • Details:

    Define if stencil can be resized.

className#

  • Type: string

  • Details:

    The class for the entire stencil.

movingClassName#

  • Type: string

  • Details:

    The class that applies to the entire stencil, when user moves it.

resizingClassName#

  • Type: string

  • Details:

    The class that applies to the entire stencil, when user resizes it.

previewClassName#

  • Type: string

  • Details:

    The class for the preview area.

overlayClassName#

  • Type: string

  • Details:

    The class for the stencil overlay.

boundingBoxClassName#

  • Type: string

  • Details:

    The class for the bounding box component. Probably you don't need to use it.

handlerComponent#

  • Type: Component

  • Default: SimpleHandler

  • Details:

    The handler component.

handlers#

  • Type:

    {    eastNorth?: boolean;    north?: boolean;    westNorth?: boolean;    west?: boolean;    westSouth?: boolean;    south?: boolean;    eastSouth?: boolean;    east?: boolean;}

  • Details:

    The object of handlers that should be visible or hidden.

    For example if you pass the following object to the current prop, only handlers at corners will be visible

    {    eastNorth: true,    north: false,    westNorth: true,    west: false,    westSouth: true,    south: false,    eastSouth: true,    east: false,}

handlerClassNames#

  • Type: Object

    {    default?: string;    hover?: string;    disabled?: string;    north?: string;    westNorth?: string;    west?: string;    westSouth?: string;    south?: string;    eastSouth?: string;    east?: string;}

  • Details:

    The object of custom handler classes.

handlerWrapperClassNames#

  • Type: Object

    {    default?: string;    hover?: string;    disabled?: string;    north?: string;    westNorth?: string;    west?: string;    westSouth?: string;    south?: string;    eastSouth?: string;    east?: string;}

  • Details:

    The object of custom handler wrapper classes.

lineComponent#

  • Type: Component

  • Default: SimpleLine

  • Details:

    The line component.

lines#

  • Type:

    {    north?: boolean;    west?: boolean;    south?: boolean;    east?: boolean;}

  • Details:

    The object of lines that should be visible or hidden.

    For example if you pass the following object to the current prop, only top and bottom lines will be visible

    {    north: true,    west: false,    south: true,    east: false,}

lineClassNames#

  • Type:

    {    default: string;    hover: string;    north: string;    west: string;    south: string;    east: string;}

  • Details:

    The object of custom lines classes.

lineWrapperClassNames#

  • Type:

    {    default: string;    hover: string;    north: string;    west: string;    south: string;    east: string;}

  • Details:

    The object of custom lines wrapper classes.

Service props#

Remember!

You should not pass this props to stencil, they are passed by the cropper itself

cropper#

image#

  • Type:

    interface CropperImage {    src: string;    revoke: boolean;    transforms: Transforms;    arrayBuffer: ArrayBuffer | null;    width: number;    height: number;}
    interface Transforms {    rotate: number;    flip: {        horizontal: boolean;        vertical: boolean;    };}

  • Details:

    The object with the current cropper image.