layout

This react component resize the layout of HTML using a handle

Oct 21, 2018
This react component resize the layout of HTML using a handle

react-resize-layout

This react component resize the layout of HTML using a handle.

View demo View the example demo page Download Source

react-resize-layout

Example

npm install --save react-resize-layout react react-dom or yarn add react-resize-layout react react-dom
import React from "react"; import { render } from "react-dom"; import { Resize, ResizeVertical, ResizeHorizon } from "react-resize-layout"; // horizon render( <Resize handleWidth="5px" handleColor="#777"> <ResizeHorizon width="100px">Horizon 1</ResizeHorizon> <ResizeHorizon width="200px" minWidth="150px"> Horizon 2 </ResizeHorizon> <ResizeHorizon minWidth="5px">Horizon 3</ResizeHorizon> </Resize>, document.getElementById("example") ); // vertical render( <Resize handleWidth="5px" handleColor="#777"> <ResizeVertical height="100px" minHeight="10px"> Vertical 1 </ResizeVertical> <ResizeVertical height="200px">Vertical 2</ResizeVertical> <ResizeVertical minHeight="50px">Vertical 3</ResizeVertical> </Resize>, document.getElementById("example2") ); // horizon and vertical render( <Resize handleWidth="2px" handleColor="#000"> <ResizeVertical height="120px" minHeight="50px"> Vertical 1 </ResizeVertical> <ResizeVertical height="160px" minHeight="20px"> <Resize handleWidth="8px" handleColor="red"> <ResizeHorizon width="90px">Horizon 1</ResizeHorizon> <ResizeHorizon width="120px">Horizon 2</ResizeHorizon> <ResizeHorizon minWidth="50px">Horizon 3</ResizeHorizon> </Resize> </ResizeVertical> <ResizeVertical>Vertical 2</ResizeVertical> </Resize>, document.getElementById("example3") );

Usage

// // When you use either <ResizeHorizon> or <ResizeVertical> component // // work <Resize> <ResizeHorizon>...</ResizeHorizon> <ResizeHorizon>...</ResizeHorizon> </Resize> // not work <Resize> <ResizeHorizon>...</ResizeHorizon> <ResizeVertical>...</ResizeVertical> </Resize> // not work <Resize> <ResizeHorizon>...</ResizeHorizon> <ResizeHorizon>...</ResizeHorizon> <div>...</div> </Resize>

API

optionstypedefaultdescription
handleWidthstring"5px"handle width
handleColorstring"#999"handle color
onResizeStartcallbackCalls when resize start
onResizeStopcallbackCalls when resize stop
onResizeMovecallbackCalls when resize move
onResizeWindowcallbackCalls when window resize

optionstypedescription
idstringSet the id of the ResizeHorizon component
classNamestringSet the className of the ResizeHorizon component
widthstringSet the width of the ResizeHorizon component
minWidthstringSet the minimum width of the ResizeHorizon component
overflowstringSet the css overflow property. default value "hidden"

optionstypedescription
idstringSet the id of the ResizeVertical component
classNamestringSet the className of the ResizeVertical component
heightstringSet the height of the ResizeVertical component
minHeightstringSet the minimum height of the ResizeVertical component
overflowstringSet the css overflow property. default value "hidden"

GitHub

Recommended