An intuitive React component set for multi-column resizing. It is easy to use and it also can customize the behavior of resizing in a very simple way. Working on every modern browser which support flexible box layout.


Using yarn:

yarn add react-simple-resizer

Or via npm:

npm install react-simple-resizer


We have create several demos on CodeSandbox, check the Demos to see more. Here is the minimal example for two column layout:

import React from 'react';
import { Container, Section, Bar } from 'react-simple-resizer';

export default () => (
  <Container style={{ height: '500px' }}>
    <Section style={{ background: '#d3d3d3' }} minSize={100}/>
    <Bar size={10} style={{ background: '#888888', cursor: 'col-resize' }} />
    <Section style={{ background: '#d3d3d3' }} minSize={100} />


<Container />

Literally, as the container of the other components.


import { HTMLAttributes } from 'react';

interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
  vertical?: boolean;
  onActivate?: () => void;
  beforeApplyResizer?: (resizer: Resizer) => void;
  afterResizing?: () => void;

Determine that whether using vertical layout or not, default is false.


Triggered when any Bar activated. i.e, onMouseDown or onTouchStart.


Used to customize resize behavior. In this method, you don't need to call applyResizer 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 the resizing, see afterResizing below.


Triggered after a resizing section is completed. Which means that it will be triggered after the onMouseUp and onTouchEnd events. If you want to do something after each time the size of section has changed, using the onSizeChanged props on the Section instead.

Instance properties

import React from 'react';

class Container extends React.PureComponent<ContainerProps> {
    public getResizer(): Resizer
    public applyResizer(resizer: Resizer): void

Used to get the newest Resizer. But any change won't apply unless you pass the Resizer to applyResizer.


Apply the passed Resizer to Container.

<Section />


import { HTMLAttributes, RefObject } from 'react';

interface SectionProps extends HTMLAttributes<HTMLDivElement> {
  size?: number;
  defaultSize?: number;
  maxSize?: number;
  minSize?: number;
  disableResponsive?: boolean;
  onSizeChanged?: () => void;
  innerRef?: RefObject<HTMLDivElement>;

Used to set the Section's size. If size exists, Section will ignore the value of defaultSize, maxSize and minSize.


Used to set the default size of Section.


Used to set the max size of Section.


Used to set the min size of Section.


Each Section is responsive as default, unless size is exists. the responsive means that the Section's size is related with Container's size, if Container's size turn smaller, the Section's size also turn smaller automatically. Otherwise, the changes of Container size won't affect the Section that disableResponsive is true.


Will be triggered each time the size has changed.


Used to get the actual DOM ref of Section.

<Bar />


import { HTMLAttributes, RefObject } from 'react';

interface ExpandInteractiveArea {
  top?: number;
  left?: number;
  right?: number;
  bottom?: number;

interface BarProps extends HTMLAttributes<HTMLDivElement> {
  size: number;
  expandInteractiveArea?: ExpandInteractiveArea;
  onStatusChanged?: (isActive: boolean) => void;
  innerRef?: RefObject<HTMLDivElement>;

Required, used to set the size of the Bar.


Used to expanding the interactive area of the Bar.


Triggered when the state of the Bar has changed.


Used to get the actual DOM ref of Bar.

Customize resize behavior

If you want to customize the behavior of resizing, then the Resizer is what you need to know.

There is two ways to get the Resizer. One is the method beforeApplyResizer defined on the props of Container, and the other is the method getResizer defined on the instance of Container

interface Resizer {
  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 the size of the nth Section.
In multi-column layout, there is not only one Bar could change the Section's size. Therefor, you could use preferMoveLeftBar to try to use the left side Bar to resizing.


Used to move the nth Bar to resizing.
If the value of A is negative, move Bar to the left. Once vertical is true, move up.


Discard resizing at this time.


Used to determine whether the nth Section's size is changed at current resizing section or not.


Used to determine whether the nth Bar is active or not.


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


Used to get the total size of the Section.