Repository files navigation

An intuitive React component set for multi-column(row) resizing. You couldcustomize the behavior of resizing in a very simple way. Works in every modern browserwhich supportsflexible box layout.

• Installation
• Examples
• Components
  • Container
  • Section
  • Bar
• Customize resize behavior
• Contributing

Usingyarn:

yarn add react-simple-resizer

Or vianpm:

npm install react-simple-resizer

Here is a minimal example for two-column layout:

importReactfrom'react';import{Container,Section,Bar}from'react-simple-resizer';exportdefault()=>(<Containerstyle={{height:'500px'}}><Sectionstyle={{background:'#d3d3d3'}}minSize={100}/><Barsize={10}style={{background:'#888888',cursor:'col-resize'}}/><Sectionstyle={{background:'#d3d3d3'}}minSize={100}/></Container>);

We have created several demos on CodeSandbox, check demos below:

• Simple demo
• Make Section collapsible
• Multiple Section linkage effects

Literally, it's the container of the other components.

import{Container}from'react-simple-resizer';

import{HTMLAttributes}from'react';interfaceContainerPropsextendsHTMLAttributes<HTMLDivElement>{vertical?:boolean;onActivate?:()=>void;beforeApplyResizer?:(resizer:Resizer)=>void;afterResizing?:()=>void;}

Determine whether using vertical layout or not, default isfalse.

Triggered when anyBar is activated. i.e,onMouseDown oronTouchStart.

Used tocustomize resize behavior. In this method, youdon't need to callapplyResizer to apply the resize result. Please note that you should not do any side effect on this method. If you want to do something after resizing, seeafterResizing below.

Triggered after aresizing section is completed, which means that it will be triggered afteronMouseUp andonTouchEnd events. If you want to do something after size of section has changed, useonSizeChanged props on theSection instead.

importReactfrom'react';classContainerextendsReact.PureComponent<ContainerProps>{publicgetResizer():ResizerpublicapplyResizer(resizer:Resizer):void}

Used to get newestResizer. But any change won't apply unless you pass theResizer toapplyResizer.

Apply the passedResizer toContainer.

import{Section}from'react-simple-resizer';

import{HTMLAttributes,RefObject}from'react';interfaceSectionPropsextendsHTMLAttributes<HTMLDivElement>{size?:number;defaultSize?:number;maxSize?:number;minSize?:number;disableResponsive?:boolean;onSizeChanged?:(currentSize:number)=>void;innerRef?:RefObject<HTMLDivElement>;}

Used to setSection's size. Ifsize is set,Section will ignore the value ofdefaultSize,maxSize andminSize.

Used to set default size ofSection.

Used to set max size ofSection.

Used to set min size ofSection.

EachSection is responsive as default, unlesssize exists. Theresponsive here means thatSection's size is related withContainer's size, ifContainer's size turn smaller, theSection's size also turn smaller automatically. Otherwise, changes ofContainer size won't affect theSection whendisableResponsive istrue.

Will be triggered each time its size has changed.

Used to get the actual DOM ref ofSection.

import{Bar}from'react-simple-resizer';

import{HTMLAttributes,RefObject}from'react';interfaceExpandInteractiveArea{top?:number;left?:number;right?:number;bottom?:number;}interfaceBarPropsextendsHTMLAttributes<HTMLDivElement>{size:number;expandInteractiveArea?:ExpandInteractiveArea;onStatusChanged?:(isActive:boolean)=>void;onClick?:()=>void;innerRef?:RefObject<HTMLDivElement>;}

Required, used to set the size ofBar.

Used to expand interactive area ofBar.

Triggered when the state ofBar has changed.

Triggered if there's no "move" events. The main difference between it and originalonClick event is thatthere is no parameters onthisonClick. You could also use it as a touch event on mobile platform, without 300ms click delay.

Used to get the actual DOM ref ofBar.

If you want to customize behavior of resizing, then you have to know how to useResizer.

There is two ways to get theResizer. One isbeforeApplyResizer defined on theprops ofContainer, and the other isgetResizer defined on theinstance ofContainer.

Beware that you needmanually callingapplyResizer every time you want to apply the effect, except inbeforeApplyResizer. Check demoMake Section collapsible to see howapplyResizer is used.

interfaceResizer{resizeSection:(indexOfSection:number,config:{toSize:number;preferMoveLeftBar?:boolean})=>void;moveBar:(indexOfBar:number,config:{withOffset:number;})=>void;discard:()=>void;isSectionResized:(indexOfSection:number)=>boolean;isBarActivated:(indexOfBar:number)=>boolean;getSectionSize:(indexOfSection:number)=>number|-1;getTotalSize:()=>number;}

Used to set size of the nthSection.In multi-column layout, there're severalBars could change theSection's size. Therefore, you could try to use the left sideBar to resizing by settingpreferMoveLeftBar.

Used to move the nthBar to resizing.If the value of A is negative, moveBar to the left. Whenvertical istrue, move up.

Discard resizing at this time.

Used to determine whether the nthSection's size is changed at currentresizing section or not.

Used to determine whether the nthBar is active or not.

Used to get size of the nthSection. if there is no nthSection, return-1.

Used to get total size of allSection.

The main purpose of this repository is to continue to evolve react-simple-resizer, making it faster, smaller and easier to use. We are grateful to the community for contributing bugfixes and improvements.

Feel free to let us know that you have created some new customized resize behavior. You could create a PR to let more people see your works. Also, if you find some behaviors that you cannot create, let us know too.