react-resizable-area
Create a resizable component with percentage size support.
Demo
Installation
Install the package using npm:
npm install react-grid-layout
Example
Component state = {} { return <ResizableArea minimumHeight=px: 0 percent: 50 minimumWidth=px: 0 percent: 50 initHeight=px: 0 percent: 80 initWidth=px: 0 percent: 80 defaultHeight=px: 0 percent: 80 defaultWidth=px: 0 percent: 80 maximumHeight=px: 0 percent: 100 maximumWidth=px: 0 percent: 100 parentContainer=document > <div style=backgroundColor: '#03a9f4' width: '100%' height: '100%' ref= !thisstatecontainer && this > <ResizableArea minimumHeight=px: 0 percent: 10 minimumWidth=px: 0 percent: 10 initHeight=px: 20 percent: 50 initWidth=px: 20 percent: 50 defaultHeight=px: 0 percent: 50 defaultWidth=px: 0 percent: 50 maximumHeight=px: 0 percent: 80 maximumWidth=px: 0 percent: 80 parentContainer=thisstatecontainer > <div style=backgroundColor: 'white' width: '100%' height: '100%'> </div> </ResizableArea> </div> </ResizableArea> } ReactDOM
Methods
setSize: { width: { px: number, percent: number }, height: { px: number, percent: number } }
Set size of component directly
Props
id: string
ID of the resizable component
className: string
Extra className of the resizable component
children: node
The component that resized by resizable component
parentContainer: node
The DOM node that CSS prop width
& height
relative to.
disable: { width: bool, height: bool }
Disable resize on width / height direction
usePercentageResize: { width: bool, height: bool }
Resize the component by changing percentage or px
minimumWidth: { px: number, percent: number }
The minimum width of the component
Present as calc({px}px + {percent}%)
minimumHeight: { px: number, percent: number }
The minimum height of the component
maximumWidth: { px: number, percent: number }
The maximum width of the component
maximumHeight: { px: number, percent: number }
The maximum height of the component
initWidth: { px: number, percent: number }
The initial width of the component
initHeight: { px: number, percent: number }
The initial height of the component
defaultWidth: { px: number, percent: number }
The default width of the component (double click on right edge will reset to this size)
defaultHeight: { px: number, percent: number }
The default height of the component (double click on bottom edge will reset to this size)
onResizing: function ({ width, height })
Callback that fired on component resizing
onResized: function ({ width, height })
Callback that fired on resize completed.