react-image-crop

Image Crop component for React app based on Moveable

Install

if you use npm

npm install --save react-image-crop

or

yarn add react-image-crop

Usage

import ImageCrop from "react-image-crop";

class MyApp extends React.Component {
    state = { newImage: null }
    
    render () {
        return <ImageCrop 
            canDelete
            className="myapp-image-crop"
            imageUrl={this.state.newImage}
            onChange={({ target }) => this.setState({ newImage: target.result })}
            onDelete={() => this.setState({ newImage: null })}
            onSubmit={() => this.savePhoto()}
        />
    }
}

Params

|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

License

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