` element that manages basic state. Convenient for simple use-cases. ### `` ```js import { Resizable } from 'react-resizable'; import 'react-resizable/css/styles.css'; class Example extends React.Component { state = { width: 200, height: 200, }; onResize = (event, {node, size, handle}) => { this.setState({width: size.width, height: size.height}); }; render() { return (

Contents

); } } ``` ### `` ```js import { ResizableBox } from 'react-resizable'; import 'react-resizable/css/styles.css'; class Example extends React.Component { render() { return ( Contents ); } } ``` ## Props These props apply to both `` and ``. Unknown props that are not in the list below will be passed to the child component. ```js type ResizeCallbackData = { node: HTMLElement, size: {width: number, height: number}, handle: ResizeHandleAxis }; type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'; type ResizableProps = { children: React.Element, width: number, height: number, // Either a ReactElement to be used as handle, or a function // returning an element that is fed the handle's location as its first argument. handle: ReactElement | (resizeHandle: ResizeHandleAxis, ref: ReactRef) => ReactElement, // If you change this, be sure to update your css handleSize: [number, number] = [10, 10], lockAspectRatio: boolean = false, axis: 'both' | 'x' | 'y' | 'none' = 'both', minConstraints: [number, number] = [10, 10], maxConstraints: [number, number] = [Infinity, Infinity], onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, draggableOpts?: ?Object, resizeHandles?: ?Array = ['se'], // If `transform: scale(n)` is set on the parent, this should be set to `n`. transformScale?: number = 1 }; ``` The following props can also be used on ``: ```js { style?: Object // styles the returned

} ``` If a `width` or `height` is passed to ``'s `style` prop, it will be ignored as it is required for internal function. You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`. See the [demo](https://react-grid-layout.github.io/react-resizable/examples/) for more on this. ## Resize Handle If you override the resize handle, we expect that any `ref` passed to your new handle will represent the underlying DOM element. This is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas. There are a few ways to do this: ### Native DOM Element This requires no special treatment. ```js } /> ``` ### Custom React Component You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element. #### Class Components ```js class MyHandleComponent extends React.Component { render() { const {handleAxis, innerRef, ...props} = this.props; return

} } const MyHandle = React.forwardRef((props, ref) => ); } /> ``` #### Functional Components ```js const MyHandle = React.forwardRef((props, ref) => { const {handleAxis, ...restProps} = props; return

; }); } /> ``` ### Custom Function You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style. ```js const MyHandle = (props) => { return

; }; } /> ``` ## License MIT