{"library":"react-cropper","title":"React Cropper Component","description":"react-cropper provides a React component wrapper for the popular Cropper.js library, enabling declarative image cropping within React applications. As of version 2.3.3, it offers robust integration with React's component lifecycle and state management, abstracting away the direct manipulation of the Cropper.js instance. It is actively maintained with frequent patch releases, focusing on bug fixes and dependency updates, ensuring compatibility and stability. Key differentiators include its direct reliance on the well-established Cropper.js, providing a familiar API for those already accustomed to the underlying library, and its comprehensive TypeScript type definitions for improved developer experience. While it wraps Cropper.js, users still need to understand the core Cropper.js options and methods, which are exposed via a ref to the component.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-cropper"],"cli":null},"imports":["import Cropper from 'react-cropper';","import { ReactCropperElement } from 'react-cropper';","import 'cropperjs/dist/cropper.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useState } from \"react\";\nimport Cropper, { ReactCropperElement } from \"react-cropper\";\nimport \"cropperjs/dist/cropper.css\";\n\nconst imageUrl = \"https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg\";\n\nconst ImageCropperDemo: React.FC = () => {\n  const cropperRef = useRef<ReactCropperElement>(null);\n  const [croppedImage, setCroppedImage] = useState<string | null>(null);\n\n  const onCrop = () => {\n    const cropper = cropperRef.current?.cropper;\n    if (cropper) {\n      const dataUrl = cropper.getCroppedCanvas().toDataURL();\n      console.log('Cropped data URL:', dataUrl);\n      setCroppedImage(dataUrl);\n    }\n  };\n\n  return (\n    <div>\n      <h2>React Cropper Demo</h2>\n      <Cropper\n        src={imageUrl}\n        style={{ height: 400, width: \"100%\" }}\n        initialAspectRatio={16 / 9}\n        guides={false}\n        crop={onCrop}\n        ref={cropperRef}\n        viewMode={1}\n        minCropBoxHeight={10}\n        minCropBoxWidth={10}\n        background={false}\n        responsive={true}\n        autoCropArea={1}\n        checkOrientation={false} // Important for some browsers\n      />\n      {croppedImage && (\n        <div style={{ marginTop: '20px' }}>\n          <h3>Preview</h3>\n          <img src={croppedImage} alt=\"Cropped\" style={{ maxWidth: '100%', border: '1px solid #ccc' }} />\n        </div>\n      )}\n      <p>This demo shows how to integrate the Cropper component, set initial options, and retrieve the cropped image data using a ref.</p>\n    </div>\n  );\n};\n\nexport default ImageCropperDemo;","lang":"typescript","description":"Demonstrates how to import, render, and interact with the Cropper component using a `useRef` hook to access the underlying Cropper.js instance for image data and display a preview.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}