{"_id":"@beisen/cropping","_rev":"6-1be902e08c532f1c7f6b0865214ca80c","name":"@beisen/cropping","description":"CropViewer ui component for react","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@beisen/cropping","version":"0.0.1","description":"CropViewer ui component for react","keywords":["react","react-component","react-cropping","cropping"],"author":{"name":"xhbisme","email":"xuhaibin@beisen.com"},"files":["lib","assets/*.css"],"licenses":"MIT","main":"./lib/index","config":{"port":8002},"scripts":{"build":"rc-tools run build","gh-pages":"rc-tools run gh-pages","start":"rc-tools run server","pub":"rc-tools run pub","lint":"rc-tools run lint","karma":"rc-tools run karma","saucelabs":"rc-tools run saucelabs","test":"rc-tools run test","chrome-test":"rc-tools run chrome-test","coverage":"rc-tools run coverage"},"dependencies":{"rc-slider":"^5.2.1"},"devDependencies":{"@types/classnames":"^0.0.31","@types/react":"^0.14.44","antd":"^2.3.2","expect.js":"0.3.x","pre-commit":"1.x","rc-dialog":"^6.5.0","rc-form":"^1.0.1","rc-tools":"5.x","rc-upload":"^2.3.7","react":"15.x","react-addons-test-utils":"15.x","react-dom":"15.x"},"pre-commit":["lint"],"gitHead":"24283d7781af9e584d3ce4e2898e431e9debc246","_id":"@beisen/cropping@0.0.1","_shasum":"0386821c0c9a684d56f94b1f12c3d929877ce1e3","_from":".","_npmVersion":"3.8.3","_nodeVersion":"5.10.1","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"shasum":"0386821c0c9a684d56f94b1f12c3d929877ce1e3","tarball":"https://registry.npmjs.org/@beisen/cropping/-/cropping-0.0.1.tgz","integrity":"sha512-WRau+SISQeTLdOaQ1f0nLGn4F6EyZUlzVSJklfjIvBxwrjbD/wDoR52aQmTEsCvM2ksiMyFEb01DS/SVQATXYg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3AwIRdr82/MMkJjNv/6/EExXNM9eDi2Y6MnMW3IJH3AiEAp/1qJPemEynfNMlsXMd+Xqt2JgHVaxxCufjMx5CmSUs="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cropping-0.0.1.tgz_1509631132781_0.7071956067811698"},"directories":{}}},"readme":"# rc-cropping\n---\n\nReact Cropping Component\n\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![gemnasium deps][gemnasium-image]][gemnasium-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-cropping.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-cropping\n[travis-image]: https://img.shields.io/travis/react-component/cropping.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/cropping\n[coveralls-image]: https://img.shields.io/coveralls/react-component/cropping.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/cropping?branch=master\n[gemnasium-image]: http://img.shields.io/gemnasium/react-component/cropping.svg?style=flat-square\n[gemnasium-url]: https://gemnasium.com/react-component/cropping\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-cropping.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-cropping\n\n## Feature\n\n* Cropping pictures in facebook mode.\n* Cropping result preview.\n* Supports exporting circle and square picture.\n* I18n.\n* [FUTURE] Rotate picture.\n\n## Screenshots\n\n<img src=\"https://zos.alipayobjects.com/rmsportal/vrydErgwuwLzNpQ.png\" width=\"288\"/>\n\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Example\n\nhttp://localhost:8001/examples/\n\n\nonline example: http://react-component.github.io/cropping/\n\n## install\n\n\n[![rc-cropping](https://nodei.co/npm/rc-cropping.png)](https://npmjs.org/package/rc-cropping)\n\n\n## Usage\n\n```js\nvar Cropping = require('rc-cropping');\nvar React = require('react');\n\nReactDOM.render(<CropViewer\n  getSpinContent={() => <span>loading...</span> }\n  renderModal={() => <Dialog />}\n  circle={true}\n/>, document.getElementById('__react-content'));\n```\n\n## API\n\n### props\n\n<table class=\"table table-bordered table-striped\">\n    <thead>\n    <tr>\n        <th style=\"width: 100px;\">name</th>\n        <th style=\"width: 50px;\">type</th>\n        <th style=\"width: 50px;\">default</th>\n        <th>description</th>\n    </tr>\n    </thead>\n    <tbody>\n        <tr>\n          <td>className</td>\n          <td>String</td>\n          <td></td>\n          <td>additional css class of root dom node</td>\n        </tr>\n        <tr>\n          <td>getSpinContent</td>\n          <td>Function() => React.Component<any, any></td>\n          <td></td>\n          <td> spin content of Cropper</td>\n        </tr>\n        <tr>\n          <td>renderModal</td>\n          <td>Function() => React.Component<any, any></td>\n          <td></td>\n          <td> Modal Render of Component, you can pass any React Component to replace it.</td>\n        </tr>\n        <tr>\n          <td>locale</td>\n          <td>'en-US' | 'zh-CN'</td>\n          <td></td>\n          <td> i18n locale.</td>\n        </tr>\n        <tr>\n          <td>circle</td>\n          <td>boolean</td>\n          <td>false</td>\n          <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>\n        </tr>\n    </tbody>\n</table>\n\n\n## Test Case\n\n```\nnpm test\nnpm run chrome-test\n```\n\n## Coverage\n\n```\nnpm run coverage\n```\n\nopen coverage/ dir\n\n## License\n\nrc-cropping is released under the MIT license.\n","maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"time":{"modified":"2022-06-12T15:08:45.189Z","created":"2017-11-02T13:58:52.849Z","0.0.1":"2017-11-02T13:58:52.849Z"},"keywords":["react","react-component","react-cropping","cropping"],"author":{"name":"xhbisme","email":"xuhaibin@beisen.com"},"readmeFilename":"README.md"}