A component that is resizable with handles.
npm install react-resizable
A simple widget that can be resized via one or more handles.
You can either use the
See the example and associated code in ExampleLayout and
ResizableBox for more details.
- Installation
- Compatibility
- Usage
- Resizable
- ResizableBox
- Props
- Extracting Styles
- Custom Resize Handles
``bash`
$ npm install --save react-resizable
You must include the associated styles in your application, otherwise the resize handles will not be visible and will not work properly.
`js`
// In your JS/TS entry point:
import 'react-resizable/css/styles.css';
Or import it in your CSS:
`css`
@import 'react-resizable/css/styles.css';
If you're using a bundler that doesn't support CSS imports, you can find the styles at node_modules/react-resizable/css/styles.css and include them manually.
| Version | React Version |
|---------|---------------|
| 3.x | >= 16.3 |14 - 17
| 2.x | Skipped |
| 1.x | |
This package has two major exports:
*
*
element that manages basic state. Convenient for simple use-cases.$3
`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 (
width={this.state.width}
onResize={this.onResize}
>
style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
>
Contents
$3
js
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';class Example extends React.Component {
render() {
return (
height={200}
draggableOpts={{grid: [25, 25]}}
minConstraints={[100, 100]}
maxConstraints={[300, 300]}
>
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
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 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:
$3
This requires no special treatment.
`js
`$3
You must forward the ref and props to the underlying DOM element.
#### Class Components
js
class MyHandleComponent extends React.Component {
render() {
const {handleAxis, innerRef, ...props} = this.props;
return foo handle-${handleAxis}} {...props} />
}
}
const MyHandle = React.forwardRef((props, ref) =>
`#### Functional Components
js
const MyHandle = React.forwardRef((props, ref) => {
const {handleAxis, ...restProps} = props;
return foo handle-${handleAxis}} {...restProps} />;
});
`$3
You can define a function as a handle, which will simply receive an axis (see above
type) and ref. This may be more clear to read, depending on your coding style.`js
const MyHandle = (props) => {
return ;
}; foo handle-${handleAxis}} />} />
``
License
MIT