{"id":13795352,"url":"https://github.com/react-cropper/react-cropper","last_synced_at":"2026-03-17T23:36:58.086Z","repository":{"id":31578433,"uuid":"35143198","full_name":"react-cropper/react-cropper","owner":"react-cropper","description":"Cropperjs as React component","archived":false,"fork":false,"pushed_at":"2023-09-11T20:22:16.000Z","size":5080,"stargazers_count":2049,"open_issues_count":17,"forks_count":273,"subscribers_count":16,"default_branch":"develop","last_synced_at":"2025-04-03T09:05:18.556Z","etag":null,"topics":["crop","crop-image","cropper","cropperjs","react","react-components","react-cropper","reactjs"],"latest_commit_sha":null,"homepage":"https://react-cropper.github.io/react-cropper/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-cropper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-05-06T06:32:36.000Z","updated_at":"2025-04-02T08:12:19.000Z","dependencies_parsed_at":"2023-02-14T04:30:49.409Z","dependency_job_id":"c02f7612-bcc5-416d-bb78-142a852e22c5","html_url":"https://github.com/react-cropper/react-cropper","commit_stats":{"total_commits":533,"total_committers":34,"mean_commits":"15.676470588235293","dds":0.4052532833020638,"last_synced_commit":"ddfad195e84e8a0245312f424ddd58c527b20c64"},"previous_names":["roadmanfong/react-cropper"],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-cropper%2Freact-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-cropper%2Freact-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-cropper%2Freact-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-cropper%2Freact-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-cropper","download_url":"https://codeload.github.com/react-cropper/react-cropper/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247279912,"owners_count":20912965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crop","crop-image","cropper","cropperjs","react","react-components","react-cropper","reactjs"],"created_at":"2024-08-03T23:00:54.962Z","updated_at":"2025-12-12T02:56:03.642Z","avatar_url":"https://github.com/react-cropper.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-cropper\n\n[Cropperjs](https://github.com/fengyuanchen/cropperjs) as React component\n\n[![NPM](https://img.shields.io/npm/v/react-cropper/latest)](https://www.npmjs.com/package/react-cropper)\n[![NPM](https://img.shields.io/npm/v/react-cropper/beta)](https://www.npmjs.com/package/react-cropper)\n[![NPM downloads](https://img.shields.io/npm/dt/react-cropper)](https://www.npmjs.com/package/react-cropper)\n[![Bundle Size minZip](https://img.shields.io/bundlephobia/minzip/react-cropper)](https://www.npmjs.com/package/react-cropper)\n[![Bundle Size min](https://img.shields.io/bundlephobia/min/react-cropper)](https://www.npmjs.com/package/react-cropper)\n[![License](https://img.shields.io/github/license/react-cropper/react-cropper)](https://github.com/react-cropper/react-cropper/blob/develop/LICENSE)\n[![codecov](https://codecov.io/gh/react-cropper/react-cropper/branch/develop/graph/badge.svg)](https://codecov.io/gh/react-cropper/react-cropper)\n\n## Demo\n\n[Click for a Demo](https://codesandbox.io/s/wonderful-pine-i7fs3)\n\n## Docs\n\n- [Cropperjs](https://github.com/fengyuanchen/cropperjs)\n\n## Installation\n\nInstall via [npm](https://www.npmjs.com/package/react-cropper)\n\n```shell\nnpm install --save react-cropper\n```\n\nYou need `cropper.css` in your project which is from [cropperjs](https://www.npmjs.com/package/cropperjs).\nSince this project have dependency on [cropperjs](https://www.npmjs.com/package/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\n\n## Quick Example\n\n```ts\nimport React, { useRef } from \"react\";\nimport Cropper, { ReactCropperElement } from \"react-cropper\";\nimport \"cropperjs/dist/cropper.css\";\n\nconst Demo: React.FC = () =\u003e {\n  const cropperRef = useRef\u003cReactCropperElement\u003e(null);\n  const onCrop = () =\u003e {\n    const cropper = cropperRef.current?.cropper;\n    console.log(cropper.getCroppedCanvas().toDataURL());\n  };\n\n  return (\n    \u003cCropper\n      src=\"https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg\"\n      style={{ height: 400, width: \"100%\" }}\n      // Cropper.js options\n      initialAspectRatio={16 / 9}\n      guides={false}\n      crop={onCrop}\n      ref={cropperRef}\n    /\u003e\n  );\n};\n```\n\n## Options\n\n### src\n\n-   Type: `string`\n-   Default: `null`\n\n```js\n\u003cCropper src=\"http://fengyuanchen.github.io/cropper/images/picture.jpg\" /\u003e\n```\n\n### alt\n\n-   Type: `string`\n-   Default: `picture`\n\n### crossOrigin\n\n-   Type: `string`\n-   Default: `null`\n\n### dragMode\n\nhttps://github.com/fengyuanchen/cropperjs#dragmode\n\n### scaleX\n\nhttps://github.com/fengyuanchen/cropperjs#scalexscalex\n\n### scaleY\n\nhttps://github.com/fengyuanchen/cropperjs#scalexscaley\n\n### enable\n\nhttps://github.com/fengyuanchen/cropperjs#enable\n\n### disable\n\nhttps://github.com/fengyuanchen/cropperjs#disable\n\n### zoomTo\n\nhttps://github.com/fengyuanchen/cropperjs#zoomto\n\n### rotateTo\n\nhttps://github.com/fengyuanchen/cropperjs#rotateto\n\n### Other options\n\nAccept all options in the [docs](https://github.com/fengyuanchen/cropperjs#options) as properties.\n\n## Methods\n\nUse the `cropper` instance from `onInitialized` to access cropperjs [methods](https://github.com/fengyuanchen/cropper#methods)\n\n## Build\n\n```sh\nnpm run build\n```\n\n## Development\n\n```sh\nnpm start\n```\n\n## Author\n\n[Fong Kuanghuei](mailto:fongkuanghui@gmail.com)\n\n## Maintainer\n\n[Shubhendu Shekhar](https://github.com/shekhar-shubhendu)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-cropper%2Freact-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-cropper%2Freact-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-cropper%2Freact-cropper/lists"}