npmpackage.info

Gathering detailed insights and metrics for react-split-pane

Other packages similar to react-split-pane

@rexxars/react-split-pane

1.0.0

React split-pane component

react-split-pane-next

1.0.6

React split-pane component

allotment

1.20.3

React split-pane component

@kadira/react-split-pane

1.4.7

React split-pane component

Gathering detailed insights and metrics for react-split-pane

react-split-pane - 0.1.92 | npmpackage.info

react-split-pane

React split-pane component

0.1.92

3,268

MIT

JavaScript

9.28 kB

91,111,427 2.8

Installations

npm install react-split-pane

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

12.15.0

NPM Version

6.13.4 Score

94.2

Supply Chain

94.9

Quality

75.6

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

49

Total

635

Closed

385

Merged

201

Issues

Open

118

Total

210

Closed

92

Releases

v0.1.92

Updated on Aug 10, 2020

v0.1.87

Updated on Mar 20, 2019

v0.1.85

Updated on Dec 10, 2018

v0.1.84

Updated on Sep 10, 2018

v0.1.83

Updated on Sep 08, 2018

v0.1.82

Updated on Jul 11, 2018

View All 8 releases

Languages

JavaScript

CSS

JavaScript (97.69%)

CSS (2.31%)

Developer

tomkp

Download Statistics

Total Downloads

91,111,427

Last Day

37,004

Last Week

193,351

Last Month

800,436

Last Year

8,286,619

GitHub Statistics

MIT License

3,268 Stars

673 Commits

415 Forks

34 Watchers

48 Branches

49 Contributors

Updated on May 19, 2025

Bundle Size

39.27 kB

Minified

9.28 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 49 Contributors

Package Meta Information

Latest Version

0.1.92

Package Id

react-split-pane@0.1.92

Size

10.96 kB

NPM Version

6.13.4

Node Version

12.15.0

Published on

Aug 10, 2020

Total Downloads

Cumulative downloads

Total Downloads

91,111,427

Last Day

-2.3%

37,004

Compared to previous day

Last Week

2.8%

193,351

Compared to previous week

Last Month

17%

800,436

Compared to previous month

Last Year

-3.6%

8,286,619

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Split Pane

NPM license

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
6
7## Example Usage
8
9```jsx
10<SplitPane split="vertical" minSize={50} defaultSize={100}>
11  <div />
12  <div />
13</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 panes
pane1Style - Styling to be applied to the first pane, with precedence over paneStyle
pane2Style - Styling to be applied to the second pane, with precedence over paneStyle
resizerStyle - 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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

124 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
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-vjh7-7g9h-fjfh
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
Warn: Project is vulnerable to: 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-rhx6-c78j-4q9w
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-x7hr-w5r2-h6wg
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-w5hq-hm5m-4548
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 2025-05-12

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

Other packages similar to react-split-pane

Other packages similar to react-split-pane

react-split-pane

Installations

Developer Guide

Yes

CommonJS

12.15.0

6.13.4

Score

Pull Requests

49

635

385

201

Issues

118

210

92

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

39.27 kB

9.28 kB

Maintainers

Package Meta Information

Total Downloads

91,111,427

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Split Pane

Installing

Props

primary

maxSize

step

onDragStarted

onDragFinished

onChange

Inline Styles

Persisting Positions

Example styling

New Version

Contributing

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10