Split Pane v2

[tomkp]

I'm working on an updated version of this library - using some updated methods and tooling.

I'll push a new branch soon for anyone interested in helping out...

[wiesson]

What kind of help do you need?

[tomkp]

First of all I need help in defining what a v2 would look like...

Here's a starter list:

• Simplify the API
• Multiple panes support
• Move away from using inline-style-prefixer- possibly use styled-components instead?
• Improve bundling of the component - rollup?
• All ideas welcome!

Multiple panes support

<SplitPane>
	<div>one</div>
	<div>two</div>
	<div>three</div>
</SplitPane>

and

<SplitPane>
	<Pane>one</Pane>
	<Pane>two</Pane>
	<Pane>three</Pane>
</SplitPane>

Move Pane specific Props onto the <Pane /> component.

<SplitPane>
	<Pane minSize="50px" maxSize="200px" className="pane1" style={pane1Styles}>one</Pane>
	<Pane>two</Pane>
</SplitPane>

I'm open to suggestions on any ideas - and what should take priority - and keen to involve any one who wants to help design / develop etc...

I'll try and push a branch that shows what I've got so far....

[whitecrownclown]

I'm up for lending a hand in developing.

[tomkp]

@whitecrownclown @wiesson Great! I'll get back soon with some plans - feel free to chip in with any ideas!

[rajsek]

Cool.. if possible, I too like contribute to this repo

[unconfident]

Would appreciate if percentage based panes could stay percentage based after resizing. Maybe put it behind a feature switch. It seems that in V1 it always uses pixels after manual resize

[wiesson]

If the split pane is mainly used for backend applications (or let's say modern browsers), then css grid could solve a lot of problems.

[tomkp]

I've just pushed my first v2 branch...

#240

It's very much a work in progress but demonstrates some of the ideas.

Check out the demo

Feel free to get involved - all help welcome!

Thanks
Tom

[rokoroku]

Could you add support to allow custom classname for .disabled state ? because I use css-loader configured to transform local css class names into uglified hash.

[marbemac]

This looks preeetty freaking sweet! Not expecting it to be ready now or anything, but anything we should know if we want to try it out ourselves? Known major bugs or anything?

Also, any idea when onChange/events might be supported? Really the only thing we need (to preserve position in local storage) that is not yet in there.

[hongbo-miao]

Maybe publish to npm as next version, so we can easily try it? Thanks

[tomkp]

@hongbo-miao good idea....
You should be able to now install it as react-split-pane@next... hope it all goes well!
Happy to take a look at any PRs...
Thanks

[jaotors]

@tomkp hi, how do I import the Pane? I'm testing it and don't know if it is import SplitPane, { Pane } from 'react-split-pane' or import Pane from 'react-split-pane/Pane'

[jacargentina]

@tomkp I cant see there is some way to pass className to the subcomponents; for example, in my current project, i'm using postcss for styling, so would be nice for example to style the Resizer with a given className. ie:

import theme from './styles.css';

<SplitPane resizerClassName={theme.resizer}>
   ...
</SplitPane>

Any change to get this new prop?

[walerun]

@tomkp v2 demo looks really good. I'd like to contribute some improvements. I've made some experiments, you can find example here and my fork.
Here are my suggestions:

• Currently, you can set the initial size of the pane in px, but it's converted to % and it's a bit confusing when you resize the window the initial size in px will be lost. What if the units would stay as they were initially? As it's based on CSS flex you can use px, %, and ratio units all together as they combine well via css. I've submitted PR#264
• To build layout dynamically it would be useful to have Layout component that builds the layout by config. The API for that could be similar like in react-mosaic So you would have a choice to use one Layout component with config or just build the layout using Pane and SplitPane as it is now.

What do you think about it guys? If it's reasonable It would be my pleasure to make this great lib better.

[Nantris]

Are there API changes/breaking changes in Version 2.0? I don't see any docs to reference. Maybe I'm not looking in the right place.

Thanks for the amazing project @tomkp

[walerun]

@slapbox there are no updated docs. But you can find some details from PR

[Bizarrus]

How to import the Pane component? @jaotors had ask these question, but no answers was given.

[Bizarrus]

@jaotors i've found the solution!

You can impot the Pane component as follow:

import Pane from 'react-split-pane/lib/Pane';

[orlowang]

is version 2 stable? seems stop update here

[mk48]

hi all, is version 2 released?

[akphi]

I think there's a problem when there's multiple <Pane> with props sharing the same parent <SplitPane>. For example in the demo, if you try to resize using the first resizer from the left, you will see something weird. Maybe it's some weird interaction between initialSize, minSize and maxSize.

UPDATE: Also, I cannot reproduce reliably, but sometimes, while using component, I got an error like this:

TypeError: _this.props.innerRef is not a function
Pane._this.setRef
node_modules/react-split-pane/lib/Pane.js:126
123 | }
124 |
125 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Pane.proto || > Object.getPrototypeOf(Pane)).call.apply(_ref2, [this].concat(args))), _this), _this.setRef = function (element) {
126 | _this.props.innerRef(_this.props.index, element);
| ^ 127 | }, _temp), _possibleConstructorReturn(_this, _ret);
128 | }
129 |

but then if I use <div> instead, it works fine

Also, any progress on v2 release @wuweiweiwu @tomkp ?

[linrongbin]

I do really need toggle panel feature.
Can we have it?

[DaleSalcedo]

Were some of the main features like onDragStarted and onDragFinished removed? I'm trying to use them and it doesn't seem to be working properly.

[hueper]

Were some of the main features like onDragStarted and onDragFinished removed? I'm trying to use them and it doesn't seem to be working properly.

It seems like onDragStarted and onDragFinished were replaced by onResizeStart and onResizeEnd:
https://github.com/tomkp/react-split-pane/blob/v2/src/SplitPane.js

[jabidof]

Hello!
Any plan to add "onDoubleClick" event for V2?
Goal is to have a "close pane on double-click"

Thanks for the nice module!

[amcdnl]

Any updates?

[behzad888]

Any updates?

[kayesn786]

Hi,

I am getting the following warnings. @tomkp @wuweiweiwu any workaround for this?
Node.js v12.16.3.

[horacioh]

it would be awesome to have a hook-base version of this library!!

I might play a little bit with this idea and come back with a POC

[paveler]

Hi! Any ideas how to fix error while using http://react-split-pane-v2.surge.sh/?InitialPercentageVerticalExample

<SplitPane>
          <Pane initialSize="20%">This Pane has initial size of 20%</Pane>
          <Pane/>
</SplitPane>   

When I use <Pane>, I get an error:

Unhandled rejection Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I use <div> instead of <Pane>, it's OK, but I need InitialSize

[tsiq-bertram]

Hi! Any ideas how to fix error while using http://react-split-pane-v2.surge.sh/?InitialPercentageVerticalExample

<SplitPane>
          <Pane initialSize="20%">This Pane has initial size of 20%</Pane>
          <Pane/>
</SplitPane>   

When I use <Pane>, I get an error:

Unhandled rejection Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I use <div> instead of <Pane>, it's OK, but I need InitialSize

I was able to fix this by directly importing the Pane from lib:

import Pane from 'react-split-pane/lib/Pane';

[kavyavedagiri]

i am currently working on the project where I have video at one side and content at the other side. if I use the dragged the contents are not responsive since the window width is not equal to pan width is there any way I can solve this?

[55Cancri]

it would be awesome to have a hook-base version of this library!!

I might play a little bit with this idea and come back with a POC

I'm willing to help! We need to get this project to the finish line! Vscode seems to have a really robost split pane with its split terminals. We could even start a whole new project and build from the ground up with hooks, typescript, and all the features others have requested such as double click, snapping, animated sliding, etc.

The api for this project is a really good base to use. Anyone else interested in helping out?

[mortalYoung]

Hey guys, I wonder if someone could tell me that this repository is still being maintained or not :(

[shivakantshukla55]

Eagerly waiting for the stable release of v2.

[shivakantshukla55]

Hello @tomkp Thanks a lot for this library.
I am using v2 and i am facing some issue hope you can help.
Issue:
I am using multiple vertical Example. problem is even if i have given minSize to Pane and i am trying to drag to the right, it is not allowing me to drag less than the minimum size which is correct but as soon as i cross the next Pane while dragging the behaviour is little bit weird.
Last sizes on onChange function i am getting is like ["398.66px", "0.00px", "200px"]. Middleone should be the minSize which is 50px not 0px.

import "./styles.css";
import SplitPane from "react-split-pane/lib/SplitPane";
import Pane from "react-split-pane/lib/Pane";

export default function App() {
  const handleChange = (sizes) => {
    console.log(sizes, "sizes-onchange");
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="parent">
        <SplitPane split="vertical" onChange={handleChange}>
          <Pane initialSize="200px" minSize="50px">
            <div className="c1"></div>
          </Pane>
          <Pane initialSize="200px" minSize="50px">
            <div className="c2"></div>
          </Pane>
          <Pane initialSize="200px" minSize="50px">
            <div className="c3"></div>
          </Pane>
        </SplitPane>
      </div>
    </div>
  );
}

Styles

.parent {
  width: 600px;
  border: 1px solid black;
}

.c1,
.c2,
.c3 {
  width: 100%;
  height: 100px;
}

.c1 {
  background-color: red;
}

.c2 {
  background-color: green;
}

.c3 {
  background-color: blue;
}

Link to codeSandbox => Link

To recreate on condeSandbox:
Drag the first pane to the right till it reaches the next Pane. You will be not able to see the dragging after the minSize but still try to drag it to the right.

I know this is not yet stable. But any workaround. or any kind of suggestion will be very helpful.
Thank you once again.

P.S. i have tried it with percentage value as well. still the issue is same.

[mengbo-ji]

react_devtools_backend.js:2540 TypeError: Cannot read properties of undefined (reading 'object')
at glamorous.esm.js:696

After build under vite, the esm file is impure

[xDSUP]

Hello @tomkp Thanks a lot for this library.
I am using v2 and i am facing some issue.
Issue:

../../../../target/bs5/node_modules/react-split-pane-v2-ts/index.d.ts:20:14 - error TS2709: Cannot use namespace 'Prefixer' as a type.
20   prefixer?: Prefixer;

Solving the problem: replace prefixer?: Prefixer; with prefixer?: Prefixer.Prefix;

[mystery078]

react_devtools_backend.js:2540 TypeError: Cannot read properties of undefined (reading 'object') at glamorous.esm.js:696

After build under vite, the esm file is impure

Hi, do u find out how to build now, i have same problem like u, local run is ok but can not build with vite :(

[mystery078]

@tomkp hi, can you help me, i can't run build :(

[Sasha411]

@mystery078 were you able to resolve the issue I am also stuck with the same problem.

[mystery078]

@mystery078 were you able to resolve the issue I am also stuck with the same problem.

u can build with react-script but not vite :(

[MaximBG]

I upgraded to v.2 and found two small issues:

1. Typescript definitions are not updated
2. Pane component is not exported, so instead of
   import SplitPane, { Pane } from 'react-split-pane';
   as specified in example one have to write:
   import SplitPane from 'react-split-pane'
   import Pane from 'react-split-pane/lib/Pane'