resizable-panes-js

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