### Install react-image-crop-component

Source: https://github.com/exelban/react-image-crop-component/blob/master/README.md

Instructions for installing the react-image-crop-component using either yarn or npm package managers.

```sh
yarn add react-image-crop-component
```

```sh
npm install react-image-crop-component --save
```

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

### Basic Image Cropping Example

Source: https://github.com/exelban/react-image-crop-component/blob/master/README.md

A complete React component example demonstrating how to use the ImageCrop component with basic props like src, setWidth, setHeight, square, border, and event handlers like onCrop.

```javascript
import React, {Component} from 'react'
import {render} from 'react-dom'
import ImageCrop from 'react-image-crop-component'
import 'react-image-crop-component/style.css'

class Demo extends Component{
    constructor(){
        super()
        this.onCropped = this._onCropped.bind(this)
    }
    render(){
        return (<div style={{width: "300px", height: "300px"}}>
            <ImageCrop src="demo.jpg"
                            setWidth={300} 
                            setHeight={300} 
                            square={false} 
                            resize={true}
                            border={"dashed #ffffff 2px"}
                            onCrop={this.onCropped}/>
        </div>)
    },
    _onCropped: function (e) {
        let image = e.image
        let image_data = e.data
    }
});

render(<Demo/>, document.getElementById('app'));
```

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

### ImageCrop Props Documentation

Source: https://github.com/exelban/react-image-crop-component/blob/master/README.md

Details the available props for the ImageCrop component, including their types, descriptions, and usage examples. Props cover image source, dimensions, aspect ratio, styling, and event callbacks.

```APIDOC
ImageCrop Props:

**src** | **string** | **REQUIRED**
  - Description: The source of the image to be cropped. Can be a URL, blob path, or base64 data.
  - Example: `<ImageCrop src="demo.jpg"/>`

**maxWidth** | **string** | **optional**
  - Description: Sets the maximum width for the crop component. Useful for controlling layout.
  - Example: `<ImageCrop maxWidth='300px' src='demo.jpg'/>`

**maxHeight** | **string** | **optional**
  - Description: Sets the maximum height for the crop component. Useful for controlling layout.
  - Example: `<ImageCrop maxHeight='300px' src='demo.jpg'/>`

**square** | **boolean** | **optional**
  - Description: If true, enforces a square aspect ratio for the cropping selection. Defaults to false.
  - Example: `<ImageCrop square={true} src='demo.jpg'/>`

**watch** | **Function** | **optional**
  - Description: A callback function that is continuously called during cropping or dragging. It receives an object containing the cropped image (base64) and cropping data (x, y, width, height).
  - Example: `<ImageCrop watch={this.watch} src='demo.jpg'/>`
  - Returns: `{ image: base64, data: { x: number, y: number, width: number, height: number } }`

**onCrop** | **Function** | **optional**
  - Description: A callback function invoked when the cropping or resizing action is completed. It passes the current crop state and pixel-converted crop data.
  - Example: `<ImageCrop onCrop={this.onCrop} src='demo.jpg'/>`
  - Returns: Same object as `watch`.

**onReset** | **Function** | **optional**
  - Description: A callback function that is triggered when the crop selection is reset to its initial state (zero dimensions).
  - Example: `<ImageCrop onReset={this.onReset} src='demo.jpg'/>`
```

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

### Importing the Component and Styles

Source: https://github.com/exelban/react-image-crop-component/blob/master/README.md

Demonstrates how to import the main JavaScript module and the CSS styles for the ImageCrop component in both CommonJS and ES6 formats.

```javascript
var ImageCrop = require('react-image-crop-component');
// or es6:
import ImageCrop from 'react-image-crop-component';
```

```javascript
require('react-image-crop-component/style.css');
// or es6:
import 'react-image-crop-component/style.css';
```

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