react-image-cropping

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).