ReactCrop preview not rendering

Question

I wanted to implement an image cropping feature for my web application and came to know that react-image-crop is the best npm package to implement the same. But, for some reason, the preview that the ReactCrop component provides is not getting rendered on my viewport.

Here's the code that I've been using for it.

import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);

const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
};

const cropImageNow = () => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');

    const pixelRatio = window.devicePixelRatio;
    canvas.width = crop.width * pixelRatio;
    canvas.height = crop.height * pixelRatio;
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';

    ctx.drawImage(
    image,
    crop.x * scaleX,
    crop.y * scaleY,
    crop.width * scaleX,
    crop.height * scaleY,
    0,
    0,
    crop.width,
    crop.height,
    );
    
    // Converting to base64
    const base64Image = canvas.toDataURL('image/jpeg');
    setOutput(base64Image);
};

return (
    <div>
    <div>
        <input
        type="file"
        accept="image/*"
        onChange={(e) => {
            selectImage(e.target.files[0]);
        }}
        />
        <br />
        <br />
        <div>
        {src && (
            <div>
            <ReactCrop src={src} onImageLoaded={setImage}
                crop={crop} onChange={setCrop} />
            <br />
            <button onClick={cropImageNow}>Crop</button>
            <br />
            <br />
            </div>
        )}
        </div>
        <div>{output && <img src={output} />}</div>
    </div>
    </div>
);
}

export default App;

Answer 1

There was nothing wrong with the code that I was using. I was able to solve this issue by downgrading the react-image-crop dependency to "^8.6.12". It seems that there is an issue with the latest release of the npm package.

Here's the command to install the package with a specific version: npm i [email protected]

Answer 2

To add onto CSS-Romeo answer.

Run the following command to uninstall the current version of react-image-crop:

npm uninstall react-image-crop

Now, install the desired version (8.6.12) using the following command:

npm install [email protected]