{"_id":"@aradser/react-easy-crop","_rev":"2-faac1d9de6011428d6ed5968565797aa","name":"@aradser/react-easy-crop","dist-tags":{"latest":"1.6.1"},"versions":{"1.6.0":{"name":"@aradser/react-easy-crop","version":"1.6.0","description":"A React component to crop images with easy interactions","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/ricardo-ch/react-easy-crop.git"},"author":{"name":"Ricardo.ch"},"license":"MIT","scripts":{"start":"webpack-dev-server --mode development","build":"rm -rf dist/* && yarn build:dist && yarn build:standalone","build:dist":"babel src -d dist --ignore 'src/*.test.js'","build:standalone":"webpack -p --config webpack.standalone.config.js","test":"jest && yarn e2e","unit":"jest","unit:watch":"jest --watchAll","start:ci":"webpack-dev-server --mode production","e2e":"start-server-and-test start http://localhost:3001 cy:run","e2e:ci":"start-server-and-test start:ci http://localhost:3001 cy:ci","cy:open":"cypress open","cy:run":"cypress run","cy:ci":"cypress run --record","prepublishOnly":"yarn build","precommit":"lint-staged","npm:publish":"np"},"peerDependencies":{"react":">=16.0.0","react-dom":">=16.0.0"},"dependencies":{"emotion":"^9.2.3","react-emotion":"^9.2.3"},"devDependencies":{"babel":"^6.23.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","copy-webpack-plugin":"^4.5.1","css-loader":"^0.28.11","cypress":"^3.0.1","html-webpack-plugin":"^3.2.0","husky":"^0.14.3","jest":"^23.3.0","lint-staged":"^7.2.0","np":"^3.0.4","prettier":"^1.13.5","query-string":"^6.1.0","react":"^16.4.1","react-dom":"^16.4.1","start-server-and-test":"^1.4.1","style-loader":"^0.21.0","webpack":"^4.12.0","webpack-cli":"^3.0.8","webpack-dev-server":"^3.1.4"},"lint-staged":{"*.+(js|css)":["prettier --write","git add"]},"gitHead":"a4d3f53ec22c1d423d5571cef14933bdfca76b9d","bugs":{"url":"https://github.com/ricardo-ch/react-easy-crop/issues"},"homepage":"https://github.com/ricardo-ch/react-easy-crop#readme","_id":"@aradser/react-easy-crop@1.6.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"aradser","email":"aradreg@gmail.com"},"dist":{"integrity":"sha512-CHPte5Mj9ylvqRm9ed7Gi+uA5544jaKONyXqiQZnWPxcq5E9Ar8Z4MYqGEfqK1PymL70wXsUuEprZZeWs8ShjA==","shasum":"a635c0d8c1617a75d51dcb84b262da88afa810e9","tarball":"https://registry.npmjs.org/@aradser/react-easy-crop/-/react-easy-crop-1.6.0.tgz","fileCount":9,"unpackedSize":137338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8F7WCRA9TVsSAnZWagAAP7oP/RGuDpY+Krmhe9mL82uq\nezEXmACux5tZ5+KOMPbHwAJ3JZoP7XYjOpoeEkRWrfJHB3ACHi7tSpjo2eEN\nhQ4a0v75yM0YTygEV8pVwPpcsL3lbLNi7L6p8HqILmjuIu9eSkFFp6NGTeyj\nyVAbClNOil1X50XstTH9zNN21pfLagovaPOTRyYdSPK6aEjtGZ+W/J/INH5s\n5rs7OvCpSyMOhTSsKQJOVcCfjS2dafslpDiPefqEtDegKf5dOtEb63OqJvpS\ncgq2BziiXqvyc76OxEk7NI+8prU7OrrXMY1AbTttXaADhYB9OsLVXyJhcvLA\n3Z9Wu+s1Gw4oJHy341QhnZTpepvXBqma5bSbrZqV5RttYSk1tarvS6Wef2+F\n2dXIJytgoUM8enkCLfULwadPzbwwROF536eOsQ0Z7osJtsj6pPv765+05jSP\nFJdXNmaBpyGpg69ke9qUlar1Uw666hzn4BmYxmHmOfKaI/jAqM93SRs8V0oF\nNvaVRwo91/AIZ4ohIsAJalCAgKn70JOjxj6hVuEdhup12d75+wFUMnl55cHz\nvTbpLhM3bTwbaM+NOntCNmjjhZd9pqkqzcfRrYowIyekZw5Dx0Ki7S4/YAhr\n8E13JHG3BevsVkg/+FSLNYUrnZj/RbAQGQ6d/o34tIjBxrO5KyugeckMMTs3\nLGc+\r\n=gi/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgtxDS5o/d1Po5EMHjE2uYxNuvgyoRRdIWdbWWWFxbaAiAQOz1xfmeaIIVh3ZRKA0f/OwejfBQd/QGPjQPXRUJkRg=="}]},"maintainers":[{"name":"aradser","email":"aradreg@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-easy-crop_1.6.0_1542479573369_0.5158849250370203"},"_hasShrinkwrap":false},"1.6.1":{"name":"@aradser/react-easy-crop","version":"1.6.1","description":"A React component to crop images with easy interactions","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/ricardo-ch/react-easy-crop.git"},"author":{"name":"Ricardo.ch"},"license":"MIT","scripts":{"start":"webpack-dev-server --mode development","build":"rm -rf dist/* && yarn build:dist && yarn build:standalone","build:dist":"babel src -d dist --ignore 'src/*.test.js'","build:standalone":"webpack -p --config webpack.standalone.config.js","test":"jest && yarn e2e","unit":"jest","unit:watch":"jest --watchAll","start:ci":"webpack-dev-server --mode production","e2e":"start-server-and-test start http://localhost:3001 cy:run","e2e:ci":"start-server-and-test start:ci http://localhost:3001 cy:ci","cy:open":"cypress open","cy:run":"cypress run","cy:ci":"cypress run --record","prepublishOnly":"yarn build","precommit":"lint-staged","npm:publish":"np"},"peerDependencies":{"react":">=16.0.0","react-dom":">=16.0.0"},"dependencies":{"emotion":"^9.2.3","react-emotion":"^9.2.3"},"devDependencies":{"babel":"^6.23.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","copy-webpack-plugin":"^4.5.1","css-loader":"^0.28.11","cypress":"^3.0.1","html-webpack-plugin":"^3.2.0","husky":"^0.14.3","jest":"^23.3.0","lint-staged":"^7.2.0","np":"^3.0.4","prettier":"^1.13.5","query-string":"^6.1.0","react":"^16.4.1","react-dom":"^16.4.1","start-server-and-test":"^1.4.1","style-loader":"^0.21.0","webpack":"^4.12.0","webpack-cli":"^3.0.8","webpack-dev-server":"^3.1.4"},"lint-staged":{"*.+(js|css)":["prettier --write","git add"]},"gitHead":"6f8ea70f3ef8a89dd43d45ba7a885524cec33e42","bugs":{"url":"https://github.com/ricardo-ch/react-easy-crop/issues"},"homepage":"https://github.com/ricardo-ch/react-easy-crop#readme","_id":"@aradser/react-easy-crop@1.6.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"aradser","email":"aradreg@gmail.com"},"dist":{"integrity":"sha512-oy0aUX5U2K/DyosD3fZoCZi2J3wJYAUlVYTUkgdj9BJhWWKc2WF/VWB562r+Z+u6aQvO+/U2xd8H3BRZ7+Y+aQ==","shasum":"ba4c70ee00c75351273dd28113c975f15bd06b1e","tarball":"https://registry.npmjs.org/@aradser/react-easy-crop/-/react-easy-crop-1.6.1.tgz","fileCount":9,"unpackedSize":137529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8SwzCRA9TVsSAnZWagAAqw4P/2PYb1VIXSsvfMgQEHJ0\nIU6/VUzvMSSNHIfsoNloa9ONcwDe/vKPduoJQhms/Dgp0ppPjmna6E3yQm6m\nKbXOJVG4uFUVZTDwi3d+72/0ph92gkqrLya5Vy/g0b9UlW8WkxwVazi7JEZ4\nrbS1QD8wFf0vuOrvkdTk2aj0a0tJJyfIThdpu+fQ7Or0tNB8vpbvQTAvt6bS\nAe/Qli7l4HHKEQyDEZK47HXsMLZMN5gqGDuDR4qeYGzgfCGedQIkSa+qsaew\nKqeOzRqwsqkE9SXFjLSW6kxn8Fto0/wNAUC9Ky58ZHFRImxRgzuKALLhrlEN\nNg9FzmBR68raeumuRRuu7rk+9tdnp4azXAQskamQ18tj8qzZZCF1/2j0pLuK\nzwfnWeRW83KoVcfshGiYb0r0YVR8XKEZ5mTA0fbzfqswPMJrVHDLiN2diXO5\nrMcj68NqM57sPXHsWgi4MXymrj8rKx1IgGVLBGIJ6mI0u6yXVfbpHadcTwcp\njGl1YKgyowj39OGgtHMwgH2AP+CxCaD0uV1+tL3gt7eoWU9ack3Bad8rGObV\n3xz1KF2EC7rEfNU5yff1QF/0Y07ToFWiEUlp08ohfM4sjjP6EZcyFT/DY4kd\nSOmnU/Okw9cqbzh19Abw58MPrHCVotXg8XBGpjxHZcN9UgX5Byxofw597OPr\nf8tF\r\n=8Vmd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPVqs3WuRK6335/C8uLS5ha6VCxmmN1vFPCsZWmBxY2AiAoHzyiX970a7flh0D38doJfmTIMBJWftT0UTYIsFfI8A=="}]},"maintainers":[{"name":"aradser","email":"aradreg@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-easy-crop_1.6.1_1542532146341_0.04492511163125523"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-17T18:32:53.167Z","1.6.0":"2018-11-17T18:32:53.558Z","modified":"2022-04-04T15:14:25.430Z","1.6.1":"2018-11-18T09:09:06.539Z"},"maintainers":[{"name":"aradser","email":"aradreg@gmail.com"}],"description":"A React component to crop images with easy interactions","homepage":"https://github.com/ricardo-ch/react-easy-crop#readme","repository":{"type":"git","url":"git+https://github.com/ricardo-ch/react-easy-crop.git"},"author":{"name":"Ricardo.ch"},"bugs":{"url":"https://github.com/ricardo-ch/react-easy-crop/issues"},"license":"MIT","readme":"# react-easy-crop \n\nA React component to crop images with easy interactions\n\n\n[![version][version-badge]][package] ![gzip size][gzip-badge] [![Build Status][build-badge]][build-page] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]\n\n\n\n\n\n## Demo\n\nCheck out the examples:\n- [Basic example](https://codesandbox.io/s/q80jom5ql6)\n- [Example with output of the cropped image](https://codesandbox.io/s/q8q1mnr01w)\n- [Example with image selected by the user](https://codesandbox.io/s/y09komm059)\n- [Example with round crop area and no grid](https://codesandbox.io/s/53w20p2o3n)\n\n## Features\n\n* Supports drag and zoom interactions\n* Provides crop dimensions as pixels and percentages\n* Supports any images format (JPEG, PNG, even GIF) as url or base 64 string\n* Mobile friendly\n\n## Installation\n\n```shell\nyarn add react-easy-crop\n```\n\nor\n\n```shell\nnpm install react-easy-crop --save\n```\n\n## Basic usage\n\n> The Cropper is styled with `position: absolute` to take the full space of its parent.\n> Thus, you need to wrap it with an element that uses `position: relative` or the Cropper will fill the whole page.\n\n```js\nimport Cropper from 'react-easy-crop'\n\nclass App extends React.Component {\n state = {\n image: 'your-image-url or as base64',\n crop: { x: 0, y: 0 },\n zoom: 1,\n aspect: 4 / 3,\n }\n\n onCropChange = crop => {\n this.setState({ crop })\n }\n\n onCropComplete = (croppedArea, croppedAreaPixels) => {\n console.log(croppedArea, croppedAreaPixels)\n }\n\n onZoomChange = zoom => {\n this.setState({ zoom })\n }\n\n render() {\n return (\n \n )\n }\n}\n```\n\n## Props\n\n| Prop | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| `image` | string | ✓ | The image to be cropped. |\n| `crop` | `{ x: number, y: number }` | ✓ | Position of the image. `{ x: 0, y: 0 }` will center the image under the cropper. |\n| `zoom` | number | | Zoom of the image between `minZoom` and `maxZoom`. Defaults to 1. |\n| `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3`|\n| `minZoom` | number | | minimum zoom of the image. Defaults to 1. |\n| `maxZoom` | number | | maximum zoom of the image. Defaults to 3. |\n| `cropShape` | 'rect' \\| 'round' | | Shape of the crop area. Defaults to 'rect'. |\n| `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. |\n| `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state.|\n| `onZoomChange` | Function | | Called everytime the zoom is changed. Use it to update your `zoom` state. |\n| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels |\n| `onImgError` | Function | | Called when error occurs while loading an external image |\n| `style` | `{ containerStyle: object, imageStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |\n| `classes` | `{ containerClassName: string, imageClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. |\n\n\n#### onCropComplete(croppedArea, cropperAreaPixels)\n\nThis callback is the one you should use to save the cropped area of the image. It's passed 2 arguments:\n1. `croppedArea`: coordinates and dimensions of the cropped area in percentage of the image dimension\n1. `cropperAreaPixels`: coordinates and dimensions of the cropped area in pixels.\n\nBoth arguments have the following shape:\n```js\nconst area = {\n x: number, // x/y are the coordinates of the top/left corner of the cropped area\n y: number,\n width: number, // width of the cropped area\n height: number, // height of the cropped area\n}\n```\n\n## Development\n\n```shell\nyarn\nyarn start\n```\n\nNow, open `http://localhost:3001/index.html` and start hacking!\n\n## License\n\n[MIT](https://github.com/ricardo-ch/react-easy-crop/blob/master/LICENSE)\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[version-badge]: https://img.shields.io/npm/v/react-easy-crop.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-easy-crop\n[downloads-badge]: https://img.shields.io/npm/dm/react-easy-crop.svg?style=flat-square\n[npmcharts]: http://npmcharts.com/compare/react-easy-crop\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-easy-crop/dist/standalone/react-easy-crop.min.js?compression=gzip&style=flat-square\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license]: https://github.com/ricardo-ch/react-easy-crop/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[build-badge]: https://travis-ci.org/ricardo-ch/react-easy-crop.svg?branch=master\n[build-page]: https://travis-ci.org/ricardo-ch/react-easy-crop\n","readmeFilename":"README.md"}