react-cropper
Docs
Installation
Install via npm
npm install --save react-cropper-img
You need cropper.css
in your project which is from cropperjs.
Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css
or node_modules/cropperjs/dist/cropper.css
for npm version 3.0.0
later
Changelog
Todo
- Unit test
Quick Example
;;; // see installation section above for versions of NPM older than 3.0.0// If you choose not to use import, you need to assign Cropper to default// var Cropper = require('react-cropper').default { // image in dataUrl console; } { return <Cropper ref='cropper' src='http://fengyuanchen.github.io/cropper/img/picture.jpg' style=height: 400 width: '100%' // Cropper.js options aspectRatio=16 / 9 guides=false crop=this_crop /> ; }
Options
src
- Type:
string
- Default:
null
<Cropper src='http://fengyuanchen.github.io/cropper/img/picture.jpg' />
alt
- Type:
string
- Default:
picture
crossOrigin
- Type:
string
- Default:
null
<Cropper src='http://fengyuanchen.github.io/cropper/img/picture.jpg' aspectRatio=16 / 9 guides=false crop=this_crop />
Methods
Assign a ref
attribute to use methods
{ const dataUrl = thisrefscropper; console; } { return <Cropper ref='cropper' crop=this_crop /> ; }
Build
npm run build
npm run build-example
Author
License
MIT