react-resize-layout

This react component resize the layout of HTML using a handle

Demo

View the demo page

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