ImageCrop
Simple image cropper. A wrapper for react-image-crop with some default styles applied and with Dropzone component used inside.
All crop values are in percentages, and are relative to the image. All crop params are optional. If you want a fixed aspect you can omit width and/or height.
If locked prop is set to true, the user cannot create or resize a crop, but can still drag the existing crop around.
Props
children
Array<node> │ node
<Placeholder />
className
String
[Empty string]
crop
{
"aspect": "number",
"height": "number",
"width": "number",
"x": "number",
"y": "number"
}
{
height: 100,
width: 100,
x: 0,
y: 0,
aspect: null,
}
locked
Bool
false
name
String
required
onChange
Func
() => null
src
String
[Empty string]
Examples
Default Usage
Drop here or click to browse.
Fixed Aspect
Drop here or click to browse.
Accept either image url or file blob
Custom Placeholder
Any content provided as children to this component will be rendered as the placeholder
Including other components!