Compare cropsize properties individually instead of object references. (

#134) Co-authored-by: Dave Vail <dave.vail@techngs.com>
ValentinH · May 18, 2020 · 4d32ffe · 4d32ffe
1 parent a0fc13e
commit 4d32ffe
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -101,7 +101,7 @@ This component requires some styles to be available in the document. By default,
 | `maxZoom`                               | number                                                                              |          | Maximum zoom of the media. Defaults to 3.                                                                                                                                                                                                                                                                   |
 | `zoomWithScroll`                        | boolean                                                                             |          | Enable zoom by scrolling. Defaults to `true`                                                                                                                                                                                                                                                                |
 | `cropShape`                             | 'rect' \| 'round'                                                                   |          | Shape of the crop area. Defaults to 'rect'.                                                                                                                                                                                                                                                                 |
-| `cropSize`                              | `{ width: number, height: number }`                                                 |          | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. _Warning_: This property is rerendering the component when changed so you need to ensure that you are not providing a new object instance at each render.         |
+| `cropSize`                              | `{ width: number, height: number }`                                                 |          | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size.         |
 | `showGrid`                              | boolean                                                                             |          | Whether to show or not the grid (third-lines). Defaults to `true`.                                                                                                                                                                                                                                          |
 | `zoomSpeed`                             | number                                                                              |          | Multiplies the value by which the zoom changes. Defaults to 1.                                                                                                                                                                                                                                              |
 | `onCropChange`                          | crop => void                                                                        |    ✓     | Called everytime the crop is changed. Use it to update your `crop` state.                                                                                                                                                                                                                                   |

diff --git a/src/index.tsx b/src/index.tsx
@@ -138,7 +138,10 @@ class Cropper extends React.Component<Props, State> {
       this.computeSizes()
     } else if (prevProps.zoom !== this.props.zoom) {
       this.recomputeCropPosition()
-    } else if (prevProps.cropSize !== this.props.cropSize) {
+    } else if (
+      prevProps.cropSize?.height !== this.props.cropSize?.height ||
+      prevProps.cropSize?.width !== this.props.cropSize?.width
+    ) {
       this.computeSizes()
     }
     if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {