react-text-editor-kit/application/src/components/ImageCropper.jsx

React Text Editor Kit is a customizable rich text editor component for React applications. It provides a flexible and easy-to-use interface for users to create and edit content with various formatting options. And also easy to integrate in react applicati

import React, { useState, useCallback, useRef } from "react";
import ReactCrop from "react-image-crop";

export const ImageCropper = ({
  imageSrc,
  onCropComplete,
  aspectRatio = 16 / 9,
}) => {
  const [crop, setCrop] = useState({ aspect: aspectRatio });
  const imgRef = useRef(null);

  const onImageLoaded = useCallback((img) => {
    imgRef.current = img;
    return false;
  }, []);

  const handleCropComplete = useCallback(
    (crop) => {
      onCropComplete(crop, imgRef.current);
    },
    [onCropComplete]
  );

  return (
    <ReactCrop crop={crop} onChange={setCrop} onComplete={handleCropComplete}>
      <img
        ref={imgRef}
        src={imageSrc}
        alt="Crop preview"
        onLoad={(e) => onImageLoaded(e.currentTarget)}
      />
    </ReactCrop>
  );
};