❤
npm
Sign UpSign In

resizable-panes-js
TypeScript icon, indicating that this package has built-in type declarations

6.0.24 • Public • Published

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

resizable-panes-react nycrc config on GitHub NPM Version npm bundle size Quality Gate Status

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

Readme

Keywords

Package Sidebar

Install

npm i resizable-panes-js

Repository

github.com/BipanKishore/resizable-panes

Homepage

github.com/BipanKishore/resizable-panes/tree/master/packages/resizable-panes-js

Weekly Downloads

38

Version

6.0.24

License

ISC

Unpacked Size

362 kB

Total Files

10

Last publish

Collaborators

  • bipankishore
Try on RunKit
Report malware