react-bootstrap-image-cropper

0.3.0 • Public • Published

React Bootstrap Image Cropper

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

Introduction

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

Demo

Example

demo

Installation

npm i react-bootstrap-image-cropper

You also need the depended packages:

npm i react react-bootstrap

API

Options with * prefix are recommended to set.

Common Options

  • 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'

ImageCropper specific Options

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

HiddenCropper specific Options

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

License

MIT

Package Sidebar

Install

npm i react-bootstrap-image-cropper

Weekly Downloads

7

Version

0.3.0

License

MIT

Unpacked Size

47.1 kB

Total Files

17

Last publish

Collaborators

  • zhaoyao91