Here's a step-by-step guide on how to create an image cropper in your React project: **1. Install Required Dependencies** First, install the necessary packages: ```bash npm install cropperjs uuid ``` **2. Create the Component Interface** Define the TypeScript interface for the component props: ```typescript interface CroppedImageProps { selectedImage: string; setShowModal: (s: boolean) => void; onSave: (file: File) => void; } ``` **3. Initialize Component State and Refs** Set up the necessary state and refs: ```typescript const [croppedImg, setCroppedImg] = useState(''); const imageElement = useRef(null); const cropper = useRef(null); ``` **4. Configure Cropper** ```typescript useEffect(() => { if (imageElement.current) { cropper.current = new Cropper(imageElement.current, { aspectRatio: 1, viewMode: 1, dragMode: 'move', cropBoxMovable: false, cropBoxResizable: false, toggleDragModeOnDblclick: false, zoomable: true, scalable: false, guides: false, background: false, crop: () => { if (cropper.current) { const canvas = cropper.current.getCroppedCanvas({ width: 200, height: 200 }); canvas.toBlob( (blob) => { if (blob) { const imageURL = URL.createObjectURL(blob); setCroppedImg(imageURL); } }, 'image/png', 1 ); } }, }); } return () => { if (cropper.current) { cropper.current.destroy(); cropper.current = null; } }; }, [selectedImage]); ``` Set up the cropper configuration in a useEffect hook. This includes: - Setting aspect ratio to 1 (square) - Enabling zoom but disabling resize - Configuring the crop callback to generate a 200x200 cropped image **5. Handle Image Saving** ```javascript const handleSave = () => { if (cropper.current) { const canvas = cropper.current.getCroppedCanvas({ width: 200, height: 200 }); canvas.toBlob( (blob) => { if (blob) { const fileType = blob.type.split('/')[1]; const allowedTypes = ['png', 'jpg', 'jpeg', 'gif']; if (allowedTypes.includes(fileType)) { const fileName = `profile-pic-${uuidv4()}.${fileType}`; const file = new File([blob], fileName, { type: blob.type, }); onSave(file); setShowModal(false); } else { console.error('Unsupported file type'); alert('Unsupported file type. Please select a valid image.'); } } else { console.error('Failed to create Blob from canvas'); } }, 'image/png', 1 ); cropper.current.destroy(); cropper.current = null; } }; ``` Implement the save functionality: - Convert cropped canvas to blob - Validate file type - Generate unique filename - Create new File object and save **6. Create the UI** ```javascript import { Card } from '@/components/ui/card' import type { ReactNode } from 'react' interface CropModalProps { children: ReactNode } const CropModal: React.FC = ({ children }) => { { return (

{children}

) } } export default CropModal const FullCropper: React.FC = () => { const [showCropper, setShowCropper] = useState(false) const [cropImageUrl, setCropImageUrl] = useState() const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = () => { setShowCropper(true) setCropImageUrl(reader?.result as string) } reader.readAsDataURL(file) } } return ( <> {showCropper && cropImageUrl && ( } /> )} ) } export default FullCropper ``` Implement the component UI with: - A container for the image - The image element with necessary props - Custom CSS for circular cropping - A save button This implementation creates a circular image cropper with a fixed aspect ratio, perfect for profile pictures or similar use cases.

How To Create An Image Cropper in React