react-cropper: support ref prop created with useRef hook (#42801)

* support useRef hook

allows to also pass refs created with the `useRef` hook. see https://github.com/roadmanfong/react-cropper/issues/134#issuecomment-593984770

* use same cropperjs version as current react-cropper release

* update interface def and tests

types/react-cropper/index.d.ts

@@ -1,17 +1,18 @@
-// Type definitions for react-cropper 0.10
+// Type definitions for react-cropper 1.3
 // Project: https://github.com/roadmanfong/react-cropper, http://roadmanfong.github.io/react-cropper
 // Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
 //                 Walter Barbagallo <https://github.com/bwlt>
+//                 Harald Friessnegger <https://github.com/frisi>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// Minimum TypeScript Version: 3.7
 
 import Cropper from 'cropperjs';
 import * as React from 'react';
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-export interface ReactCropperProps extends Cropper.Options, Omit<React.HTMLProps<HTMLImageElement>, 'data' | 'ref'> {
-    ref?: string | ((cropper: null | ReactCropper) => any);
+interface ReactCropperProps extends Cropper.Options, Omit<React.HTMLProps<HTMLImageElement>, 'data' | 'ref'> {
+    ref?: React.LegacyRef<ReactCropper>;
 }
 
 interface ReactCropper extends Cropper {} // tslint:disable-line no-empty-interface

types/react-cropper/package.json

@@ -1,6 +1,6 @@
 {
     "private": true,
     "dependencies": {
-        "cropperjs": "^1.3.0"
+        "cropperjs": "^1.5.5"
     }
 }

types/react-cropper/react-cropper-tests.tsx

@@ -3,6 +3,9 @@ import Cropper from 'react-cropper';
 // If you choose not to use import, you need to assign Cropper to default
 // var Cropper = require('react-cropper').default
 
+/**
+ * initializes cropper with string reference
+ */
 class Demo extends React.Component {
     crop() {
         // image in dataUrl
@@ -12,30 +15,55 @@ class Demo extends React.Component {
     render() {
         return (
             <Cropper
-                ref='cropper'
-                src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
+                ref="cropper"
+                src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
                 style={{ height: 400, width: '100%' }}
                 // Cropper.js options
                 aspectRatio={16 / 9}
                 guides={false}
-                crop={this.crop.bind(this) } />
+                crop={this.crop.bind(this)}
+            />
         );
     }
 }
 
+/**
+ * initializes cropper with ref using useRef hook
+ */
+const DemoFunctionComponent: React.FunctionComponent<any> = () => {
+    const cropper = React.useRef<Cropper>();
+
+    const crop = () => {
+        console.log(cropper.current?.getData(true));
+    };
+
+    return (
+        <Cropper
+            ref={cropper}
+            src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
+            style={{ height: 400, width: '100%' }}
+            // Cropper.js options
+            aspectRatio={16 / 9}
+            crop={crop}
+        />
+    );
+};
+
 function testCropperRef() {
-    const refIsWorking = <Cropper
-        ref={(el: Cropper) => {
-            // $ExpectError el can be null
-            el.getCroppedCanvas();
-            if (el !== null) {
-                // el is a cropperjs element
+    const refIsWorking = (
+        <Cropper
+            ref={(el: Cropper) => {
+                // $ExpectError el can be null
                 el.getCroppedCanvas();
-                // el is also a React.Component instance
-                el.props;
-            }
-        }}
-    />;
+                if (el !== null) {
+                    // el is a cropperjs element
+                    el.getCroppedCanvas();
+                    // el is also a React.Component instance
+                    el.props;
+                }
+            }}
+        />
+    );
 
     const refIsOptional = <Cropper />;
 }