1.0.2 • Published 5 years ago
react-image-cropping v1.0.2
react-image-crop
Image Crop component for React app based on Moveable
Install
if you use npm
npm install --save react-image-cropor
yarn add react-image-cropUsage
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).