Gathering detailed insights and metrics for split-pane-react
Installations
npm install split-pane-reactDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
16.15.1
NPM Version
8.11.0
Score
79.1
Supply Chain
93.4
Quality
75.3
Maintenance
100
Vulnerability
100
License
Contributors
2
Unable to fetch Contributors
Languages
4
TypeScript
JavaScript
SCSS
HTML
TypeScript (88.77%)
JavaScript (5.61%)
SCSS (4.23%)
HTML (1.4%)
Developer
Download Statistics
Total Downloads
500,927
Last Day
1,556
Last Week
11,536
Last Month
31,539
Last Year
353,109
GitHub Statistics
97 Stars
31 Commits
26 Forks
1 Watching
3 Branches
2 Contributors
Bundle Size
5.86 kB
Minified
2.15 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.3
Package Id
split-pane-react@0.1.3
Unpacked Size
38.04 kB
Size
9.62 kB
File Count
26
NPM Version
8.11.0
Node Version
16.15.1
Total Downloads
Cumulative downloads
Total Downloads
500,927
Last day
5.9%
1,556
Compared to previous day
Last week
79.4%
11,536
Compared to previous week
Last month
-30.9%
31,539
Compared to previous month
Last year
163.1%
353,109
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
split-pane-react
Features
- 💪Simple api and support for multiple panels
- 🔥Supports vertical & horizontal layouts and fluid pane.
- 🎉Use controlled component mode, flexible use
- 😎React16.8 version at least, and React18 version at the same time
- 👷♂️Built in different themes
Installing
1# use npm 2npm install split-pane-react 3 4# or if you use yarn 5yarn add split-pane-react
Example Usage
1import React, { useState } from 'react'; 2import SplitPane, { Pane } from 'split-pane-react'; 3import 'split-pane-react/esm/themes/default.css'; 4 5function App () { 6 const [sizes, setSizes] = useState([100, '30%', 'auto']); 7 8 const layoutCSS = { 9 height: '100%', 10 display: 'flex', 11 alignItems: 'center', 12 justifyContent: 'center' 13 }; 14 15 return ( 16 <div style={{ height: 500 }}> 17 <SplitPane 18 split='vertical' 19 sizes={sizes} 20 onChange={setSizes} 21 > 22 <Pane minSize={50} maxSize='50%'> 23 <div style={{ ...layoutCSS, background: '#ddd' }}> 24 pane1 25 </div> 26 </Pane> 27 <div style={{ ...layoutCSS, background: '#d5d7d9' }}> 28 pane2 29 </div> 30 <div style={{ ...layoutCSS, background: '#a1a5a9' }}> 31 pane3 32 </div> 33 </SplitPane> 34 </div> 35 ); 36};
props
** SplitPane **
| Property | Description | Type | Default |
|---|---|---|---|
| split | Determine layout of panes. | 'vertical' |'horizontal' | 'vertical' |
| sizes | Collection of different panel sizes,Only support controlled mode, so it's required | (string | number)[] | [] |
| resizerSize | Specify the size for resizer | number | 4 |
| allowResize | Should allowed to resized | boolean | true |
| className | split pane custom class name | string | void |
| sashRender | User defined sliding axis function | (index: number, active: boolean) => void | void |
| performanceMode | High performance mode to avoid excessive pressure on the browser | boolean | false |
| onChange | Callback of size change | (sizes: number[]) => void | void |
| onDragStart | This callback is invoked when a drag starts | () => void | void |
| onDragEnd | This callback is invoked when a drag ends | () => void | void |
** Pane **
| Property | Description | Type | Default |
|---|---|---|---|
| className | pane class name | string | void |
| minSize | Limit the minimum size of the panel | string | number | void |
| maxSize | Limit the maximum size of this panel | string|number | void |
themes
You can use the sashRender parameter to configure the theme you need:
- The default theme style refers to vscode style
- At the same time, we have built in a theme similar to sublime
License
split-pane-react licensed under MIT.
PS: I would love to know if you're using split-pane-react. If you have any use problems, you can raise the issue, and I will repair them as soon as possible. This project will be maintained for a long time. If you have a good idea, you can propose a merge.
No vulnerabilities found.
No security vulnerabilities found.