fix(crop-size): Add function callback prop to access crop size changes (

#179)

README.md

@@ -107,6 +107,7 @@ This component requires some styles to be available in the document. By default,
 | `onCropChange`                          | crop => void                                                                        |    ✓     | Called everytime the crop is changed. Use it to update your `crop` state.                                                                                                                                                                                                                                   |
 | `onZoomChange`                          | zoom => void                                                                        |          | Called everytime the zoom is changed. Use it to update your `zoom` state.                                                                                                                                                                                                                                   |
 | `onRotationChange`                      | rotation => void                                                                    |          | Called everytime the rotation is changed (with mobile gestures). Use it to update your `rotation` state.                                                                                                                                                                                                    |
+| `onCropSizeChange`                      | cropSize => void                                                                    |          | Called when a change in either the cropSize width or the cropSize height occurs. |
 | [`onCropComplete`](#onCropCompleteProp) | Function                                                                            |          | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels                                                                                                                                                       |
 | `transform`                             | string                                                                              |          | CSS transform to apply to the image in the editor. Defaults to `translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom})` with variables being pulled from props.                                                                                                                           |
 | `style`                                 | `{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }`             |          | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults.                                                                                                                                                                                                   |

src/index.tsx

@@ -31,6 +31,7 @@ type Props = {
   onZoomChange?: (zoom: number) => void
   onRotationChange?: (rotation: number) => void
   onCropComplete?: (croppedArea: Area, croppedAreaPixels: Area) => void
+  onCropSizeChange?: (cropSize: Size) => void
   onInteractionStart?: () => void
   onInteractionEnd?: () => void
   onMediaLoaded?: (mediaSize: MediaSize) => void
@@ -224,6 +225,13 @@ class Cropper extends React.Component<Props, State> {
             this.props.aspect,
             this.props.rotation
           )
+
+      if (
+        this.state.cropSize?.height !== cropSize.height ||
+        this.state.cropSize?.width !== cropSize.width
+      ) {
+        this.props.onCropSizeChange && this.props.onCropSizeChange(cropSize)
+      }
       this.setState({ cropSize }, this.recomputeCropPosition)
     }
   }