diff --git a/types/react-image-crop/index.d.ts b/types/react-image-crop/index.d.ts
index ed84c96ed1..e406a59e3f 100644
--- a/types/react-image-crop/index.d.ts
+++ b/types/react-image-crop/index.d.ts
@@ -3,6 +3,7 @@
 // Definitions by: Daniela Yassuda <https://github.com/danielasy>
 //                 Elias Chaaya <https://github.com/chaaya>
 //                 Søren Englund <https://github.com/englund0110>
+//                 Jonathan Guo <https://github.com/JonathanGuo>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -17,7 +18,11 @@ declare namespace ReactCrop {
         y?: number;
         width?: number;
         height?: number;
-        unit?: "px" | "%";
+        unit?: 'px' | '%';
+    }
+
+    interface PercentCrop extends Crop {
+        unit?: '%';
     }
 
     interface ReactCropProps {
@@ -29,8 +34,8 @@ declare namespace ReactCrop {
         maxWidth?: number;
         maxHeight?: number;
         keepSelection?: boolean;
-        onChange: (crop: Crop) => void;
-        onComplete?: (crop: Crop) => void;
+        onChange: (crop: Crop, percentCrop: PercentCrop) => void;
+        onComplete?: (crop: Crop, percentCrop: PercentCrop) => void;
         onImageLoaded?: (target: HTMLImageElement) => void;
         onDragStart?: () => void;
         onDragEnd?: () => void;
diff --git a/types/react-image-crop/test/react-image-crop-global-tests.ts b/types/react-image-crop/test/react-image-crop-global-tests.ts
index 6e306c3bc1..04fc5c537d 100644
--- a/types/react-image-crop/test/react-image-crop-global-tests.ts
+++ b/types/react-image-crop/test/react-image-crop-global-tests.ts
@@ -1,30 +1,35 @@
 interface TestState {
     crop?: ReactCrop.Crop;
+    percentCrop?: ReactCrop.PercentCrop;
 }
 const initialState = {
     crop: {
         x: 0,
-        y: 0
-    }
+        y: 0,
+    },
+    percentCrop: {
+        x: 0,
+        y: 0,
+    },
 };
 
 // Basic use case
 class SimpleTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     render() {
-        return React.createElement(
-            ReactCrop,
-            {
-                src: 'imageSrc',
-                onChange: this.onChange,
-                crop: this.state.crop,
-            },
-        );
+        return React.createElement(ReactCrop, {
+            src: 'imageSrc',
+            onChange: this.onChange,
+            crop: this.state.crop,
+        });
     }
 }
 
@@ -32,8 +37,11 @@ class SimpleTest extends React.Component<{}, TestState> {
 class AspectRatioTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     onImageLoaded = (image: HTMLImageElement) => {
@@ -44,24 +52,21 @@ class AspectRatioTest extends React.Component<{}, TestState> {
                     y: 0,
                     aspect: 16 / 9,
                     width: 50,
-                    unit: "px",
+                    unit: 'px',
                 },
                 image.width,
-                image.height,
+                image.height
             ),
         });
     }
 
     render() {
-        return React.createElement(
-            ReactCrop,
-            {
-                src: 'imageSrc',
-                onChange: this.onChange,
-                onImageLoaded: this.onImageLoaded,
-                crop: this.state.crop,
-            },
-        );
+        return React.createElement(ReactCrop, {
+            src: 'imageSrc',
+            onChange: this.onChange,
+            onImageLoaded: this.onImageLoaded,
+            crop: this.state.crop,
+        });
     }
 }
 
@@ -69,8 +74,11 @@ class AspectRatioTest extends React.Component<{}, TestState> {
 class CompleteTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     onImageLoaded = (image: HTMLImageElement) => {
@@ -81,10 +89,10 @@ class CompleteTest extends React.Component<{}, TestState> {
                     y: 0,
                     aspect: 16 / 9,
                     width: 20,
-                    unit: "px",
+                    unit: 'px',
                 },
                 image.width,
-                image.height,
+                image.height
             ),
         });
     }
@@ -94,28 +102,25 @@ class CompleteTest extends React.Component<{}, TestState> {
     }
 
     render() {
-        return React.createElement(
-            ReactCrop,
-            {
-                src: 'imageSrc',
-                onChange: this.onChange,
-                onImageLoaded: this.onImageLoaded,
-                crop: this.state.crop,
-                minWidth: 30,
-                minHeight: 30,
-                maxWidth: 90,
-                maxHeight: 90,
-                keepSelection: true,
-                disabled: false,
-                style: { border: '1px solid black', position: 'relative' },
-                onComplete: () => console.log('Crop complete'),
-                onDragStart: () => console.log('Drag start'),
-                onDragEnd: () => console.log('Drag end'),
-                crossorigin: 'anonymous',
-                onImageError: this.onImageError,
-                className: 'my-cropper',
-                locked: false
-            },
-        );
+        return React.createElement(ReactCrop, {
+            src: 'imageSrc',
+            onChange: this.onChange,
+            onImageLoaded: this.onImageLoaded,
+            crop: this.state.crop,
+            minWidth: 30,
+            minHeight: 30,
+            maxWidth: 90,
+            maxHeight: 90,
+            keepSelection: true,
+            disabled: false,
+            style: { border: '1px solid black', position: 'relative' },
+            onComplete: () => console.log('Crop complete'),
+            onDragStart: () => console.log('Drag start'),
+            onDragEnd: () => console.log('Drag end'),
+            crossorigin: 'anonymous',
+            onImageError: this.onImageError,
+            className: 'my-cropper',
+            locked: false,
+        });
     }
 }
diff --git a/types/react-image-crop/test/react-image-crop-module-tests.tsx b/types/react-image-crop/test/react-image-crop-module-tests.tsx
index 688828e71f..a30de35fd3 100644
--- a/types/react-image-crop/test/react-image-crop-module-tests.tsx
+++ b/types/react-image-crop/test/react-image-crop-module-tests.tsx
@@ -3,21 +3,29 @@ import * as ReactCrop from 'react-image-crop';
 
 interface TestState {
     crop?: ReactCrop.Crop;
+    percentCrop?: ReactCrop.PercentCrop;
 }
 
 const initialState = {
     crop: {
         x: 100,
-        y: 200
-    }
+        y: 200,
+    },
+    percentCrop: {
+        x: 0,
+        y: 0,
+    },
 };
 
 // Basic use case
 class SimpleTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     render() {
@@ -29,8 +37,11 @@ class SimpleTest extends React.Component<{}, TestState> {
 class AspectRatioTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     onImageLoaded = (image: HTMLImageElement) => {
@@ -41,10 +52,10 @@ class AspectRatioTest extends React.Component<{}, TestState> {
                     y: 0,
                     aspect: 16 / 9,
                     width: 50,
-                    unit: "px",
+                    unit: 'px',
                 },
                 image.width,
-                image.height,
+                image.height
             ),
         });
     }
@@ -73,7 +84,7 @@ class RenderComponentTest extends React.Component {
         return (
             <ReactCrop
                 src="imageSrc"
-                onChange={(crop) => console.log(crop)}
+                onChange={(crop, percentCrop) => console.log(crop, percentCrop)}
                 renderComponent={videoComponent}
             />
         );
@@ -84,8 +95,11 @@ class RenderComponentTest extends React.Component {
 class CompleteTest extends React.Component<{}, TestState> {
     state = initialState;
 
-    onChange = (crop: ReactCrop.Crop) => {
-        this.setState({ crop });
+    onChange = (crop: ReactCrop.Crop, percentCrop: ReactCrop.PercentCrop) => {
+        this.setState({
+            crop,
+            percentCrop,
+        });
     }
 
     onImageLoaded = (image: HTMLImageElement) => {
@@ -96,10 +110,10 @@ class CompleteTest extends React.Component<{}, TestState> {
                     y: 0,
                     aspect: 16 / 9,
                     width: 20,
-                    unit: "px",
+                    unit: 'px',
                 },
                 image.width,
-                image.height,
+                image.height
             ),
         });
     }