How to use react-image-crop - 8 common examples

static getDerivedStateFromProps(nextProps, state) {
    if (state.crop) {
      // update crop for editor container aspect-ratio change
      return {
        crop: makeAspectCrop(
          {
            ...state.crop,
            aspect: nextProps.aspectRatio
          },
          state.imageAspectRatio
        )
      }
    }
    return null
  }

onImageLoaded = image => {
    const { cropShape } = this.props
    let { crop } = this.props
    // when the shape is a circle the aspect should be 1
    if (cropShape === 'circle') {
      crop = { ...crop, aspect: 1 }
    }
    const cropProperties = makeAspectCrop(
      {
        ...crop,
      },
      image.width / image.height
    )

    const pixelToCrop = getPixelCrop(image, cropProperties)
    this.setState({
      crop: cropProperties,
      originalImage: image,
      pixelCrop: pixelToCrop,
    })
  }

onImageLoaded = image => {
    const { cropShape } = this.props
    let { crop } = this.props
    // when the shape is a circle the aspect should be 1
    if (cropShape === 'circle') {
      crop = { ...crop, aspect: 1 }
    }
    const cropProperties = makeAspectCrop(
      {
        ...crop,
      },
      image.width / image.height
    )

    const pixelToCrop = getPixelCrop(image, cropProperties)
    this.setState({
      crop: cropProperties,
      originalImage: image,
      pixelCrop: pixelToCrop,
    })
  }

onImageLoaded(image) {
    const imageAspectRatio = image.width / image.height
    const initialCrop = {
      x: 0,
      y: 0,
      width: 100,
      aspect: this.props.aspectRatio
    }

    this.setState({
      imageAspectRatio,
      crop: makeAspectCrop(initialCrop, imageAspectRatio)
    })
  }

onImageLoaded = (image) => {
    const crop = makeAspectCrop({
      x: 0,
      y: 0,
      aspect: 16 / 9,
      width: 50,
    }, image.width / image.height);

    const pixelCrop = {
      x: Math.round(image.naturalWidth * (crop.x / 100)),
      y: Math.round(image.naturalHeight * (crop.y / 100)),
      width: Math.round(image.naturalWidth * (crop.width / 100)),
      height: Math.round(image.naturalHeight * (crop.height / 100)),
    };

    this.renderCropPreview(image, pixelCrop);

    this.setState({ crop });

private onImageLoaded = (image: HTMLImageElement) => {
    const { imageRatio } = this.props;

    this.setState({
      crop: ReactCrop.makeAspectCrop({
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        aspect: imageRatio,
      }, image.naturalWidth / image.naturalHeight)
    });
  }

onImageLoaded = image => {
    this.setState({
      crop: makeAspectCrop({
        x: 25,
        y: 25,
        aspect: 1 / 1,
        width: 227,
      }, 
      image.width / image.height), 
      image: image,
    });
  }

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
const ReactCrop = typeof window !== 'undefined' ? require('react-image-crop').default : null;

import {
    Row,
    Col,
    Button
} from './../../components';

const _document = typeof document !== 'undefined' ? document : null;
const _window = typeof window !== 'undefined' ? window : null;

const initialPosition = {
    x: 10,
    y: 10,
    width: 80,
    height: 80,
}