Natively Pronounced Mandarin

    @beisen/cropping

    0.0.1 • Public • Published

    rc-cropping


    React Cropping Component

    NPM version build status Test coverage gemnasium deps node version npm download

    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

    rc-cropping

    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

    name type default description
    className String additional css class of root dom node
    getSpinContent Function() => React.Component spin content of Cropper
    renderModal Function() => React.Component Modal Render of Component, you can pass any React Component to replace it.
    locale 'en-US' | 'zh-CN' i18n locale.
    circle boolean false 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.

    Test Case

    npm test
    npm run chrome-test
    

    Coverage

    npm run coverage
    

    open coverage/ dir

    License

    rc-cropping is released under the MIT license.

    Install

    npm i @beisen/cropping

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    none

    Last publish

    Collaborators

    • albert-zhang
    • liugenpeng
    • beisencorp
    • lgm
    • neozw