Gathering detailed insights and metrics for resizable-panes-react
Installations
npm install resizable-panes-reactDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.15.0
NPM Version
10.7.0
Score
65
Supply Chain
93.2
Quality
86.2
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
4
TypeScript
JavaScript
CSS
HTML
TypeScript (95.25%)
JavaScript (2.71%)
CSS (1.62%)
HTML (0.41%)
Developer
Download Statistics
Total Downloads
22,043
Last Day
72
Last Week
291
Last Month
1,192
Last Year
17,659
GitHub Statistics
14 Stars
778 Commits
2 Forks
1 Watching
121 Branches
2 Contributors
Bundle Size
19.25 kB
Minified
6.81 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
6.0.26
Package Id
resizable-panes-react@6.0.26
Unpacked Size
371.42 kB
Size
102.53 kB
File Count
10
NPM Version
10.7.0
Node Version
20.15.0
Publised On
14 Jul 2024
Total Downloads
Cumulative downloads
Total Downloads
22,043
Last day
38.5%
72
Compared to previous day
Last week
-41.6%
291
Compared to previous week
Last month
6.4%
1,192
Compared to previous month
Last year
302.8%
17,659
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
61
rimraf@babel/core@babel/eslint-parser@babel/preset-env@babel/preset-react@babel/preset-typescript@cypress/code-coverage@istanbuljs/nyc-config-typescript@rollup/plugin-commonjs@rollup/plugin-json@rollup/plugin-node-resolve@rollup/plugin-terser@rollup/plugin-typescript@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parserautoprefixerbabel-loaderbabel-plugin-istanbulcopy-webpack-plugincross-envcss-loadercypressdotenveslinteslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-neslint-plugin-nodeeslint-plugin-promiseeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-simple-import-sorteslint-plugin-sort-keys-fixfork-ts-checker-notifier-webpack-pluginfork-ts-checker-webpack-pluginhtml-webpack-pluginmini-css-extract-pluginnpm-run-allnycpostcss-loaderreactreact-domrolluprollup-plugin-copyrollup-plugin-dtsrollup-plugin-peer-deps-externalrollup-plugin-postcsssasssass-loaderstyle-loaderts-loadertslibtypescriptwebpackwebpack-cliwebpack-dev-serverwebpack-node-externalswebpack-notifier
Versions
The modern library that solve all resizing use cases. 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: 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
1npm i resizable-panes-react --save 2# or 3yarn add resizable-panes-react
Usage
1.bg-slate-500 { 2 background-color: rgb(100 116 139); 3}
1import { Pane, ResizablePanes } from "resizable-panes-react"; 2 3function App() { 4 return ( 5 <div 6 style={{ 7 height: "300px", 8 }} 9 > 10 <ResizablePanes uniqueId="uniqueId" vertical resizerClass="bg-slate-500"> 11 <Pane id="P0" size={1}> 12 Your component 1 13 </Pane> 14 <Pane id="P1" size={2}> 15 Your component 2 16 </Pane> 17 <Pane id="P2" size={3}> 18 Your component 3 19 </Pane> 20 </ResizablePanes> 21 </div> 22 ); 23}
👋 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' | Same value as of unit props | false | It sets the unit of minSize and maxSize of panes. |
| detectionRadius | number | 6 | false | It create the extra margin on both side for handle/resizer detection. |
| 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. | |
| 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. |
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. |
| 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. |
Custom Resizer Component (resizer prop of ResizablePanes/Pane)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| isMouseDown | boolean | Use it style you Custom resizer element behavior. |
1 2interface ICustomResizerProp { 3 isMouseDown: boolean, 4 } 5 6 7export const CustomResizer = ({ 8 isMouseDown 9}: ICustomResizerProp) => { 10 11 // isMouseDown: use it to style the elements 12 13 return ( 14 <SOME_ELEMENT> 15 <TARGET_ELEMENT> 16 17 </TARGET_ELEMENT> 18 </SOME_ELEMENT> 19 ) 20} 21
Nesting
1 2 <ResizablePanes uniqueId="uniqueId" vertical resizerClass="bg-slate-500"> 3 4 <Pane id="P0" size={1}> 5 <ResizablePanes uniqueId="uniqueId2" resizerClass="bg-slate-500"> 6 7 <Pane id="P01" size={2}> 8 Your child component 1 9 </Pane> 10 <Pane id="P01" size={3}> 11 Your child component 2 12 </Pane> 13 14 </ResizablePanes> 15 </Pane> 16 17 <Pane id="P1" size={2}> 18 Your component 2 19 </Pane> 20 <Pane id="P2" size={3}> 21 Your component 3 22 </Pane> 23 </ResizablePanes> 24
How to move Pane by n pixel
1
2import {RATIO, BUTTOM_FIRST, TOP_FIRST} from 'resizable-panes-react'
3
4 const n = 100
5 const paneId = 'P2'
6
7 // resizableApi: Emitted by onReady event
8 const currentP2Size = resizableApi.getSizes()[paneId]
9 resizableApi.setSize(paneId, currentP2Size - n, TOP_FIRST)
10
11 const nowP2Size = resizableApi.getSizes()[paneId]
12 resizableApi.setSize(P2, nowP2Size + n, BUTTOM_FIRST)Quick Demo
Feel Free to Raise Pull Request
No vulnerabilities found.
No security vulnerabilities found.