rc-cropping

rc-cropping

React Cropping Component
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !gemnasium depsgemnasium-imagegemnasium-url !node versionnode-imagenode-url !npm downloaddownload-imagedownload-url

Feature

• Cropping pictures in facebook mode.
• Cropping result preview.
• Supports exporting circle and square picture.
• I18n.
• FUTURE Rotate picture.

Screenshots

Development

npm install
npm start

Example

http://localhost:8001/examples/
online example: http://react-component.github.io/cropping/

install

Usage

var Cropping = require('rc-cropping');
var React = require('react');

ReactDOM.render(<CropViewer
  getSpinContent={() => <span>loading...</span> }
  renderModal={() => <Dialog />}
  circle={true}
/>, document.getElementById('__react-content'));

API

props

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>className</td>
      <td>String</td>
      <td></td>
      <td>additional css class of root dom node</td>
    </tr>
    <tr>
      <td>getSpinContent</td>
      <td>Function() => React.Component<any, any></td>
      <td></td>
      <td> spin content of Cropper</td>
    </tr>
    <tr>
      <td>renderModal</td>
      <td>Function() => React.Component<any, any></td>
      <td></td>
      <td> Modal Render of Component, you can pass any React Component to replace it.</td>
    </tr>
    <tr>
      <td>locale</td>
      <td>'en-US' | 'zh-CN'</td>
      <td></td>
      <td> i18n locale.</td>
    </tr>
    <tr>
      <td>circle</td>
      <td>boolean</td>
      <td>false</td>
      <td> Croppe circle image or not. If true, you'll get a circle picture. Notice: transparent background *ONLY* supported in png file, croppe jpg file will get white background. </td>
    </tr>
    <tr>
      <td>resizer</td>
      <td>function</td>
      <td>null</td>
      <td> Cropper support custom image resize function, e.g., you can use [pica](https://github.com/nodeca/pica) to down scale your picture more perfectly </td>
    </tr>
</tbody>

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-cropping is released under the MIT license.