### Development Installation and Start

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Commands to install dependencies and start the development server for the react-easy-crop project.

```shell
pnpm install
pnpm start
```

--------------------------------

### Video Cropper Example

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/video.mdx

This example shows how to integrate the cropper component for video media. It utilizes the same controls as image cropping.

```javascript
import React, { useState, useCallback } from 'react';
import Cropper from 'react-easy-crop';
import { getCroppedImg } from './cropUtils'; // Assume this is a utility for cropping

const VideoCropper = ({ videoUrl }) => {
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);

  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels);
  }, []);

  const showCroppedVideo = async () => {
    try {
      // In a real application, you would use croppedAreaPixels to extract
      // the relevant part of the video. This is more complex than images
      // and might involve server-side processing or advanced browser APIs.
      // For demonstration, we'll just log the pixels.
      console.log('Cropped Area Pixels:', croppedAreaPixels);
      alert('Cropping video is complex. See console for details.');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <div style={{ position: 'relative', width: 400, height: 300 }}>
        <Cropper
          image={videoUrl} // For video, this would be a URL or data URL
          crop={crop}
          zoom={zoom}
          aspect={4 / 3}
          onCropChange={setCrop}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
          cropShape="rect" // or 'round'
        />
      </div>
      <button onClick={showCroppedVideo}>Show Cropped Video</button>
    </div>
  );
};

export default VideoCropper;

```

--------------------------------

### Cropped Output Example

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/output.mdx

This example shows how to use `croppedAreaPixels` to render the selected part of the image. It requires the `CropperExample` component and `outputExampleCode`.

```javascript
import CropperExample from '../../src/components/CropperExample'
import ExampleFrame from '../../src/components/ExampleFrame'
import { outputExampleCode } from '../../src/examples/code'

<ExampleFrame
  code={outputExampleCode}
  description="Use croppedAreaPixels to render the selected part of the image."
>
  <CropperExample output />
</ExampleFrame>
```

--------------------------------

### Basic React Cropper Component Setup

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/getting-started.md

This example shows a basic React component using the Cropper. Ensure the parent container has relative positioning and a defined size. The component manages crop and zoom states.

```tsx
import { useState } from 'react'
import Cropper from 'react-easy-crop'

export default function Demo({ image }) {
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)

  function onCropComplete(croppedArea, croppedAreaPixels) {
    console.log(croppedArea, croppedAreaPixels)
  }

  return (
    <div style={{ position: 'relative', width: 400, height: 300 }}>
      <Cropper
        image={image}
        crop={crop}
        zoom={zoom}
        aspect={4 / 3}
        onCropChange={setCrop}
        onCropComplete={onCropComplete}
        onZoomChange={setZoom}
      />
    </div>
  )
}
```

--------------------------------

### Upload and Crop Image Example

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/upload.mdx

This example demonstrates selecting a local image file and cropping it directly in the browser using React Easy Crop. It requires the CropperExample component and ExampleFrame for rendering.

```javascript
import CropperExample from '../../src/components/CropperExample'
import ExampleFrame from '../../src/components/ExampleFrame'
import { uploadExampleCode } from '../../src/examples/code'

<ExampleFrame
  code={uploadExampleCode}
  description="Select a local image and crop it in the browser."
>
  <CropperExample upload output />
</ExampleFrame>
```

--------------------------------

### Basic Image Cropper

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/basic.mdx

This example shows how to use the Cropper component with controlled crop and zoom. It requires importing the CropperExample and ExampleFrame components, along with the basic example code.

```javascript
import CropperExample from '../../src/components/CropperExample'
import ExampleFrame from '../../src/components/ExampleFrame'
import { basicExampleCode } from '../../src/examples/code'

<ExampleFrame
  code={basicExampleCode}
  description="Image cropper with controlled crop and zoom."
>
  <CropperExample />
</ExampleFrame>
```

--------------------------------

### Install React Easy Crop with npm

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/getting-started.md

Use this command to add the react-easy-crop package to your project when using npm.

```shell
npm install react-easy-crop --save
```

--------------------------------

### Install React Easy Crop with pnpm

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/getting-started.md

Use this command to add the react-easy-crop package to your project when using pnpm.

```shell
pnpm add react-easy-crop
```

--------------------------------

### Round Crop Area Example

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/round.mdx

This example shows how to configure React Easy Crop for a round crop shape, suitable for avatar images. It disables the grid lines and sets a 1:1 aspect ratio.

```javascript
import React, { useState, useCallback } from 'react'
import Cropper from 'react-easy-crop'
import { getCroppedImg } from './cropUtils' // Assuming you have this utility

const App = () => {
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)

  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels)
  }, [])

  return (
    <div>
      <div style={{ position: 'relative', width: 300, height: 300 }}>
        <Cropper
          image='path/to/your/image.jpg' // Replace with your image path
          crop={crop}
          zoom={zoom}
          aspect={1 / 1}
          onCropChange={setCrop}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
          cropShape='round'
          showGrid={false}
        />
      </div>
      <div style={{ marginTop: 20 }}>
        <button onClick={async () => {
          try {
            const croppedImage = await getCroppedImg('path/to/your/image.jpg', croppedAreaPixels)
            console.log('cropped image', croppedImage)
          } catch (e) {
            console.error(e)
          }
        }}>Get Cropped Image</button>
      </div>
    </div>
  )
}

export default App

```

--------------------------------

### Basic Usage of React Easy Crop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Demonstrates the basic setup for the Cropper component. Ensure the parent element has `position: relative` to contain the absolutely positioned Cropper.

```javascript
import { useState, useCallback } from 'react'
import Cropper from 'react-easy-crop'

const Demo = () => {
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)

  const onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels)
  }

  return (
    <Cropper
      image={yourImage}
      crop={crop}
      zoom={zoom}
      aspect={4 / 3}
      onCropChange={setCrop}
      onCropComplete={onCropComplete}
      onZoomChange={setZoom}
    />
  )
}
```

--------------------------------

### Restore Crop Example Code

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/examples/restore.mdx

This code snippet shows how to save the cropped area to localStorage and restore it when the component loads. It utilizes the `restoreExampleCode` variable, likely containing the necessary logic for this functionality.

```javascript
import React, { useState, useEffect } from 'react';
import Cropper from 'react-easy-crop';
import { getCroppedImg } from './cropUtils'; // Assuming you have a utility for cropping

const RestoreCropExample = () => {
  const [imageSrc, setImageSrc] = useState(null);
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);

  useEffect(() => {
    // Load image source (e.g., from an input or a predefined URL)
    setImageSrc('/path/to/your/image.jpg'); // Replace with your image source

    // Restore crop settings from localStorage
    const savedCrop = localStorage.getItem('easyCropState');
    if (savedCrop) {
      const parsedCrop = JSON.parse(savedCrop);
      setCrop(parsedCrop.crop);
      setZoom(parsedCrop.zoom);
      setCroppedAreaPixels(parsedCrop.croppedAreaPixels);
    }
  }, []);

  const onCropComplete = (croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels);
  };

  const saveCrop = () => {
    localStorage.setItem('easyCropState', JSON.stringify({ crop, zoom, croppedAreaPixels }));
  };

  return (
    <div>
      <div className="crop-container">
        <Cropper
          image={imageSrc}
          crop={crop}
          zoom={zoom}
          aspect={4 / 3}
          onCropChange={setCrop}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
        />
      </div>
      <button onClick={saveCrop}>Save Crop</button>
      {/* You might want a button to trigger cropping and display the result */}
    </div>
  );
};

export default RestoreCropExample;

```

--------------------------------

### React Cropper Component Usage

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Example of using the Cropper component in React, including state management for crop and zoom, and handling media loaded events to adapt zoom.

```jsx
const CONTAINER_HEIGHT = 300

const CroppedImage = ({ image }) => {
  const [crop, onCropChange] = React.useState({ x: 0, y: 0 })
  const [zoom, onZoomChange] = React.useState(1)
  return (
    <Cropper
      image={image}
      crop={crop}
      zoom={zoom}
      onCropChange={onCropChange}
      onZoomChange={onZoomChange}
      onMediaLoaded={(mediaSize) => {
        // Adapt zoom based on media size to fit max height
        onZoomChange(CONTAINER_HEIGHT / mediaSize.naturalHeight)
      }}
    />
  )
}
```

--------------------------------

### Import Crop Calculation Helpers

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/advanced.md

Import helper functions for calculating crop values manually when needed. These functions assist in deriving crop and zoom parameters from either percentage or pixel-based areas.

```ts
import {
  getInitialCropFromCroppedAreaPercentages,
  getInitialCropFromCroppedAreaPixels,
} from 'react-easy-crop'
```

--------------------------------

### onMediaLoaded

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

This callback is executed once the media has successfully loaded, providing the media's dimensions.

```APIDOC
## onMediaLoaded

### Description
Called when the media loads.

### Arguments
- **mediaSize** (object) - An object containing the natural dimensions of the loaded media.

### Usage Example
```tsx
<Cropper
  onMediaLoaded={(mediaSize) => {
    setZoom(300 / mediaSize.naturalHeight)
  }}
/>
```
```

--------------------------------

### getInitialCropFromCroppedAreaPercentages

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Advanced usage method to calculate initial crop and zoom values based on desired cropped area percentages.

```APIDOC
## getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages: Area, mediaSize: MediaSize, rotation: number, cropSize: Size, minZoom: number, maxZoom: number)

### Description
[Advanced Usage] Used to calculate values for crop and zoom based on a desired `croppedAreaPercentages` value.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **croppedAreaPercentages** (Area) - Required - The desired cropped area in percentages.
- **mediaSize** (MediaSize) - Required - The size of the media.
- **rotation** (number) - Required - The rotation of the media.
- **cropSize** (Size) - Required - The size of the crop container.
- **minZoom** (number) - Required - The minimum allowed zoom level.
- **maxZoom** (number) - Required - The maximum allowed zoom level.

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Restore Saved Crop with Percentages

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/advanced.md

Use `initialCroppedAreaPercentages` to restore a previously saved crop state. This is preferred over pixel values to avoid rounding discrepancies.

```tsx
<Cropper
  image={image}
  crop={crop}
  zoom={zoom}
  initialCroppedAreaPercentages={{
    x: 12,
    y: 8,
    width: 60,
    height: 45,
  }}
  onCropChange={setCrop}
  onZoomChange={setZoom}
/>
```

--------------------------------

### onMediaLoaded

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

This function is called when media (image or video) is loaded. It receives a mediaSize object containing width, height, naturalWidth, and naturalHeight.

```APIDOC
## onMediaLoaded

### Description
Called when media gets loaded. Gets passed an `mediaSize` object like `{ width, height, naturalWidth, naturalHeight }`.

### Parameters
This prop is a function that accepts one argument:
- **mediaSize** (object) - An object containing media dimensions: `{ width, height, naturalWidth, naturalHeight }`.
```

--------------------------------

### getInitialCropFromCroppedAreaPixels

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Advanced usage method to calculate initial crop and zoom values based on desired cropped area in pixels.

```APIDOC
## getInitialCropFromCroppedAreaPixels(croppedAreaPixels: Area, mediaSize: MediaSize, rotation: number, cropSize: Size, minZoom: number, maxZoom: number)

### Description
[Advanced Usage] See `getInitialCropFromCroppedAreaPercentages`.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **croppedAreaPixels** (Area) - Required - The desired cropped area in pixels.
- **mediaSize** (MediaSize) - Required - The size of the media.
- **rotation** (number) - Required - The rotation of the media.
- **cropSize** (Size) - Required - The size of the crop container.
- **minZoom** (number) - Required - The minimum allowed zoom level.
- **maxZoom** (number) - Required - The maximum allowed zoom level.

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### React Easy Crop Component Props

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/props.md

This section lists and describes all the available props for the React Easy Crop component. These props allow for customization of the cropping behavior, appearance, and interaction.

```APIDOC
## React Easy Crop Component Props

### Description
This table outlines the props available for the React Easy Crop component, detailing their types, whether they are required, and their purpose.

### Props Table
| Prop | Type | Required | Description |
| --- | --- | :-: | --- |
| `image` | `string` |  | Image to crop. `image` or `video` is required. |
| `video` | `string \| Array<{ src: string; type?: string }>` |  | Video to crop. `image` or `video` is required. |
| `crop` | `{ x: number; y: number }` | yes | Media position. `{ x: 0, y: 0 }` centers the media under the cropper. |
| `zoom` | `number` |  | Zoom between `minZoom` and `maxZoom`. Defaults to `1`. |
| `rotation` | `number` |  | Rotation in degrees. Defaults to `0`. |
| `aspect` | `number` |  | Crop area ratio. Defaults to `4 / 3`. |
| `minZoom` | `number` |  | Minimum zoom. Defaults to `1`. |
| `maxZoom` | `number` |  | Maximum zoom. Defaults to `3`. |
| `zoomWithScroll` | `boolean` |  | Enable scroll zoom. Defaults to `true`. |
| `cropShape` | `'rect' \| 'round'` |  | Crop area shape. Defaults to `'rect'`. |
| `cropSize` | `{ width: number; height: number }` |  | Fixed crop area size in pixels. Prefer `aspect` unless you really need fixed dimensions. |
| `showGrid` | `boolean` |  | Show third-line grid. Defaults to `true`. |
| `roundCropAreaPixels` | `boolean` |  | Round crop area dimensions to integer pixels. Defaults to `false`. |
| `zoomSpeed` | `number` |  | Multiplies zoom changes. Defaults to `1`. |
| `objectFit` | `'contain' \| 'cover' \| 'horizontal-cover' \| 'vertical-cover'` |  | Controls how the media fits the cropper. Defaults to `'contain'`. |
| `restrictPosition` | `boolean` |  | Restrict media position to cropper boundaries. Useful when `zoom < 1`. |
| `initialCroppedAreaPercentages` | `{ width: number; height: number; x: number; y: number }` |  | Restore a crop from a previous `croppedArea` value. Preferred over pixels. |
| `initialCroppedAreaPixels` | `{ width: number; height: number; x: number; y: number }` |  | Restore a crop from a previous `croppedAreaPixels` value. |
| `transform` | `string` |  | Custom CSS transform for the media. |
| `style` | `{ containerStyle?: object; mediaStyle?: object; cropAreaStyle?: object }` |  | Inline style overrides. |
| `classes` | `{ containerClassName?: string; mediaClassName?: string; cropAreaClassName?: string }` |  | Custom class names. |
| `mediaProps` | `object` |  | Props passed to the image or video element. |
| `cropperProps` | `object` |  | Props passed to the cropper container. |
| `disableAutomaticStylesInjection` | `boolean` |  | Disable automatic CSS injection. |
| `setCropperRef` | `(ref: React.RefObject<HTMLDivElement>) => void` |  | Receives the cropper ref. |
| `setImageRef` | `(ref: React.RefObject<HTMLImageElement>) => void` |  | Receives the image ref. |
| `setVideoRef` | `(ref: React.RefObject<HTMLVideoElement>) => void` |  | Receives the video ref. |
| `setMediaSize` | `(size: MediaSize) => void` |  | Exposes media size for advanced restore helpers. |
| `setCropSize` | `(size: Size) => void` |  | Exposes crop size for advanced restore helpers. |
| `nonce` | `string` |  | Nonce added to the injected style tag. |
| `keyboardStep` | `number` |  | Pixels moved per arrow key press. Defaults to `1`. |
```

--------------------------------

### showGrid

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Controls the visibility of the grid overlay on the cropping area.

```APIDOC
## showGrid

### Description

Whether to show or not the grid (third-lines). Defaults to `true`.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### keyboardStep

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Determines the pixel movement of the crop area with each arrow key press during keyboard navigation.

```APIDOC
## keyboardStep

### Description
Number of pixels the crop area moves with each press of an arrow key when using keyboard navigation. Defaults to 1.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### setVideoRef

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

A callback function that receives the video element's ref when the component mounts, allowing parent components to access it.

```APIDOC
## setVideoRef

### Description
Called when the component mounts, if present. Used to set the value of the video ref object in the parent component.

### Parameters
This prop is a function that accepts one argument:
- **ref** (React.RefObject<HTMLVideoElement>) - A ref object pointing to the video element.
```

--------------------------------

### onCropAreaChange

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function triggered for all user interactions during the cropping process. It provides the coordinates and dimensions of the cropped area in both percentages and pixels.

```APIDOC
## onCropAreaChange(croppedArea, croppedAreaPixels)

### Description
This callback is triggered for all user interactions with the crop area. It provides the coordinates and dimensions of the cropped area in percentages and pixels. It is identical to `onCropComplete` but is triggered more frequently.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **croppedArea** (object) - Required - Coordinates and dimensions of the cropped area in percentage of the media dimension. Shape: `{ x: number, y: number, width: number, height: number }`
- **croppedAreaPixels** (object) - Required - Coordinates and dimensions of the cropped area in pixels. Shape: `{ x: number, y: number, width: number, height: number }`

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### onCropComplete

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Invoked when the user finishes moving or zooming the media. It provides the final cropped area in both percentage and pixel formats.

```APIDOC
## onCropComplete

### Description
Called when the user stops moving or zooming the media.

### Arguments
- **croppedArea** (object) - The cropped area in percentages.
- **croppedAreaPixels** (object) - The cropped area in pixels.

Both arguments have the shape:
```js
{
  x: number,
  y: number,
  width: number,
  height: number,
}
```

### Usage Example
```tsx
function onCropComplete(croppedArea, croppedAreaPixels) {
  saveCrop(croppedArea)
  renderPreview(croppedAreaPixels)
}
```
```

--------------------------------

### setMediaSize

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Exposes the mediaSize value for use with initial crop calculation functions.

```APIDOC
## setMediaSize

### Description
Used to expose the `mediaSize` value for use with the `getInitialCropFromCroppedAreaPixels` and `getInitialCropFromCroppedAreaPercentages` functions.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Media Load Callback

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

onMediaLoaded is invoked when the media asset has finished loading, providing its natural dimensions.

```tsx
<Cropper
  onMediaLoaded={(mediaSize) => {
    setZoom(300 / mediaSize.naturalHeight)
  }}
/>
```

--------------------------------

### onCropComplete Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function invoked when the user finishes moving the media or stops zooming. It provides the cropped area details in percentages and pixels.

```APIDOC
## onCropComplete Prop

### Description
Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels (rounded to the nearest integer).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onCropComplete** (Function) - Required - Callback function.

### Request Example
None

### Response
None
```

--------------------------------

### Handling Crop Completion

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

onCropComplete is called when the user finishes interacting with the crop. Use it to save the crop or render a preview.

```tsx
function onCropComplete(croppedArea, croppedAreaPixels) {
  saveCrop(croppedArea)
  renderPreview(croppedAreaPixels)
}
```

--------------------------------

### objectFit Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Specifies how the image is shown in the cropper. Options include 'contain', 'cover', 'horizontal-cover', or 'vertical-cover'. Defaults to 'contain'.

```APIDOC
## objectFit Prop

### Description
Specifies how the image is shown in the cropper.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **objectFit** (string) - Required - 'contain', 'cover', 'horizontal-cover' or 'vertical-cover'. Defaults to "contain".

### Request Example
None

### Response
None
```

--------------------------------

### onCropSizeChange Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function that is triggered when there is a change in either the width or height of the crop size. It receives the new crop size object.

```APIDOC
## onCropSizeChange Prop

### Description
Called when a change in either the cropSize width or the cropSize height occurs.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onCropSizeChange** (Function) - Required - Callback function with signature `cropSize => void`.

### Request Example
None

### Response
None
```

--------------------------------

### onCropAreaChange

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Similar to `onCropComplete`, this callback is triggered during interaction, providing updates on the crop area as the user interacts, rather than waiting for the interaction to end.

```APIDOC
## onCropAreaChange

### Description
Same arguments as `onCropComplete`, but called during interaction instead of waiting for the interaction to end.
```

--------------------------------

### onCropComplete

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function triggered when the cropping is complete. It provides the coordinates and dimensions of the cropped area in both percentages and pixels.

```APIDOC
## onCropComplete(croppedArea, croppedAreaPixels)

### Description
This callback is used to save the cropped area of the media. It receives the coordinates and dimensions of the cropped area in percentages and pixels.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **croppedArea** (object) - Required - Coordinates and dimensions of the cropped area in percentage of the media dimension. Shape: `{ x: number, y: number, width: number, height: number }`
- **croppedAreaPixels** (object) - Required - Coordinates and dimensions of the cropped area in pixels. Shape: `{ x: number, y: number, width: number, height: number }`

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### nonce

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

The nonce to add to the style tag when styles are auto-injected.

```APIDOC
## nonce

### Description
The nonce to add to the style tag when the styles are auto injected.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### minZoom

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Sets the minimum zoom level for the media. This prop controls how much the user can zoom out.

```APIDOC
## minZoom

### Description

Minimum zoom of the media. Defaults to 1.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### Interaction Gateways

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Use onWheelRequest and onTouchRequest to conditionally allow or block specific user interactions based on event properties.

```tsx
<Cropper
  onWheelRequest={(event) => event.ctrlKey}
  onTouchRequest={(event) => event.touches.length > 1}
/>
```

--------------------------------

### onRotationChange

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

This callback fires when the rotation of the media changes, whether through user gestures or controlled UI elements.

```APIDOC
## onRotationChange

### Description
Called when rotation changes through gestures or controlled UI.

### Usage
```tsx
<Cropper rotation={rotation} onRotationChange={setRotation} />
```
```

--------------------------------

### onCropChange Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function that is called every time the crop is changed. It receives the current crop object as an argument.

```APIDOC
## onCropChange Prop

### Description
Called every time the crop is changed. Use it to update your `crop` state.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onCropChange** (Function) - Required - Callback function with signature `crop => void`.

### Request Example
None

### Response
None
```

--------------------------------

### setCropSize

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Exposes the cropSize value for use with initial crop calculation functions.

```APIDOC
## setCropSize

### Description
Used to expose the `cropSize` value for use with the `getInitialCropFromCroppedAreaPixels` and `getInitialCropFromCroppedAreaPercentages` functions.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### cropSize

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Specifies the exact dimensions of the crop area in pixels. It's generally recommended to use the `aspect` prop instead for automatic calculation.

```APIDOC
## cropSize

### Description

Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. **You should probably not use this option and should rely on aspect instead. See https://github.com/ValentinH/react-easy-crop/issues/186.**

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### Interaction Gates

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Callbacks like `onWheelRequest` and `onTouchRequest` allow developers to conditionally allow or block specific user interactions based on event data.

```APIDOC
## Interaction Gates

### onWheelRequest

### Description
Use `onWheelRequest` to allow or block wheel interactions.

### Usage Example
```tsx
<Cropper
  onWheelRequest={(event) => event.ctrlKey}
/>
```

### onTouchRequest

### Description
Use `onTouchRequest` to allow or block touch interactions.

### Usage Example
```tsx
<Cropper
  onTouchRequest={(event) => event.touches.length > 1}
/>
```

### onInteractionStart & onInteractionEnd

### Description
`onInteractionStart` and `onInteractionEnd` fire around wheel, touch, mouse, and arrow-key interactions.
```

--------------------------------

### setImageRef

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

A callback function that receives the image element's ref when the component mounts, allowing parent components to access it.

```APIDOC
## setImageRef

### Description
Called when the component mounts, if present. Used to set the value of the image ref object in the parent component.

### Parameters
This prop is a function that accepts one argument:
- **ref** (React.RefObject<HTMLImageElement>) - A ref object pointing to the image element.
```

--------------------------------

### transform Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

A CSS transform string to apply to the image within the editor. Defaults to a translation, rotation, and scale based on provided props.

```APIDOC
## transform Prop

### Description
CSS transform to apply to the image in the editor.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **transform** (string) - Optional - Defaults to `translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom})`.

### Request Example
None

### Response
None
```

--------------------------------

### onCropChange

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

This callback is invoked every time the crop position changes. It is intended to be used for updating the controlled `crop` state of the component.

```APIDOC
## onCropChange

### Description
Called every time the crop position changes. Use it to update controlled `crop` state.

### Usage
```tsx
<Cropper crop={crop} onCropChange={setCrop} />
```
```

--------------------------------

### maxZoom

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Sets the maximum zoom level for the media. This prop controls how much the user can zoom in.

```APIDOC
## maxZoom

### Description

Maximum zoom of the media. Defaults to 3.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### Controlled Crop State Update

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Use onCropChange to update the controlled crop state when the crop position changes due to user gestures.

```tsx
<Cropper crop={crop} onCropChange={setCrop} />
```

--------------------------------

### zoomWithScroll

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Enables or disables zooming functionality using the mouse scroll wheel.

```APIDOC
## zoomWithScroll

### Description

Enable zoom by scrolling. Defaults to `true`.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### Apply CSS Classes

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/styling.md

Use the `classes` prop to assign custom CSS class names to the cropper's internal elements. This provides more control for complex styling scenarios.

```tsx
<Cropper
  classes={{
    containerClassName: 'cropper',
    cropAreaClassName: 'cropper-area',
    mediaClassName: 'cropper-media',
  }}
/>
```

--------------------------------

### onWheelRequest

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

This function can be used to cancel a zoom with wheel request by returning false. It receives the WheelEvent.

```APIDOC
## onWheelRequest

### Description
Can be used to cancel a zoom with wheel request by returning `false`.

### Parameters
This prop is a function that accepts one argument:
- **e** (WheelEvent) - The wheel event object. Returning `false` will cancel the zoom request.
```

--------------------------------

### onZoomChange Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function that is called every time the zoom level is changed. It receives the current zoom value as an argument.

```APIDOC
## onZoomChange Prop

### Description
Called every time the zoom is changed. Use it to update your `zoom` state.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onZoomChange** (Function) - Required - Callback function with signature `zoom => void`.

### Request Example
None

### Response
None
```

--------------------------------

### onRotationChange Prop

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Callback function that is called every time the rotation is changed, typically through mobile or multi-finger gestures. It receives the current rotation value.

```APIDOC
## onRotationChange Prop

### Description
Called every time the rotation is changed (with mobile or multi-fingers gestures). Use it to update your `rotation` state.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **onRotationChange** (Function) - Required - Callback function with signature `rotation => void`.

### Request Example
None

### Response
None
```

--------------------------------

### Apply Inline Styles

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/styling.md

Use the `style` prop to apply inline styles to different parts of the cropper component. This allows for quick overrides of default styles.

```tsx
<Cropper
  style={{
    containerStyle: { backgroundColor: '#111' },
    cropAreaStyle: { border: '2px solid white' },
    mediaStyle: { opacity: 0.95 },
  }}
/>
```

--------------------------------

### setCropperRef

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

A callback function that receives the cropper's HTMLDivElement ref when the component mounts, allowing parent components to access it.

```APIDOC
## setCropperRef

### Description
Called when the component mounts, if present. Used to set the value of the cropper ref object in the parent component.

### Parameters
This prop is a function that accepts one argument:
- **ref** (React.RefObject<HTMLDivElement>) - A ref object pointing to the cropper's HTMLDivElement.
```

--------------------------------

### onZoomChange

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

This callback is triggered whenever the zoom level is altered. It is designed to facilitate the update of the controlled `zoom` state.

```APIDOC
## onZoomChange

### Description
Called every time zoom changes. Use it to update controlled `zoom` state.

### Usage
```tsx
<Cropper zoom={zoom} onZoomChange={setZoom} />
```
```

--------------------------------

### Controlled Rotation State Update

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Use onRotationChange to update the controlled rotation state when the media's rotation changes.

```tsx
<Cropper rotation={rotation} onRotationChange={setRotation} />
```

--------------------------------

### onInteractionEnd

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

This function is called every time a user ends an interaction event such as wheel, touch, mousedown, or keydown (for arrow keys only).

```APIDOC
## onInteractionEnd

### Description
Called every time a user ends a wheel, touch, mousedown or keydown (for arrow keys only) event.

### Parameters
This prop is a function and does not take any parameters.
```

--------------------------------

### disableAutomaticStylesInjection

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

A boolean prop to control whether styles are automatically injected. If disabled, the CSS file must be imported manually.

```APIDOC
## disableAutomaticStylesInjection

### Description
Whether to auto inject styles using a style tag in the document head on component mount. When disabled you need to import the css file into your application manually (style file is available in `react-easy-crop/react-easy-crop.css`). Example with sass/scss `@import "~react-easy-crop/react-easy-crop";`.

### Parameters
- **disableAutomaticStylesInjection** (boolean) - If `true`, styles are not automatically injected. Defaults to `false`.
```

--------------------------------

### Import CSS Manually

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/styling.md

If you disable automatic CSS injection, you must import the CSS file yourself. This is typically done at the top level of your application.

```tsx
import 'react-easy-crop/react-easy-crop.css'
```

--------------------------------

### Set Cropper Container Size

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/styling.md

The cropper container uses absolute positioning. To define its size, you must style its parent element. The `.cropper-wrapper` class is commonly used for this purpose.

```css
.cropper-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
}
```

--------------------------------

### Cropped Area Shape Definition

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Defines the structure of the arguments passed to onCropComplete and onCropAreaChange, representing dimensions in percentages and pixels.

```js
{
  x: number,
  y: number,
  width: number,
  height: number,
}
```

--------------------------------

### Controlled Zoom State Update

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/callbacks.md

Use onZoomChange to update the controlled zoom state when the zoom level changes.

```tsx
<Cropper zoom={zoom} onZoomChange={setZoom} />
```

--------------------------------

### Cropped Area Structure

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Defines the structure for cropped area coordinates and dimensions in percentage of media dimensions.

```javascript
const area = {
  x: number, // x/y are the coordinates of the top/left corner of the cropped area
  y: number,
  width: number, // width of the cropped area
  height: number, // height of the cropped area
}
```

--------------------------------

### Custom Media Transform CSS

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/advanced.md

Override the default media transform CSS to implement custom transformations like horizontal flips or to change the order of transform operations. This allows for greater control over image manipulation.

```css
translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom})
```

```tsx
<Cropper
  transform={
    [
      `translate(${crop.x}px, ${crop.y}px)`,
      `rotateZ(${rotation}deg)`,
      `rotateY(${flipHorizontal ? 180 : 0}deg)`,
      `scale(${zoom})`,
    ].join(' ')
  }
/>
```

--------------------------------

### roundCropAreaPixels

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Determines whether the crop area dimensions should be rounded to the nearest integer pixel.

```APIDOC
## roundCropAreaPixels

### Description

Whether to round the crop area dimensions to integer pixels. Defaults to `false`.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### cropShape

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Determines the shape of the cropping area, either a rectangle or a circle.

```APIDOC
## cropShape

### Description

Shape of the crop area. Defaults to 'rect'.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

--------------------------------

### onTouchRequest

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

This function can be used to cancel a touch request by returning false. It receives the React TouchEvent.

```APIDOC
## onTouchEvent

### Description
Can be used to cancel a touch request by returning `false`.

### Parameters
This prop is a function that accepts one argument:
- **e** (React.TouchEvent<HTMLDivElement>) - The touch event object. Returning `false` will cancel the touch request.
```

--------------------------------

### Disable Automatic Styles Injection

Source: https://github.com/valentinh/react-easy-crop/blob/main/docs/docs/styling.md

To prevent `react-easy-crop` from injecting its default CSS, set the `disableAutomaticStylesInjection` prop to `true` on the `Cropper` component.

```tsx
<Cropper disableAutomaticStylesInjection />
```

--------------------------------

### zoomSpeed

Source: https://github.com/valentinh/react-easy-crop/blob/main/README.md

Adjusts the sensitivity of the zoom action by multiplying the zoom change value.

```APIDOC
## zoomSpeed

### Description

Multiplies the value by which the zoom changes. Defaults to 1.

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Response

N/A
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.