Appsin Image Cropper

A React component for image cropping with cropperjs integration. croppedImageData is the final cropped image data which has already converted to base64 string, use it as needed.

Features

• Image upload via click or drag-and-drop
• Rotation (left/right)
• Flipping (horizontal/vertical)
• Reset functionality
• Customizable aspect ratios
• Multi-language support (English/Chinese)
• Responsive design
• Built with React and CropperJS
• Supports React 18+ (including React 19)

Installation

npm install appsin-image-cropper

Usage

import React, { useState } from 'react';
import AppsinImageCropper from 'appsin-image-cropper';

const MyComponent = () => {
  const [showCropper, setShowCropper] = useState(false);
  const [croppedImage, setCroppedImage] = useState(null);

  const handleCropComplete = (croppedImageData) => {
    setCroppedImage(croppedImageData);
    setShowCropper(false);
  };

  return (
    <div>
      <button onClick={() => setShowCropper(true)}>Open Image Cropper</button>
      
      <AppsinImageCropper
        visible={showCropper} // Control visibility, true/false
        aspectRatio={1/1} // You can change this to any aspect ratio you want
        language={EN}//Or use CN for CHINESE
        onCropComplete={handleCropComplete} // Callback when cropping is complete
      />
      
      {croppedImage && (
        <div>
          <h3>Cropped Image:</h3>
          <img src={croppedImage} alt="Cropped" />
        </div>
      )}
    </div>
  );
};

export default MyComponent;

Props

| Prop | Type | Description | |------|------|-------------| | visible | boolean | Controls whether the cropper modal is displayed | | aspectRatio | number | Aspect ratio for the crop box (width/height) | | language | object | Language strings for UI elements | | onCropComplete | function | Callback when cropping is complete |

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Make sure you have these installed in your project.

License

MIT