resizable-panes-js

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

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: Best for mobile devices. Resizer can have 0 size pixel.

• 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-js --save
# or
yarn add resizable-panes-js

Usage

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

import resizablePanes from "resizable-panes-js";

const INTIAL_CONFIG = {
  vertical: true,
  id: 'container',
  resizerSize: 2,
  resizerClass: 'bg-slate-500',
  panes: [
    {
      id: 'P0',
      size: 100
    },
    {
      id: 'P1',
      size: 100
    },
    {
      id: 'P2',
      size: 100
    }
  ]
}

resizablePanes(INITIAL_CONFIG)

    <div id="container" style="height: 200px;" >

        <div id="P0" style="background-color: blue;" > Your HTML/Component </div>

        <div id="resizer-P0">
          Node: Id of resizer should be equals to "resizer-" + id of previous pane.
          You can add your custom element inside it.
        </div>

        <div id="P1" style="background-color: orange;" > Your HTML/Component </div>

        <div id="resizer-P1"></div>
        
        <div id="P2" style="background-color: green;" > Your HTML/Component </div>
    </div>

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

ResizablePanes Options

Prop	Type	Default	Required	Description
uniqueId	string		true	Helps identify ResizablePanes container.
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'	Same value as of unit.	false	It sets the unit of minSize and maxSize of panes.
detectionRadius	number	6	false	It create the extra virtual margin on both side for handle/resizer to detect handle position.
visibility	Object		false	It accepts a boolean map of visibility of Pane Ids.
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.
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.
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.
panes	IPane		true	It is an array which hold the properites of all panes. Click here to ream more.

Pane options

Property	Type	Default	Required	Description
id	string		true	Helps identify Pane component.
size	number		true	Sets the size of Pane.
maxSize	number	Infinity	false	The maximum size limit of the Pane.
minSize	number	0	false	The minimum size limit of the Pane.
resizerSize	number		Optionally required	It is the size of attached Resizer Element. Works at individual Pane level.
detectionRadius	number	6	false	Works at individual Pane level.
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.

How to access ResizablePanes's api and other methods

import resizablePanes from "resizable-panes-js";

const [resizableApi, refreshResizable, clearResizable] = resizablePanes(config object)

resizableApi - It is explained bellow.
refreshResizable - It reattaches the DOM events.
clearResizable - It clears the DOM events.

ResizablePanes's 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.
setSizeRatio	(paneId: string, size: number, behaviour: ISetSizeBehaviour)	Pass value 0 to 1. It will automatically covert it percent in Pixel. 1 corresponds to the sum of size of visible 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.

Nesting

import resizablePanes from "resizable-panes-js";

const PARENT_CONFIG = {
  vertical: true,
  id: 'container',
  resizerSize: 2,
  resizerClass: 'bg-slate-500',
  panes: [
    {
      id: 'P0',
      size: 100
    },
    {
      id: 'P1',
      size: 100
    },
    {
      id: 'P2',
      size: 100
    }
  ]
}

export const CHILD_CONFIG:IResizableOptions = {
  vertical: false,
  uniqueId: 'uniqueId2',
  resizerSize: 2,
  resizerClass: 'bg-slate-500',
  panes: [
    {
      id: 'P00',
      size: 100
    },
    {
      id: 'P01',
      size: 100
    }
  ]
}

resizablePanes(PARENT_CONFIG)
resizablePanes(CHILD_CONFIG)

    <div id="container" style="height: 200px;" >

        <div id="P0" style="background-color: blue;" >
        
            <div id="uniqueId2">

                <div id="P00" style="background-color: orange;">
                  Your child component 1
                </div>
                   <div id="resizer-P00" > </div>
                <div id="P01" style="background-color: green;">
                  Your child component 2
                </div>
    
              </div>

        </div>

        <div id="resizer-P0"></div>

        <div id="P1" style="background-color: orange;" > Hey two </div>

        <div id="resizer-P1"></div>
        
        <div id="P2" style="background-color: green;" > Hey One </div>
    </div>

How to move Pane by n pixel

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

    const n = 100
    const paneId = 'P2'

    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