- Notifications
You must be signed in to change notification settings - Fork372
A simple React component that is resizable with a handle.
License
react-grid-layout/react-resizable
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple widget that can be resized via one or more handles.
You can either use the<Resizable> element directly, or use the much simpler<ResizableBox> element.
See the example and associated code inExampleLayout andResizableBox for more details.
Make sure you use the associated styles in/css/styles.css, as without them, you will haveproblems with handle placement and visibility.
You can pass options directly to the underlyingDraggableCore instance by using the propdraggableOpts.See thedemo for more on this.
$ npm install --save react-resizableReact-Resizable 3.x is compatible with React>= 16.3.React-Resizable 2.x has been skipped.React-Resizable 1.x is compatible with React14-17.
This package has two major exports:
<Resizable>: A raw component that does not have state. Use as a building block for larger components, by listening to itscallbacks and setting its props.<ResizableBox>: A simple<div {...props} />element that manages basic state. Convenient for simple use-cases.
const{Resizable}=require('react-resizable');// ES6import{Resizable}from'react-resizable';// ...classExampleextendsReact.Component{state={width:200,height:200,};// On top layoutonResize=(event,{node, size, handle})=>{this.setState({width:size.width,height:size.height});};render(){return(<Resizableheight={this.state.height}width={this.state.width}onResize={this.onResize}><divclassName="box"style={{width:this.state.width+'px',height:this.state.height+'px'}}><span>Contents</span></div></Resizable>);}}
const{ResizableBox}=require('react-resizable');// ES6import{ResizableBox}from'react-resizable';classExampleextendsReact.Component{render(){return(<ResizableBoxwidth={200}height={200}draggableOpts={{grid:[25,25]}}minConstraints={[100,100]}maxConstraints={[300,300]}><span>Contents</span></ResizableBox>);}}
These props apply to both<Resizable> and<ResizableBox>. Unknown props that are not in the list below will be passed to the child component.
typeResizeCallbackData={node:HTMLElement,size:{width:number,height:number},handle:ResizeHandleAxis};typeResizeHandleAxis='s'|'w'|'e'|'n'|'sw'|'nw'|'se'|'ne';typeResizableProps={children:React.Element<any>,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<any>|(resizeHandle:ResizeHandleAxis,ref:ReactRef<HTMLElement>)=>ReactElement<any>,// If you change this, be sure to update your csshandleSize:[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<ResizeHandleAxis>=['se']};
The following props can also be used on<ResizableBox>:
{style?:Object// styles the returned <div />}
If awidth orheight is passed to<ResizableBox>'sstyle prop, it will be ignored as it is required for internal function.
If you override the resize handle, we expect that anyref passed to your new handle with represent the underlying DOM element.
This is required, asreact-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:
This requires no special treatment.
<Resizablehandle={<divclassName="foo"/>}/>
You mustforward the ref and props to the underlying DOM element.
classMyHandleComponentextendsReact.Component{render(){const{handleAxis, innerRef, ...props}=this.props;return<divref={innerRef}className={`foo handle-${handleAxis}`}{...props}/>}}constMyHandle=React.forwardRef((props,ref)=><MyHandleComponentinnerRef={ref}{...props}/>);<Resizablehandle={<MyHandle/>}/>
constMyHandle=React.forwardRef((props,ref)=>{const{handleAxis, ...restProps}=props;return<divref={ref}className={`foo handle-${handleAxis}`}{...restProps}/>;});<Resizablehandle={<MyHandle/>}/>
You can define a function as a handle, which will simply receive an axis (see aboveResizeHandleAxis type) and ref. This may be more clear to read, depending on your coding style.
constMyHandle=(props)=>{return<divref={props.innerRef}className="foo"{...props}/>;};<Resizablehandle={(handleAxis,ref)=><MyHandleinnerRef={ref}className={`foo handle-${handleAxis}`}{...props}/>}/>
About
A simple React component that is resizable with a handle.