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

6.0.2 • Public • Published

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

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

Cypress Recoreded tests are available here

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)

Feel Free to Raise Pull Request

Package Sidebar

Install

npm i resizable-panes-angular

Weekly Downloads

3

Version

6.0.2

License

ISC

Unpacked Size

61.4 kB

Total Files

6

Last publish

Collaborators

  • bipankishore