fix: filter out cropper props (#1077)

src/react-cropper.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useRef} from 'react';
 import Cropper from 'cropperjs';
+import {cleanImageProps} from './utils';
 
 const REQUIRED_IMAGE_STYLES = {opacity: 0, maxWidth: '100%'};
 
@@ -121,7 +122,7 @@ const ReactCropper = React.forwardRef<ReactCropperElement | HTMLImageElement, Re
         };
     }, [combinedRef]);
 
-    const imageProps = React.useMemo(() => ({...rest, crossOrigin, src, alt}), [rest, crossOrigin, src, alt]);
+    const imageProps = cleanImageProps({...rest, crossOrigin, src, alt});
 
     return (
         <div style={style} className={className}>

src/utils.ts

@@ -0,0 +1,53 @@
+interface CropperImageOptions extends Cropper.Options<HTMLImageElement> {
+    [key: string]: unknown;
+}
+
+type CropperKeys = keyof Cropper.Options;
+
+const cropperProps: Array<CropperKeys> = [
+    'aspectRatio',
+    'autoCrop',
+    'autoCropArea',
+    'background',
+    'center',
+    'checkCrossOrigin',
+    'checkOrientation',
+    'cropBoxMovable',
+    'cropBoxResizable',
+    'data',
+    'dragMode',
+    'guides',
+    'highlight',
+    'initialAspectRatio',
+    'minCanvasHeight',
+    'minCanvasWidth',
+    'minContainerHeight',
+    'minContainerWidth',
+    'minCropBoxHeight',
+    'minCropBoxWidth',
+    'modal',
+    'movable',
+    'preview',
+    'responsive',
+    'restore',
+    'rotatable',
+    'scalable',
+    'toggleDragModeOnDblclick',
+    'viewMode',
+    'wheelZoomRatio',
+    'zoomOnTouch',
+    'zoomOnWheel',
+    'zoomable',
+    'cropstart',
+    'cropmove',
+    'cropend',
+    'crop',
+    'zoom',
+    'ready',
+];
+
+export const cleanImageProps = (imageProps: CropperImageOptions) =>
+    cropperProps.reduce((acc, key) => {
+        const {[key]: _, ...rest} = acc;
+        return rest;
+    }, imageProps);