🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A resizable layout component for React which makes your layout resizable with a handle.

Layout React

Documentation

react-resize-layout

This react component resize the layout of HTML using a handle

Demo

View the demo page

Demo

Example

View the example demo page

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

<Resize>

options type default description
handleWidth string "5px" handle width
handleColor string "#999" handle color
onResizeStart callback Calls when resize start
onResizeStop callback Calls when resize stop
onResizeMove callback Calls when resize move
onResizeWindow callback Calls when window resize

<ResizeHorizon>

options type description
id string Set the id of the ResizeHorizon component
className string Set the className of the ResizeHorizon component
width string Set the width of the ResizeHorizon component
minWidth string Set the minimum width of the ResizeHorizon component
overflow string Set the css overflow property. default value "hidden"

<ResizeVertical>

options type description
id string Set the id of the ResizeVertical component
className string Set the className of the ResizeVertical component
height string Set the height of the ResizeVertical component
minHeight string Set the minimum height of the ResizeVertical component
overflow string Set the css overflow property. default value "hidden"

License

MIT


You May Also Like