Get started with react-image-crop CDN
ISC licensed
React library: react-image-crop - loads, crops, resizes images with UI.
Tags:- react
- reactjs
- image
- crop
- react-component
Stable version
Copied!
How to start using react-image-crop CDN
import React, { useRef, useEffect, useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'cdn.cdnhub.io/react-image-crop/11.0.5/ReactCrop.min.css';
const ImageCropper = () => {
const [image, setImage] = useState(null);
const [crop, setCrop] = useState({ aspect: 1.7778, width: 300, height: null });
const imageRef = useRef(null);
useEffect(() => {
if (image) {
setCrop({ width: image.width, height: image.height });
}
}, [image]);
const onImageLoad = (event) => {
setImage(event.target);
};
const onCropChange = (newCrop) => {
setCrop(newCrop);
};
const onCropComplete = (croppedImage) => {
console.log('Cropped image:', croppedImage);
};
return (
<div>
<ReactCrop
src={image}
ref={imageRef}
aspect={crop.aspect}
width={crop.width}
height={crop.height}
onImageLoaded={onImageLoad}
onChange={onCropChange}
onComplete={onCropComplete}
/>
<button onClick={() => imageRef.current.click()}>Select Image</button>
<input type="file" ref={imageRef} accept="image/*" onChange={(event) => setImage(event.target.files[0])} />
</div>
);
};
export default ImageCropper;
Copied!
Copied!
Copied!
Copied!
All versions
10.0.0
10.0.0-beta.0
10.0.0-beta.1
10.0.0-beta.2
10.0.0-beta.3
10.0.0-beta.4
10.0.0-beta.5
10.0.1
10.0.10
10.0.11
10.0.2
10.0.3
10.0.4
10.0.5
10.0.6
10.0.7
10.0.8
10.0.9
10.1.0
10.1.1
10.1.2
10.1.3
10.1.4
10.1.5
10.1.6
10.1.7
10.1.8
11.0.0
11.0.1
11.0.2
11.0.3
11.0.4
11.0.5
11.0.6
*** 11.0.7
8.3.0
8.3.1
8.4.0
8.4.1
8.4.2
8.4.3
8.5.0
8.6.0
8.6.1
8.6.10
8.6.11
8.6.12
8.6.2
8.6.3
8.6.4
8.6.5
8.6.6
8.6.7
8.6.8
8.6.9
9.0.0
9.0.1
9.0.2
9.0.3
9.0.4
9.0.5
9.0.6
9.0.7
9.0.8
9.1.0
9.1.1