{"library":"react-image-crop","title":"React Image Crop","description":"React Image Crop is a lightweight, responsive, and touch-enabled image cropping tool for React applications, currently at version 11.0.10. It is actively maintained with frequent patch releases addressing bug fixes and minor improvements. Key differentiators include its zero-dependency footprint, small bundle size (<5KB gzip), full keyboard accessibility, and flexibility to crop any element, not just images. It supports both free-form and fixed aspect ratio crops, as well as min/max crop sizing. While it offers core cropping features, for more advanced image manipulation like filtering, rotating, or annotation, users might consider alternatives like Pintura, which the library sponsors.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-image-crop"],"cli":null},"imports":["import ReactCrop from 'react-image-crop'","import { type Crop } from 'react-image-crop'","import 'react-image-crop/dist/ReactCrop.css'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react'\nimport ReactCrop, { type Crop } from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nfunction CropDemo({ src = 'https://picsum.photos/800/600' }) {\n  const [crop, setCrop] = useState<Crop>()\n\n  // In a real application, 'src' would typically come from user input or an API.\n  // This example uses a static placeholder image for simplicity.\n  return (\n    <div style={{ maxWidth: '600px', margin: 'auto', border: '1px solid #eee', padding: '10px' }}>\n      <h2>React Image Crop Demo</h2>\n      <p>Drag the handles on the image below to define a crop area.</p>\n      <ReactCrop crop={crop} onChange={c => setCrop(c)} aspect={16 / 9}>\n        <img src={src} alt=\"Source to crop\" style={{ maxWidth: '100%', height: 'auto', display: 'block' }} />\n      </ReactCrop>\n      <p>Current crop state:</p>\n      <pre style={{ background: '#f8f8f8', padding: '10px', borderRadius: '4px' }}>\n        {JSON.stringify(crop, null, 2)}\n      </pre>\n      <p><em>(Click on the image and drag to create or adjust a crop selection)</em></p>\n    </div>\n  )\n}\n\nexport default CropDemo;","lang":"typescript","description":"Demonstrates basic image cropping functionality, allowing users to define a crop area on a placeholder image and observing the crop state in real-time.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}