Installations
npm install react-split-paneDeveloper
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
12.15.0
NPM Version
6.13.4
Statistics
3,227 Stars
673 Commits
409 Forks
35 Watching
48 Branches
49 Contributors
Updated on 24 Nov 2024
Bundle Size
39.27 kB
Minified
9.28 kB
Minified + Gzipped
Languages
JavaScript (97.69%)
CSS (2.31%)
Total Downloads
Cumulative downloads
Total Downloads
87,362,730
Last day
-18.2%
29,770
Compared to previous day
Last week
-0.7%
182,342
Compared to previous week
Last month
13.3%
751,771
Compared to previous month
Last year
-11.4%
8,451,908
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
43
React Split Pane
Split-Pane React component, can be nested or split vertically or horizontally!
Installing
1npm install react-split-pane 2 3# or if you use yarn 4 5yarn add react-split-pane
Example Usage
1<SplitPane split="vertical" minSize={50} defaultSize={100}> 2 <div /> 3 <div /> 4</SplitPane>
1<SplitPane split="vertical" minSize={50}> 2 <div /> 3 <SplitPane split="horizontal"> 4 <div /> 5 <div /> 6 </SplitPane> 7</SplitPane>
Props
primary
By dragging 'draggable' surface you can change size of the first pane.
The first pane keeps then its size while the second pane is resized by browser window.
By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane.
If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions,
set SplitPane prop primary to second. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
Resizing can be disabled by passing the allowResize prop as false (allowResize={false}). Resizing is enabled by default.
You can also set the size of the pane using the size prop. Note that a size set through props ignores the defaultSize and minSize properties.
In this example right pane keeps its width 200px while user is resizing browser window.
1<SplitPane split="vertical" defaultSize={200} primary="second"> 2 <div /> 3 <div /> 4</SplitPane>
maxSize
You can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value (measured in pixels but state just a number). If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning), then you'll need to limit the movement of the splitter (resizer) at the end of the SplitPane (otherwise it can be dragged outside the SplitPane and you don't catch it never more). For this purpose use the maxSize parameter with value 0. When dragged the splitter/resizer will stop at the border of the SplitPane component and think this you'll be able to pick it again and drag it back then. And more: if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal size of the 'resizable' pane in this case). This can be useful also in the full-screen case of use.
step
You can use the step prop to only allow resizing in fixed increments.
onDragStarted
This callback is invoked when a drag starts.
onDragFinished
This callback is invoked when a drag ends.
onChange
This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.
Inline Styles
You can also pass inline styles to the components via props. These are:
style- Styling to be applied to the main container.paneStyle- Styling to be applied to both panespane1Style- Styling to be applied to the first pane, with precedence overpaneStylepane2Style- Styling to be applied to the second pane, with precedence overpaneStyleresizerStyle- Styling to be applied to the resizer bar
Persisting Positions
Each SplitPane accepts an onChange function prop. Used in conjunction with defaultSize and a persistence layer, you can ensure that your splitter choices survive a refresh of your app.
For example, if you are comfortable with the trade-offs of localStorage, you could do something like the following:
1<SplitPane 2 split="vertical" 3 minSize={50} 4 defaultSize={parseInt(localStorage.getItem('splitPos'), 10)} 5 onChange={(size) => localStorage.setItem('splitPos', size)} 6> 7 <div /> 8 <div /> 9</SplitPane>
Disclaimer: localStorage has a variety of performance trade-offs. Browsers such as Firefox have now optimized localStorage use so that they will asynchronously initiate a read of all saved localStorage data for an origin once they know the page will load. If the data has not fully loaded by the time code accesses localStorage, the code will cause the page's main thread to block until the database load completes. When the main thread is blocked, no other JS code will run or layout will occur. In multiprocess browsers and for users with fast disk storage, this will be less of a problem. You are likely to get yelled at if you use localStorage.
A potentially better idea is to use something like https://github.com/mozilla/localForage although hooking it up will be slightly more involved. You are likely to be admired by all for judiciously avoiding use of localStorage.
Example styling
This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.
Thanks to background-clip: padding-box; for making transparent borders possible.
1.Resizer { 2 background: #000; 3 opacity: 0.2; 4 z-index: 1; 5 -moz-box-sizing: border-box; 6 -webkit-box-sizing: border-box; 7 box-sizing: border-box; 8 -moz-background-clip: padding; 9 -webkit-background-clip: padding; 10 background-clip: padding-box; 11} 12 13.Resizer:hover { 14 -webkit-transition: all 2s ease; 15 transition: all 2s ease; 16} 17 18.Resizer.horizontal { 19 height: 11px; 20 margin: -5px 0; 21 border-top: 5px solid rgba(255, 255, 255, 0); 22 border-bottom: 5px solid rgba(255, 255, 255, 0); 23 cursor: row-resize; 24 width: 100%; 25} 26 27.Resizer.horizontal:hover { 28 border-top: 5px solid rgba(0, 0, 0, 0.5); 29 border-bottom: 5px solid rgba(0, 0, 0, 0.5); 30} 31 32.Resizer.vertical { 33 width: 11px; 34 margin: 0 -5px; 35 border-left: 5px solid rgba(255, 255, 255, 0); 36 border-right: 5px solid rgba(255, 255, 255, 0); 37 cursor: col-resize; 38} 39 40.Resizer.vertical:hover { 41 border-left: 5px solid rgba(0, 0, 0, 0.5); 42 border-right: 5px solid rgba(0, 0, 0, 0.5); 43} 44.Resizer.disabled { 45 cursor: not-allowed; 46} 47.Resizer.disabled:hover { 48 border-color: transparent; 49}
New Version
I'm working on an updated version of this library, and looking for help:
Demo
http://react-split-pane-v2.surge.sh/
Install
1npm install react-split-pane@next 2 3# or if you use yarn 4 5yarn add react-split-pane@next
Usage
1import SplitPane, { Pane } from 'react-split-pane'; 2 3<SplitPane split="vertical"> 4 <Pane initialSize="200px">You can use a Pane component</Pane> 5 <div>or you can use a plain old div</div> 6 <Pane initialSize="25%" minSize="10%" maxSize="500px"> 7 Using a Pane allows you to specify any constraints directly 8 </Pane> 9</SplitPane>;
Pull request
https://github.com/tomkp/react-split-pane/pull/240
More discussion
https://github.com/tomkp/react-split-pane/issues/233
Contributing
I'm always happy to receive Pull Requests for contributions of any kind.
Please include tests and/or update the examples if possible.
Thanks, Tom
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/9 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build-test.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/tomkp/react-split-pane/build-test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/tomkp/react-split-pane/build-test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-test.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/tomkp/react-split-pane/build-test.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 24 are checked with a SAST tool
Reason
118 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-2v5f-23xc-v9qr
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-ccrp-c664-8p4j
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.8
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More