An intuitive React component set for multi-column(row) resizing. You could customize the behavior of resizing in a very simple way. Works in every modern browser which supports flexible box layout.

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

Using yarn:

yarn add react-simple-resizer

Or via npm:

npm install react-simple-resizer

Here is a 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>
);

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';

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

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

Triggered when any Bar is 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 resizing, see afterResizing below.

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

import React from 'react';

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

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

Apply the passed Resizer to Container.

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

import { HTMLAttributes, RefObject } from 'react';

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

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

Used to set default size of Section.

Used to set max size of Section.

Used to set min size of Section.

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

Will be triggered each time its size has changed.

Used to get the actual DOM ref of Section.

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

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;
  onClick?: () => void;
  innerRef?: RefObject<HTMLDivElement>;
}

Required, used to set the size of Bar.

Used to expand interactive area of Bar.

Triggered when the state of Bar has changed.

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

Used to get the actual DOM ref of Bar.

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

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

Beware that you need manually calling applyResizer every time you want to apply the effect, except in beforeApplyResizer. Check demo Make Section collapsible to see how applyResizer is used.

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 size of the nth Section. In multi-column layout, there're several Bars could change the Section's size. Therefore, you could try to use the left side Bar to resizing by setting preferMoveLeftBar.

Used to move the nth Bar to resizing. If the value of A is negative, move Bar to the left. When 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 size of the nth Section. if there is no nth Section, return -1.

Used to get total size of all Section.

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.