RectangleStencil.mdx

title	RectangleStencil
sidebar_position	2

import TOCInline from "@theme/TOCInline";

Used to display the current cropped area and change it by interaction with it.

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

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

cropper

• Type: CropperRef

• Details:

  The ref to the cropper instance.

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.