{"id":28990600,"url":"https://github.com/thegreatercurve/react-simple-crop","last_synced_at":"2025-07-21T07:01:45.960Z","repository":{"id":35008476,"uuid":"191033630","full_name":"thegreatercurve/react-simple-crop","owner":"thegreatercurve","description":"✂️ A React component library for cropping and previewing images","archived":false,"fork":false,"pushed_at":"2023-01-07T07:36:48.000Z","size":2805,"stargazers_count":21,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T00:12:32.915Z","etag":null,"topics":["crop","crop-image","cropper","image-crop","javascript","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-simple-crop","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/thegreatercurve.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-06-09T17:07:37.000Z","updated_at":"2024-05-04T15:26:04.000Z","dependencies_parsed_at":"2023-01-15T11:55:01.657Z","dependency_job_id":null,"html_url":"https://github.com/thegreatercurve/react-simple-crop","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/thegreatercurve/react-simple-crop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-simple-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-simple-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-simple-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-simple-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegreatercurve","download_url":"https://codeload.github.com/thegreatercurve/react-simple-crop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegreatercurve%2Freact-simple-crop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266255243,"owners_count":23900097,"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","image-crop","javascript","react"],"created_at":"2025-06-25T00:12:22.159Z","updated_at":"2025-07-21T07:01:45.939Z","avatar_url":"https://github.com/thegreatercurve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Crop\n\nA simple, easy-to-use and dependecy-free library for cropping images in React.\n\n## Features\n\n- Responsive and touch enabled\n- Crop supports mimimum and maximum sizes\n- Crop can conform to an aspect ratio\n- Crop can be refined with arrow keys\n- Dependency-free (only 8kb minified)\n- Compatible with \u003eIE11\n- Typescript support\n- Accessible\n\n## Installation\n\n```\nnpm i react-simple-crop\n```\n\n## Demo\n\nA simple example can be found [here on CodeSandbox](https://codesandbox.io/s/cocky-lake-9jy0d).\n\nThere is also a full suite of Storybook stories, which can be run locally:\n\n```\nnpm run storybook\n```\n\n## Basic Usage\n\n```jsx\nimport React from \"react\";\nimport { Crop, Preview } from \"react-simple-crop\";\n\nexport const App = () =\u003e {\n  const imageRef = React.createRef();\n\n  const [value, setValue] = React.useState({\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0\n  });\n\n  return (\n    \u003c\u003e\n      \u003cCrop\n        onChange={crop =\u003e setValue({ ...value, ...crop })}\n        ref={imageRef}\n        src={\"...\"}\n        value={value}\n      /\u003e\n      {filePreview \u0026\u0026 \u003cPreview ref={imageRef} value={value} /\u003e}\n    \u003c/\u003e\n  );\n};\n```\n\n## Components\n\n### `\u003cCrop /\u003e`\n\nDisplays an image with a crop area overlay.\n\nThis crop area can be drawn, moved or resized, using mouse click, touch, or keyboard arrow events.\n\nThe `onChange` callback will fire any time the coordinates or size of the crop area change.\n\nYou must then update the local parent component state with the new `value` to see these changes reflected in the DOM.\n\n#### How to use\n\n```jsx\nimport { Crop } from \"react-simple-crop\";\n\n/* ... */\n\nconst [value, setValue] = React.useState({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0\n});\n\n\u003cCrop\n  onChange={crop =\u003e setValue({ ...value, ...crop })}\n  src=\"...\"\n  value={value}\n/\u003e;\n```\n\n#### Props\n\n| Prop            | Required | Type                                                                 | Description                                                                                                                                                |\n| --------------- | :------: | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **onChange**    | \u0026#10003; | `({ x: number; y: number; width: number; height: number; }) =\u003e void` | Callback which is fired any time the coordinates or size of the crop area change.                                                                          |\n| **src**         | \u0026#10003; | `string`                                                             | Source attribute which is passed to the image element.                                                                                                     |\n| **value**       | \u0026#10003; | `{ x: number; y: number; width: number; height: number; }`           | Percentage coordinates and size of the crop area. You can also use this prop to initialize the size of the crop on the first render.                       |\n| **aspectRatio** |          | `[number, number]`                                                   | Restricts the ability to draw or resize a crop area to specific dimensions.                                                                                |\n| **alt**         |          | `string`                                                             | Alt attribute which is passed to the image element.                                                                                                        |\n| **className**   |          | `string`                                                             | Class name attribute passed to the containing element of the image and crop area.                                                                          |\n| **crossOrigin** |          | `\"anonymous\" | \"use-credentials\"`                               | Cross origin attribute which is passed to the image element.                                                                                               |\n| **maxHeight**   |          | `number`                                                             | Restricts the height of the crop area to a maximum percentage of the image element.                                                                        |\n| **maxWidth**    |          | `number`                                                             | Restricts the width of the crop area to a maximum percentage of the image element.                                                                         |\n| **minHeight**   |          | `number`                                                             | Restricts the height of the crop area to a minimum percentage of the image element.                                                                        |\n| **minWidth**    |          | `number`                                                             | Restricts the width of the crop area to a minimum percentage of the image element.                                                                         |\n| **onComplete**  |          | `() =\u003e void`                                                         | Callback which is fired any time the crop area finishes being drawn, moved by mouse or keyboard, or resized.                                               |\n| **onStart**     |          | `() =\u003e void`                                                         | Callback which is fired any time the crop area starts being drawn, moved by mouse or keyboard, or resized.                                                 |\n| **ref**         |          | `{ current: HTMLImageElement }`                                      | React ref object which is passed to the image element, and also needs to be passed to the `\u003cPreview /\u003e` component. This is used to draw the preview image. |\n\n### `\u003cPreview /\u003e`\n\nDisplays a new preview image of the currently selected crop area. This image can then be saved as its own file.\n\n#### How to use\n\n```jsx\nimport { Crop, Preview } from \"react-simple-crop\";\n\n/* ... */\n\nconst imageRef = React.createRef();\n\nconst [value, setValue] = React.useState({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0\n});\n\n\u003cCrop\n  onChange={crop =\u003e setValue({ ...value, ...crop })}\n  ref={imageRef}\n  src=\"...\"\n  value={value}\n/\u003e\n\u003cPreview\n  ref={imageRef}\n  value={value}\n/\u003e\n```\n\n#### Props\n\n| Prop         | Required | Type                                                       | Description                                                                                         |\n| ------------ | :------: | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |\n| **ref**      | \u0026#10003; | `{ current: HTMLImageElement }`                            | React ref object of the `\u003cCrop /\u003e` component image element. This is used to draw the preview image. |\n| **value**    | \u0026#10003; | `{ x: number; y: number; width: number; height: number; }` | Percentage coordinates and size of the crop area.                                                   |\n| **fileType** |          | `string`                                                   | File type of the preview image (i.e. `image/jpeg`, `image/png`, or `image/gif`).                    |\n\nAlso accepts any HTML image attributes as props (i.e. `alt`, `crossOrigin` or `style`), apart from `src`, which is used internally by this component.\n\n## Testing\n\nThere are no unit tests. Instead, we use end-to-end tests.\n\nWe require an actual DOM, versus an emulated DOM like [JSDOM](https://github.com/jsdom/jsdom), which is often used with unit testing libraries, to be able to easily compute image sizes and positions.\n\nTo run the Cypress E2E tests locally, first ensure the Storybook server is running:\n```\nnpm run storybook\n```\nThen, in another terminal:\n```\nnpm run cypress:open\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegreatercurve%2Freact-simple-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegreatercurve%2Freact-simple-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegreatercurve%2Freact-simple-crop/lists"}