fix: update zoomTo handling (react-cropper#562)

* added useEffect for props.zoomTo

* added useEffect for props.zoomTo

* semantic changes

* the typo is fixed

src/react-cropper.tsx

@@ -100,6 +100,17 @@ const ReactCropper = React.forwardRef<ReactCropperElement | HTMLImageElement, Re
         };
     }, [combinedRef]);
 
+    /**
+     * do zooming when param zoomTo is changed (passing data to cropperjs)
+     */
+    useEffect(() => {
+      const currentRef: any = combinedRef.current;
+       if(currentRef && currentRef?.cropper?.canvasData && typeof props?.zoomTo === 'number') {
+         const cropper = currentRef.cropper;
+         cropper.zoomTo(props.zoomTo);
+       }
+    },[props.zoomTo]);
+
     /**
      * re-render when src changes
      */

tests/react-cropper.test.tsx

@@ -55,6 +55,12 @@ describe('Cropper Render Tests', () => {
         rerender(<Cropper src={newImage} />);
         expect(ref.src).toEqual(newImage);
     });
+
+    test('renders  cropper with zoomTo prop', async () => {
+        const onInitialized = jest.fn();
+        render(<Cropper src={image} onInitialized={onInitialized} zoomTo={1} />);
+        await waitFor(() => expect(onInitialized).toHaveBeenCalledTimes(1));
+    });
 });
 
 describe('Test Cropper Methods', () => {