react-rnd - npm Package Compare versions

Comparing version 7.2.0 to 7.3.0

lib/index.es5.js

@@ -509,2 +509,4 @@ 'use strict';
             lockAspectRatio: this.props.lockAspectRatio,
+            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
             handleStyles: this.props.resizeHandleStyles,
@@ -511,0 +513,0 @@ handleClasses: this.props.resizeHandleClasses

lib/index.js

@@ -505,2 +505,4 @@ import { Component, createElement } from 'react';
             lockAspectRatio: this.props.lockAspectRatio,
+            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
             handleStyles: this.props.resizeHandleStyles,
@@ -507,0 +509,0 @@ handleClasses: this.props.resizeHandleClasses

lib/react-rnd.umd.js

@@ -509,2 +509,4 @@ (function (global, factory) {
             lockAspectRatio: this.props.lockAspectRatio,
+            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
             handleStyles: this.props.resizeHandleStyles,
@@ -511,0 +513,0 @@ handleClasses: this.props.resizeHandleClasses

package.json

 {
   "name": "react-rnd",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "",
@@ -93,5 +93,5 @@ "title": "react-rnd",
   "dependencies": {
-    "re-resizable": "^4.0.0",
+    "re-resizable": "^4.1.0",
     "react-draggable": "^3.0.3"
   }
 }

README.md

@@ -169,7 +169,22 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
-#### `lockAspectRatio?: boolean;`
+#### `lockAspectRatio?: boolean | number;`
 
 The `lockAspectRatio` property is used to lock aspect ratio.
+Set to `true` to lock the aspect ratio based on the initial size.
+Set to a numeric value to lock a specific aspect ratio (such as `16/9`).
+If set to numeric, make sure to set initial height/width to values with correct aspect ratio.
 If omitted, set `false`.
 
+#### `lockAspectRatioExtraWidth?: number;`
+
+The `lockAspectRatioExtraWidth` property enables a resizable component to maintain an aspect ratio plus extra width.
+For instance, a video could be displayed 16:9 with a 50px side bar.
+If omitted, set `0`.
+
+#### `lockAspectRatioExtraHeight?: number;`
+
+The `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height.
+For instance, a video could be displayed 16:9 with a 50px header bar.
+If omitted, set `0`.
+
 #### `dragHandleClassName?: string;`
@@ -486,2 +501,6 @@
 
+#### v7.2.0
+
+Support for cancel feature of react-draggable #206
+
 #### v7.1.5
@@ -488,0 +507,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

191381

increased by1.52%

Lines of code

1413

increased by0.43%

Number of lines in readme file

685

increased by2.85%

Dependency changes

• Updatedre-resizable@^4.1.0