antd-img-crop

antd-img-crop is a lightweight React library that adds cropping, zooming, and rotation to Ant Design’s Upload component. Instead of building a custom crop UI, developers wrap their existing Upload in ImgCrop and get a modal-based cropper backed by react-easy-crop, with props to configure aspect ratio, zoom bounds, crop shape, and modal text.

Because it composes around Upload rather than replacing it, the library stays small and framework-idiomatic — it intercepts the beforeUpload step to insert the crop modal, then hands the cropped file back into Ant Design’s normal upload flow. This makes it a drop-in addition for any app already using Ant Design forms or media uploads.

What You Get

• An ImgCrop wrapper component that composes directly around Ant Design’s Upload
• A modal-based crop UI with zoom, rotation, and aspect-ratio sliders powered by react-easy-crop
• Configurable crop shape (rectangle or round), output quality, and fill color
• A beforeCrop hook to conditionally skip or reject the crop step per file
• Full TypeScript type definitions for all props and refs

Common Use Cases

• Cropping user avatar uploads to a fixed square or round aspect ratio
• Letting users adjust product or banner images to a required aspect ratio before upload
• Enforcing consistent image dimensions in admin/CMS forms built with Ant Design
• Adding a lightweight crop step to existing Upload-based forms without rebuilding the upload UI

Under The Hood

Architecture: ImgCrop.tsx (375 lines) is the single entry point — a forwardRef component that clones the child Upload’s beforeUpload handler, opens an AntModal containing EasyCrop.tsx (212 lines, a thin wrapper around react-easy-crop), and resolves the crop result back into the file object Ant Design expects, so the rest of the Upload lifecycle is untouched. Tech Stack: TypeScript throughout, built with Rollup into ESM/CJS bundles with generated .d.ts types; runtime dependencies are minimal (react-easy-crop, tslib), with antd and react as peer dependencies rather than bundled. Code Quality: the codebase is small (under 700 lines across src/) and consistently typed via types.ts, but there is no visible automated test suite in the repository — correctness relies on manual verification and the CodeSandbox demo. API Design: the public surface is a single ImgCrop wrapper with a flat, well-documented props table (aspect, zoom bounds, crop shape, modal text, beforeCrop hook), requiring no changes to existing Upload usage — installation and adoption is a one-line wrap.