{"id":17717714,"url":"https://github.com/mununki/simple-react-cropper","last_synced_at":"2026-02-22T11:07:45.197Z","repository":{"id":34033470,"uuid":"166044573","full_name":"mununki/simple-react-cropper","owner":"mununki","description":"Simple React image cropper with cropper.js","archived":false,"fork":false,"pushed_at":"2022-12-10T22:28:39.000Z","size":1766,"stargazers_count":4,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T01:05:05.076Z","etag":null,"topics":["cropperjs","react","typescript"],"latest_commit_sha":null,"homepage":null,"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/mununki.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}},"created_at":"2019-01-16T13:26:31.000Z","updated_at":"2020-07-29T09:41:09.000Z","dependencies_parsed_at":"2023-01-15T04:05:34.242Z","dependency_job_id":null,"html_url":"https://github.com/mununki/simple-react-cropper","commit_stats":null,"previous_names":["mattdamon108/simple-react-cropper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Fsimple-react-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Fsimple-react-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Fsimple-react-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Fsimple-react-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mununki","download_url":"https://codeload.github.com/mununki/simple-react-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253850874,"owners_count":21973672,"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":["cropperjs","react","typescript"],"created_at":"2024-10-25T14:29:42.425Z","updated_at":"2026-02-22T11:07:45.169Z","avatar_url":"https://github.com/mununki.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple-React-Cropper\n\n### [Demo](https://mattdamon108.github.io/simple-react-cropper/)\n\n[![npm version](https://badge.fury.io/js/simple-react-cropper.svg)](https://badge.fury.io/js/simple-react-cropper)\n\nThis is the tiny and simple image cropper \u0026 resizer based on [Cropper.js](https://fengyuanchen.github.io/cropperjs/). Simply it is wrapped to React Component to allow to use more easily in React project.\n\nThere are many functions of Cropper.js but this module is simplified with main features in purpose of avatar image crop \u0026 resize in most user-profile web page.\n\n### Features\n\n1. Crop and Resize the images in Web canvas (powered by [Cropper.js](https://fengyuanchen.github.io/cropperjs/)).\n2. Handle the cropped and resized images with function props.\n3. Style the container of crop canvas.\n4. **Typescript support**\n\n### Install\n\n```shell\n$ npm i simple-react-cropper\n\n# or\n\n$ yarn add simple-react-cropper\n```\n\n### Example\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Cropper from \"simple-react-cropper\";\n\nconst uploadToServer = blob =\u003e {\n  console.log(blob);\n};\n\nconst afterCrop = () =\u003e {\n  console.log(\"close cropper\");\n};\n\nconst Root = () =\u003e (\n  \u003cdiv className=\"container-demo\"\u003e\n    \u003cCropper\n      aspectRatio={4 / 4}\n      width={500}\n      height={500}\n      upload={uploadToServer}\n      afterCrop={afterCrop}\n      containerStyle={{ maxHeight: \"80vh\", borderRadius: \"10px\" }}\n    /\u003e\n  \u003c/div\u003e\n);\n\nReactDOM.render(\u003cRoot /\u003e, document.getElementById(\"root\"));\n\n```\n\n### Props\n\n| Props          | Type                | required | Default   | Descriptioin                                                             |\n| -------------- | ------------------- | -------- | --------- | ------------------------------------------------------------------------ |\n| aspectRatio    | number              | true     | NaN       | Define the fixed crop box ratio. By default, the crop box has free ratio |\n| width          | number              | false    | 500       | The width of output image                                                |\n| height         | number              | false    | 500       | The height of output image                                               |\n| upload         | function            | true     | undefined | The function to handle the output (blob type)                            |\n| afterCrop      | function            | false    | undefined | The function to be called after confirming cropping                      |\n| fillColor      | string              | false    | \"#FFF\"    | The color to be filled in blank area after crop                          |\n| containerStyle | React.CSSProperties | false    | undefined | The object to style the parent container                                 |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmununki%2Fsimple-react-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmununki%2Fsimple-react-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmununki%2Fsimple-react-cropper/lists"}