diff --git a/README.md b/README.md index e847cfd..8bf3d3e 100644 --- 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) => 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) => 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) => 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) => 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 index 077cbd2..7ab885f 100644 --- a/src/Cropper.tsx +++ b/src/Cropper.tsx @@ -57,6 +57,7 @@ export type CropperProps = { initialCroppedAreaPercentages?: Area onTouchRequest?: (e: React.TouchEvent) => boolean onWheelRequest?: (e: WheelEvent) => boolean + setCropperRef?: (ref: React.RefObject) => void setImageRef?: (ref: React.RefObject) => void setVideoRef?: (ref: React.RefObject) => void setMediaSize?: (size: MediaSize) => void @@ -101,6 +102,7 @@ class Cropper extends React.Component { keyboardStep: KEYBOARD_STEP, } + cropperRef: React.RefObject = React.createRef() imageRef: React.RefObject = React.createRef() videoRef: React.RefObject = React.createRef() containerPosition: Point = { x: 0, y: 0 } @@ -173,6 +175,10 @@ class Cropper extends React.Component { 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 { )} {this.state.cropSize && (