Select, crop, preview, edit, all in one!

Based on react-bootstrap modal and react-easy-crop, this package provides an all-in-one component which handles all of image selecting, cropping, previewing and editing.

All the rest left for you is to get the final file and upload it to your server.

Demo

Example

npm i react-bootstrap-image-cropper

You also need the depended packages:

npm i react react-bootstrap

Options with * prefix are recommended to set.

• inputOptions ? : object
  • * maxWidth = Infinity
  • * maxHeight = Infinity
  • mimeType = 'image/jpeg'
  • quality ? : number
• cropOptions ? : object
  • * aspect ? : number
  • maxZoom ? : number
• outputOptions ? : object
  • * maxWidth = Infinity
  • * maxHeight = Infinity
  • mimeType = 'image/jpeg'
  • quality ? : number
• displayOptions ? : object
  • title = 'Crop Image',
  • removeButtonText = 'Remove'
  • confirmButtonText = 'Confirm'

• * fileRef ? : ref // ref for cropped file
• onChange ? : (croppedFile) => void
• previewOptions ? : object
  • * width : number
  • * height : number
  • children = 'Select Image'

• * triggerRef : ref // use ref.current.trigger() to trigger hidden input
• * onCropped : (croppedFile) => void

MIT