Image Crop component for React app based on Moveable lib (

Usage no npm install needed!

<script type="module">
  import reactImageCropping from '';



Image Crop component for React app based on Moveable


if you use npm

npm install --save react-image-crop


yarn add react-image-crop


import ImageCrop from "react-image-crop";

class MyApp extends React.Component {
    state = { newImage: null }
    render () {
        return <ImageCrop 
            onChange={({ target }) => this.setState({ newImage: target.result })}
            onDelete={() => this.setState({ newImage: null })}
            onSubmit={() => this.savePhoto()}

without photo with photo


Name Default value Required Description
onChange func: (event) => {} yes event on change photo
onClose func: () => {} no function on closing crop
onDelete func: () => {} no function on delete photo
onSubmit func: (event, boundingImageRects) => {} yes function on click "submit"
imageUrl string no image path for crop window
canDrag bool: true no can you drag image
canClose bool: false no can you close crop
canDelete bool: false no can you delete image
className string: none no regular className property for react component
closeIcon string no url of custom close icon
deleteIcon string: none no url of custom delete icon
deleteLabel string: "Delete" no label for delete button
isLoading bool: false no flag if you need loading spinner
plugIcon string no image if imageUrl is absent
submitLabel string: "Save" no label for submit button
uploadPhotoLabel string: "Upload photo" no label for upload photo button

Using libraries

  • jquery
  • prop-types
  • react-moveable


Copyright (c) 2019 Maria Lobareva Licensed under the The MIT License (MIT).