React Resizable API

The Resizable UI component enables its content to be resizable in the UI.

import Resizable from "devextreme-react/resizable"
Selector: Resizable

Read Guides

See Also
jQuery
Angular
Vue
React
jQuery
Angular
Vue
React

Configuration

An object defining configuration properties for the Resizable UI component.

Name Description
area

Specifies the area within which users can resize the UI component.
elementAttr

Specifies the global attributes to be attached to the UI component's container element.
handles

Specifies which borders of the UI component element are used as a handle.
height

Specifies the UI component's height.
keepAspectRatio

Specifies whether to resize the UI component's content proportionally when you use corner handles.
maxHeight

Specifies the upper height boundary for resizing.
maxWidth

Specifies the upper width boundary for resizing.
minHeight

Specifies the lower height boundary for resizing.
minWidth

Specifies the lower width boundary for resizing.
onDisposing

A function that is executed before the UI component is disposed of.
onInitialized

A function used in JavaScript frameworks to save the UI component instance.
onOptionChanged

A function that is executed after a UI component property is changed.
onResize

A function that is executed each time the UI component is resized by one pixel.
onResizeEnd

A function that is executed when resizing ends.
onResizeStart

A function that is executed when resizing starts.
rtlEnabled

Switches the UI component to a right-to-left representation.
width

Specifies the UI component's width.

See Also
jQuery
Angular
Vue
React

Methods

Methods of the DomComponent object.

Name Description
beginUpdate()

Postpones rendering that can negatively affect performance until the endUpdate() method is called.
defaultOptions(rule)

Specifies the device-dependent default configuration properties for this component.
dispose()

Disposes of all the resources allocated to the Resizable instance.
element()

Gets the root UI component element.
endUpdate()

Refreshes the UI component after a call of the beginUpdate() method.
getInstance(element)

Gets the instance of a UI component found using its DOM node.
instance()

Gets the UI component's instance. Use it to access other methods of the UI component.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
option()

Gets all UI component properties.
option(optionName)

Gets the value of a single property.
option(optionName, optionValue)

Updates the value of a single property.
option(options)

Updates the values of several properties.
resetOption(optionName)

Resets a property to its default value.

Events

This section describes events fired by this UI component.

Name Description
disposing

Raised before the UI component is disposed of.
initialized

Raised only once, after the UI component is initialized.
optionChanged

Raised after a UI component property is changed.
resize

Raised each time the UI component is resized by one pixel.
resizeEnd

Raised when resizing ends.
resizeStart

Raised when resizing starts.

See Also
jQuery
Angular
Vue
React

Types

Name Description
DisposingEvent

The type of the disposing event handler's argument.
InitializedEvent

The type of the initialized event handler's argument.
OptionChangedEvent

The type of the optionChanged event handler's argument.
ResizeEndEvent

The type of the resizeEnd event handler's argument.
ResizeEvent

The type of the resize event handler's argument.
ResizeHandle

Specifies which borders of the UI component element are used as a handle.
ResizeStartEvent

The type of the resizeStart event handler's argument.