React-Resizable
A simple widget that can be resized via a handle.
You can either use the <Resizable>
element directly, or use the much simpler <ResizableBox>
element.
See the example and associated code in TestLayout and ResizableBox for more details.
Make sure you use the associated styles in /css/styles.css, as without them, you will have problems with handle placement and visibility.
You can pass options directly to the underlying Draggable
instance by using the prop draggableOpts
.
See the demo for more on this.
Usage
var ResizableBox = ResizableBox; ... { return <ResizableBox width=200 height=200 draggableOpts=... minConstraints=100 100 maxConstraints=300 300> <span>Contents</span> </ResizableBox> ;} ### Options// FunctionsonResizeStop: ReactPropTypesfunconResizeStart: ReactPropTypesfunconResize: ReactPropTypesfunc width: ReactPropTypesnumberisRequiredheight: ReactPropTypesnumberisRequired// If you change this, be sure to update your csshandleSize: ReactPropTypesarray// These will be passed wholesale to react-draggabledraggableOpts: ReactPropTypesobject