The modern library that solve all resizing use cases. Don't trust! Try it

Cypress Recoreded tests are available here

Quick Demo

Key Features

• Smooth Resizing: Enjoy smooth and fast pane resizing without performance issues.

• No Unnecessary Rerenders: Child components in the panes won't rerender during resizing, ensuring a seamless experience.

• Show and Hide Panes: Easily show and hide panes, considering the minimum and maximum size constraints of other panes.

• Custom Resizers: Customize resizer handles to match your app's design.

• Unique Resizers: Single Resizer handle can push and pull n number of Panes in forward and backword direction.

• Responsive: In ratio mode, It adjusts pane sizes responsively to fit in available space, making it perfect for dynamic layouts.

• Auto-Save Sizes: Pane size and visibility are automatically saved in the browser's memory for consistent layouts across sessions.

Installation

npm i resizable-panes-react --save
# or
yarn add resizable-panes-react

Usage

.bg-slate-500 {
  background-color: rgb(100 116 139);
}

import { Pane, ResizablePanes } from "resizable-panes-react";

function App() {
  return (
    <div
      style={{
        height: "300px",
      }}
    >
      <ResizablePanes uniqueId="uniqueId" vertical resizerClass="bg-slate-500">
        <Pane id="P0" size={1}>
          Your component 1
        </Pane>
        <Pane id="P1" size={2}>
          Your component 2
        </Pane>
        <Pane id="P2" size={3}>
          Your component 3
        </Pane>
      </ResizablePanes>
    </div>
  );
}

👋 Hi there! If you find this project useful or valuable do give it star on GitHub or Buy Me a Coffee

ResizablePanes Props

| Prop | Type | Default | Required | Description | | ------------------ | ------------------ | ------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | uniqueId | string | | true | Helps identify ResizablePanes component. | | unmountOnHide | boolean | true | false | true - Unmounts the child or children of Pane in Hidden state. false - keeps the child or children of Pane in DOM in Hidden state. | | className | string | | false | It will get attached to ResizablePanes container element. | | vertical | boolean | false | false | It sets the orientation of Panes. | | unit | 'ratio' or 'pixel' | ratio | false | It sets the unit of size of panes. | | minMaxUnit | 'ratio' or 'pixel' | ratio | false | It sets the unit of minSize and maxSize of panes. | | visibility | Object | | false | It accepts a boolean map of Pane Ids visibility. | | storageApi | Object | | false | It used to store data across session. It can be localStorage, sessionStorage or any other following the interface of localStorage. | | resizerClass | string | | false | It gets applied to the main resizer element in normal state. | | activeResizerClass | string | | false | It gets applied to the main resizer element in active state. | | resizer | ReactElement | | false | It will replace the in build resizer. | | resizerSize | number | 2 | optionally required | It is the size of resizer. If the size of resizer is other than 2px you will have to provide the value. | | onResize | function | | false | It emits size map while resizing layout. | | onResizeStop | function | | false | It emits size map after the layout resizing is complete. | | onReady | function | | false | It emits ResizablePanes component's api once it is constructed. | | onChangeVisibility | function | | false | It emits visibility map when there is change in visibility. A Pane can have 'visible', 'hidden' or 'zipped' state. | | onMinSize | (id: string, minSize:number) => void | | false | It emits when a Pane enters min size. | | onMaxSize | (id: string, maxSize:number) => void | | false | It emits when a Pane enters max size. | | onNormalSize | (id: string) => void | | false | It emits when a Pane enters normal size. |

Pane Props

| Prop | Type | Default | Required | Description | | ------------- | ------------ | -------- | ------------------- | -------------------------------------------------------------------------------------------------------- | | id | string | | true | Helps identify Pane component. | | size | number | | true | Sets the size of Pane. | | unmountOnHide | boolean | | | Same behaviour as of ResizablePanes Prop but works for individual Pane. | | className | string | | false | It will get attached to Pane element. | | maxSize | number | Infinity | false | The maximum size limit of the Pane. | | minSize | number | 0 | false | The minimum size limit of the Pane. | | resizer | ReactElement | | false | It will replace the in build resizer of Pane. | | resizerSize | number | | Optionally required | It is the size of attached Resizer Element. It is required when we have passed resizer prop to the Pane. | | onMinSize | (id: string, minSize:number) => void | | false | It emits when it enters min size of the Pane. | | onMaxSize | (id: string, maxSize:number) => void | | false | It emits when it enters max size of the Pane. | | onNormalSize | (id: string) => void | | false | It emits when it enters normal size of the Pane. |

ResizablePanes component api

| Method | Params | Description | | --------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | | restore | | It restores the default view of layout. | | setSize | (paneId: string, size: number, behaviour: ISetSizeBehaviour) | It excepts the positive number. It sets the size of Pane depending upon: 1. Its min and max. 2. min and max of other panes.| | setVisibilities | Object | It sets the visibility of Panes using the Boolean map of id of Panes. | | getSizes | | It returns the size map object of Ids of Panes | | getVisibilities | | It returns the visibility map object of Ids of Panes | | getState | | It return the current state of all Panes. |

Custom Resizer Component (resizer prop of ResizablePanes/Pane)

| Prop | Type | Default | Required | Description | | ------------------- | -------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------- | | onMouseDown | function | | | Attached it to the element that, upon being clicked and dragged, initiates the resizing of the Pane's size. | | onTouchStartCapture | | | | Attached it to the element that, upon being clicked and dragged, initiates the resizing of the Pane's size.(Touch devices) | | isMouseDown | boolean | | | Use it style you Custom resizer element behavior. |

interface ICustomResizerProp {
    onMouseDown: (e: HTMLEvent) => void,
    isMouseDown: boolean,
    onTouchStartCapture: (e: HTMLEvent) => void
  }


export const CustomResizer = ({
    onMouseDown,
    isMouseDown, 
    onTouchStartCapture
}: ICustomResizerProp) => {

 // isMouseDown: use it to style the elements

  return (
    <SOME_ELEMENT>
      <TARGET_ELEMENT
        onMouseDown={onMouseDown}
        onTouchStartCapture={onTouchStartCapture}
      >
      </TARGET_ELEMENT>
    </SOME_ELEMENT>
  )
}

Nesting

      <ResizablePanes uniqueId="uniqueId" vertical resizerClass="bg-slate-500">

      <Pane id="P0" size={1}>    
          <ResizablePanes uniqueId="uniqueId2" resizerClass="bg-slate-500">

            <Pane id="P01" size={2}>
              Your child component 1
            </Pane>
            <Pane id="P01" size={3}>
              Your child component 2
            </Pane>

          </ResizablePanes>
      </Pane>

        <Pane id="P1" size={2}>
          Your component 2
        </Pane>
        <Pane id="P2" size={3}>
          Your component 3
        </Pane>
      </ResizablePanes>

How to move Pane by n pixel

import {RATIO, BUTTOM_FIRST, TOP_FIRST} from 'resizable-panes-react'

    const n = 100
    const paneId = 'P2'

    // resizableApi: Emitted by onReady event 
    const currentP2Size = resizableApi.getSizes()[paneId]
    resizableApi.setSize(paneId, currentP2Size - n, TOP_FIRST)

    const nowP2Size = resizableApi.getSizes()[paneId]
    resizableApi.setSize(P2, nowP2Size + n, BUTTOM_FIRST)

Quick Demo

Feel Free to Raise Pull Request