React Resizable Props
area
You can use a selector string, jQuery object, or DOM element to specify this property:
String
JavaScript- area: '.test-div'
jQuery object
JavaScript- area: $('.test-div')
DOM element
JavaScript- area: $('.test-div')[0]
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
keepAspectRatio
When this property value is true, you can use a corner handle to resize the UI component proportionally.
Set this property to false to enable free-form resize:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import Resizable from 'devextreme-react/resizable';
- function App() {
- return (
- <Resizable ...
- keepAspectRatio={false}
- />
- );
- }
- export default App;
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onInitialized
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
- import Resizable from 'devextreme-react/resizable';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.saveInstance = this.saveInstance.bind(this);
- }
- saveInstance(e) {
- this.resizableInstance = e.component;
- }
- render() {
- return (
- <div>
- <Resizable onInitialized={this.saveInstance} />
- </div>
- );
- }
- }
See Also
- Get a UI component Instance in React
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
The following example shows how to subscribe to component property changes:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import Resizable from 'devextreme-react/resizable';
- const handlePropertyChange = (e) => {
- if(e.name === "changedProperty") {
- // handle the property change here
- }
- }
- export default function App() {
- return (
- <Resizable ...
- onOptionChanged={handlePropertyChange}
- />
- );
- }
onResize
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The UI component's current height. |
|
width |
The UI component's current width. |
onResizeEnd
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The current UI component height. |
|
width |
The current UI component width. |
onResizeStart
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The UI component's current height. |
|
width |
The UI component's current width. |
rtlEnabled
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
- DevExpress.config({
- rtlEnabled: true
- });
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.