a reference to the target DOM node. use this in cases you need more flexibility in your React Tree optional. this is alternative to passing children as a prop. if passed, children prop will be ignored.
Allow resize with respect to a grid
examples:
grid={20} - allow resize with respect to a grid of 20px (both horizontal and vertical axis)grid={{horizontal:20}} - allow resize with respect to a horizontal grid of 20pxmultiple scale diff by this number examples:
resizeRatio={2} - double the resizing ratioresizeRatio={{horizontal:2}} - double the resizing ratio only horizontallyAn array handles to enable
options that will be passed to all handles
options that will be passed to specific handles. overrides handleOptions
the height/width target DOM node won't be controlled when set to false, initial height/width is restored
examples:
disableControl={true} - will disable the control on height/width of the target DOM nodedisableControl={{horizontal: true}} - will disable the control on height of the target DOM nodestyle that will be passed to all handles
style that will be passed to specific handles. overrides handleStyle
controlled height. Note! the height won't be controlled by Resizable anymore, but by prop given from parent component
example:
height={100} - will set the height of the target DOM node to 100pxheight={"100px"} - will set the height of the target DOM node to 100pxheight={"50%"} - will set the height of the target DOM node to 50% of the parent nodeheight={30vh} - will set the height of the target DOM node to 30% percent of the viewport heightcontrolled width. Note! the width won't be controlled by Resizable anymore, but by prop given from parent component
a callback that is called after resize ended and the DOM element is updated
an imperative ref to Resizable component. ca be used to imperatively trigger actions like height and width control reset
will offset the element using style.left and style.top to make the resize feel more natural affects left and top handles Note: style.position must not be 'static' in order left and top take effect
Generated using TypeDoc
A simple React element(like div) or React forwardRef element(React element which passed down a ref to a DOM element)