feat: add setCropperRef callback

This callback allows the parent component to get a ref to the `cropper` element.
ValentinH · Feb 25, 2025 · 73447bd · 73447bd
1 parent 2e25955
commit 73447bd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -137,6 +137,7 @@ See [#428](https://github.com/ValentinH/react-easy-crop/issues/428), [#409](http
 | `onTouchRequest`                                                          | `(e: React.TouchEvent<HTMLDivElement>) => boolean`                                  |          | Can be used to cancel a touch request by returning `false`.                                                                                                                                                                                                                                                                                                                                                |
 | `onWheelRequest`                                                          | `(e: WheelEvent) => boolean`                                                        |          | Can be used to cancel a zoom with wheel request by returning `false`.                                                                                                                                                                                                                                                                                                                                      |
 | `disableAutomaticStylesInjection`                                         | boolean                                                                             |          | Whether to auto inject styles using a style tag in the document head on component mount. When disabled you need to import the css file into your application manually (style file is available in `react-easy-crop/react-easy-crop.css`). Example with sass/scss `@import "~react-easy-crop/react-easy-crop";`.                                                                                            |
+| `setCropperRef`                                                           | `(ref: React.RefObject<HTMLDivElement>) => void`                                    |          | Called when the component mounts, if present. Used to set the value of the cropper ref object in the parent component.                                                                                                                                                                                                                                                                                     |
 | `setImageRef`                                                             | `(ref: React.RefObject<HTMLImageElement>) => void`                                  |          | Called when the component mounts, if present. Used to set the value of the image ref object in the parent component.                                                                                                                                                                                                                                                                                       |
 | `setVideoRef`                                                             | `(ref: React.RefObject<HTMLVideoElement>) => void`                                  |          | Called when the component mounts, if present. Used to set the value of the video ref object in the parent component.                                                                                                                                                                                                                                                                                       |
 | `setMediaSize`                                                            | `(size: MediaSize) => void`                                                         |          | [Advanced Usage] Used to expose the `mediaSize` value for use with the `getInitialCropFromCroppedAreaPixels` and `getInitialCropFromCroppedAreaPercentages` functions. See [this CodeSandbox instance](https://codesandbox.io/s/react-easy-crop-forked-3v0hi3) for a simple example.                                                                                                                       |

diff --git a/src/Cropper.tsx b/src/Cropper.tsx
@@ -57,6 +57,7 @@ export type CropperProps = {
   initialCroppedAreaPercentages?: Area
   onTouchRequest?: (e: React.TouchEvent<HTMLDivElement>) => boolean
   onWheelRequest?: (e: WheelEvent) => boolean
+  setCropperRef?: (ref: React.RefObject<HTMLDivElement>) => void
   setImageRef?: (ref: React.RefObject<HTMLImageElement>) => void
   setVideoRef?: (ref: React.RefObject<HTMLVideoElement>) => void
   setMediaSize?: (size: MediaSize) => void
@@ -101,6 +102,7 @@ class Cropper extends React.Component<CropperProps, State> {
     keyboardStep: KEYBOARD_STEP,
   }
 
+  cropperRef: React.RefObject<HTMLDivElement> = React.createRef()
   imageRef: React.RefObject<HTMLImageElement> = React.createRef()
   videoRef: React.RefObject<HTMLVideoElement> = React.createRef()
   containerPosition: Point = { x: 0, y: 0 }
@@ -173,6 +175,10 @@ class Cropper extends React.Component<CropperProps, State> {
     if (this.props.setVideoRef) {
       this.props.setVideoRef(this.videoRef)
     }
+
+    if (this.props.setCropperRef) {
+      this.props.setCropperRef(this.cropperRef)
+    }
   }
 
   componentWillUnmount() {
@@ -868,6 +874,7 @@ class Cropper extends React.Component<CropperProps, State> {
         )}
         {this.state.cropSize && (
           <div
+            ref={this.cropperRef}
             style={{
               ...cropAreaStyle,
               width: this.state.cropSize.width,