{"id":13422199,"url":"https://github.com/advanced-cropper/react-mobile-cropper","last_synced_at":"2026-03-03T09:31:12.068Z","repository":{"id":39573554,"uuid":"421795908","full_name":"advanced-cropper/react-mobile-cropper","owner":"advanced-cropper","description":"The react mobile cropper highly inspirited by popular Android mobile croppers.","archived":false,"fork":false,"pushed_at":"2023-05-28T16:21:07.000Z","size":14268,"stargazers_count":41,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-22T00:46:22.742Z","etag":null,"topics":["component","cropper","image-cropper","image-cropping","mobile","react","react-component","react-cropper"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/advanced-cropper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-10-27T11:47:34.000Z","updated_at":"2025-05-27T15:18:14.000Z","dependencies_parsed_at":"2024-01-25T05:09:39.388Z","dependency_job_id":"75176a0b-9539-4959-9a67-af7654181065","html_url":"https://github.com/advanced-cropper/react-mobile-cropper","commit_stats":null,"previous_names":["norserium/react-mobile-cropper"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/advanced-cropper/react-mobile-cropper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Freact-mobile-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Freact-mobile-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Freact-mobile-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Freact-mobile-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/advanced-cropper","download_url":"https://codeload.github.com/advanced-cropper/react-mobile-cropper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Freact-mobile-cropper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30039884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T06:58:30.252Z","status":"ssl_error","status_checked_at":"2026-03-03T06:58:15.329Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","cropper","image-cropper","image-cropping","mobile","react","react-component","react-cropper"],"created_at":"2024-07-30T23:00:38.987Z","updated_at":"2026-03-03T09:31:12.033Z","avatar_url":"https://github.com/advanced-cropper.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"readme":"# React Mobile Cropper\n\nThe react mobile cropper is highly inspirited by popular Android mobile croppers. It was created as the demonstration of [react-advanced-cropper](https://github.com/norserium/react-advanced-cropper) possibilities and uses it under the hood. Therefore, its documentation would be helpful in the edge cases.\n\n\n[Demo](https://advanced-cropper.github.io/react-advanced-cropper/#mobile-cropper) / [Sandbox](https://codesandbox.io/s/react-mobile-cropper-c1bz2)\n\n[![NPM](https://img.shields.io/npm/v/react-mobile-cropper.svg)](https://www.npmjs.com/package/react-mobile-cropper) \u003ca href=\"https://npmcharts.com/compare/react-mobile-cropper?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-mobile-cropper.svg?sanitize=true\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\n\n![](https://github.com/advanced-cropper/react-mobile-cropper/blob/master/example/example.gif?raw=true)\n\n## Install\n\n```bash\nnpm install --save react-mobile-cropper\n```\n\n```bash\nyarn add react-mobile-cropper\n```\n\n## Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { CropperRef, Cropper } from 'react-mobile-cropper';\nimport 'react-mobile-cropper/dist/style.css'\n\nexport const GettingStartedExample = () =\u003e {\n    const [image, setImage] = useState(\n        'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=1300\u0026q=80',\n    );\n\n    const onChange = (cropper: CropperRef) =\u003e {\n        console.log(cropper.getCoordinates(), cropper.getCanvas());\n    };\n\n    return (\n        \u003cCropper\n            src={image}\n            onChange={onChange}\n            className={'cropper'}\n        /\u003e\n    )\n};\n```\n\n## FAQ\n\n### How to change the cropper's main color?\n\nTo change the cropper's main color you should redefine `color` property for the cropper.\n```css\n.cropper {\n\tcolor: red;\n}\n```\n```jsx\n\u003cCropper\n\tsrc={src}\n\tclassName={'cropper'}\n/\u003e\n```\n\n\n## Cropper\n\n| Prop                      | Type                      | Description                                                     \t\t\t                                                                         | Default\n| ------------------------- |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| ---------------\n| src                       | `string`                  | The cropping image (link / base64)                              \t\t\t                                                                         |\n| stencilType               | `'circle'`, `'rectangle'` | The type of stencil                                    \t\t\t                                                                                  | `'rectangle'`\n| stencilComponent          | `Component`               | The stencil component                                           \t\t\t                                                                         | `RectangleStencil`\n| stencilProps              | `object`                  | The props for the stencil component                             \t\t\t                                                                         | `{}`\n| className                 | `string`                  | The optional class for the root cropper block                   \t\t\t                                                                         |\n| imageClassName            | `string`                  | The optional class for the cropping image                       \t\t\t                                                                         |\n| boundaryClassName         | `string`                  | The optional class for the area.                                \t\t\t                                                                         |\n| backgroundClassName       | `string`                  | The optional class for the background under the image           \t\t\t                                                                         |\n| transitions               | `boolean`, `object`       | Enable / disable auto zoom                                     \t\t\t                                                                          | `false`\n| canvas                    | `boolean`                 | The flag that indicates if canvas should be used                \t\t\t                                                                         | `true`\n| minWidth                  | `number`                  | The minimum width of the stencil (percents)                     \t\t\t                                                                         |\n| minHeight                 | `number`                  | The minimum height of the stencil (percents)                    \t\t\t                                                                         |\n| maxWidth                  | `number`                  | The maximum width of the stencil (percents)                     \t\t\t                                                                         |\n| maxHeight                 | `number`                  | The maximum height of the stencil (percents)                    \t\t\t                                                                         |\n| checkOrientation          | `boolean`                 | Check if EXIF orientation should be checked                     \t\t\t                                                                         | `true`\n| resizeImage               | `boolean`, `object`       | The options for the image resizing ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#resizeimage)) | `true`\n| moveImage                 | `boolean`, `object`       | The options for the image moving ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#moveimage))     | `true`\n| imageRestriction          | `string`                  | Set restrictions for image position ('stencil', 'none')                                                                                     | `'stencil'`\n| defaultSize               | `object`, `Function`      | The function that returns the default size of the stencil or object                                                                         |\n| defaultPosition           | `object`, `Function`      | The function that returns the default position of the stencil or object                                                                     |\n\nSee [the documentation](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper) for more props and details.\nNotice, in this cropper props `transitions`, `priority`, and `stencilSize` are not available.\n\n## RectangleStencil\n\n| Prop                      | Type                | Description                                                    | Default\n| ------------------------  | ------------------- | -------------------------------------------------------------- | ---------------\n| aspectRatio               | `number`            | The aspect ratio                                               |\n| minAspectRatio            | `number`            | The minimum aspect ratio                                       |\n| maxAspectRatio            | `number`            | The maximum aspect ratio                                       |\n| className                 | `string`            | The class for root block of the stencil component              |\n| previewClassName          | `string`            | The class for the preview component                            |\n| movingClassName           | `string`            | The class applied when user drag the stencil                   |\n| resizingClassName         | `string`            | The class applied when user resize the stencil                 |\n| boundingBoxClass          | `string`            | The class for the bounding box component                       |\n| handlerComponent          | `Component`         | The handler component                                          |\n| handlers                  | `object`            | The object of handlers that should be visible or hidden.       |\n| handlerClassNames         | `object`            | The object of custom handler classes                           |\n| handlerWrapperClassNames  | `object`            | The object of custom handler wrapper classes                   |\n| lineComponent             | `Component`         | The handler component                                          |\n| lines                     | `object`            | The object of lines  that should be visible or hidden.         |\n| lineClassNames            | `object`            | The object of custom line classes                              |\n| lineWrapperClassNames     | `object`            | The object of custom line wrapper classes                      |\n\nSee [the documentation](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/RectangleStencil) for more props and details.\n\n## License\n\nThe source code of this library is licensed under MIT, the documentation content belongs to [Norserium](https://github.com/Norserium), except the photos that belong to their respective owners.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-cropper%2Freact-mobile-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadvanced-cropper%2Freact-mobile-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-cropper%2Freact-mobile-cropper/lists"}