Resize in React Dialog
4 Sep 202613 minutes to read
The React Dialog supports resizing functionality. Drag the React Dialog’s resize handle (grip) or any edge/border to resize it.
Enable resize
A resizable React Dialog can be created by setting the enableResize property to true. This allows the React Dialog size to be changed dynamically, enabling users to view content in expanded mode.
Configure resize handles
The resizeHandles property can be configured to specify the directions in which the React Dialog can be resized. Valid values include SouthEast, SouthWest, NorthEast, NorthWest, East, West, North, South, and All. For example, set resizeHandles={['All']} to allow resizing from any direction.
Resize bounds
To constrain the React Dialog within minimum and maximum dimensions, use the minHeight, minWidth, maxHeight, and maxWidth properties.
Constrain resize within a target
When the target property is configured along with enableResize, the React Dialog will be confined to the area of the specified target container.
Resize events
The following events are raised while resizing the React Dialog:
- resizeStart — Triggered when resizing begins.
- resizing — Triggered continuously while the dialog is being resized.
- resizeStop — Triggered when resizing ends.
The following example demonstrates how to enable resize and configure the resize handles. Note that allowDragging and showCloseIcon are included in the sample only to showcase a full-featured React Dialog; they are not required for resize to work.
[Class-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
buttons = [{
buttonModel: {
content: 'OK',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
this.setState({ hideDialog: false });
}
},
{
buttonModel: {
content: 'Cancel',
cssClass: 'e-flat'
},
'click': () => {
this.setState({ hideDialog: false });
}
}];
constructor(props) {
super(props);
this.state = {
hideDialog: true
};
}
handleClick() {
this.setState({ hideDialog: true });
}
dialogClose = () => {
this.setState({ hideDialog: false });
};
render() {
return (<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
<DialogComponent width='250px' target='#dialog-target' visible={this.state.hideDialog} close={this.dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={this.buttons}>
This is a Dialog with drag enabled </DialogComponent>
</div>);
}
}
export default App;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {hideDialog: boolean;}> {
public buttons: any = [{
buttonModel: {
content: 'OK',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
this.setState({ hideDialog: false })
}
},
{
buttonModel: {
content: 'Cancel',
cssClass: 'e-flat'
},
'click': () => {
this.setState({ hideDialog: false })
}
}];
constructor(props: {}) {
super(props);
this.state = {
hideDialog : true
};
}
public handleClick() {
this.setState({ hideDialog: true })
}
public dialogClose = () => {
this.setState({ hideDialog: false })
}
public render() {
return (
<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
<DialogComponent width='250px' target='#dialog-target' visible = {this.state.hideDialog} close = {this.dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={this.buttons}>
This is a Dialog with drag enabled </DialogComponent>
</div>);
}
}
export default App;[Functional-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
const [status, setStatus] = React.useState({ hideDialog: true });
let buttons = [{
buttonModel: {
content: 'OK',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
setStatus({ hideDialog: false });
}
},
{
buttonModel: {
content: 'Cancel',
cssClass: 'e-flat'
},
'click': () => {
setStatus({ hideDialog: false });
}
}];
function handleClick() {
setState({ hideDialog: true });
}
function dialogClose() {
setStatus({ hideDialog: false });
}
return (<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
<DialogComponent width='250px' target='#dialog-target' visible={status.hideDialog} close={dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={buttons}>
This is a Dialog with drag enabled </DialogComponent>
</div>);
}
export default App;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
const [status, setStatus] = React.useState({ hideDialog: true });
let buttons: any = [{
buttonModel: {
content: 'OK',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
setStatus({ hideDialog: false })
}
},
{
buttonModel: {
content: 'Cancel',
cssClass: 'e-flat'
},
'click': () => {
setStatus({ hideDialog: false })
}
}];
function handleClick() {
setState({ hideDialog: true })
}
function dialogClose(){
setStatus({ hideDialog: false })
}
return (
<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
<DialogComponent width='250px' target='#dialog-target' visible = {status.hideDialog} close = {dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={buttons}>
This is a Dialog with drag enabled </DialogComponent>
</div>
);
}
export default App;