` 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. ```ts 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.ReactElement; 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?: | React.ReactElement | ((resizeHandle: ResizeHandleAxis, ref: React.RefObject) => React.ReactElement); // If you change this, be sure to update your css. Default: [20, 20]. handleSize?: [number, number]; lockAspectRatio?: boolean; // default: false axis?: 'both' | 'x' | 'y' | 'none'; // default: 'both' minConstraints?: [number, number]; // default: [20, 20] maxConstraints?: [number, number]; // default: [Infinity, Infinity] onResizeStop?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any; onResizeStart?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any; onResize?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any; // Forwarded to react-draggable's . draggableOpts?: Partial>; resizeHandles?: ResizeHandleAxis[]; // default: ['se'] // If `transform: scale(n)` is set on the parent, this should be set to `n`. transformScale?: number; // default: 1 }; ``` The following props can also be used on ``: ```ts { style?: React.CSSProperties; // 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 --- _Source: https://npm.io/package/react-resizable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._