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