tomkp / react-split-pane

React split-pane component

React Split Pane

Split-Pane React component, can be nested or split vertically or horizontally!

Installing

npm install react-split-pane

# or if you use yarn

yarn add react-split-pane

Example Usage

<SplitPane split="vertical" minSize={50} defaultSize={100}>
  <div />
  <div />
</SplitPane>

<SplitPane split="vertical" minSize={50}>
  <div />
  <SplitPane split="horizontal">
    <div />
    <div />
  </SplitPane>
</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.

<SplitPane split="vertical" defaultSize={200} primary="second">
  <div />
  <div />
</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:

<SplitPane
  split="vertical"
  minSize={50}
  defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}
  onChange={(size) => localStorage.setItem('splitPos', size)}
>
  <div />
  <div />
</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.

.Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

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

npm install react-split-pane@next

# or if you use yarn

yarn add react-split-pane@next

Usage

import SplitPane, { Pane } from 'react-split-pane';

<SplitPane split="vertical">
  <Pane initialSize="200px">You can use a Pane component</Pane>
  <div>or you can use a plain old div</div>
  <Pane initialSize="25%" minSize="10%" maxSize="500px">
    Using a Pane allows you to specify any constraints directly
  </Pane>
</SplitPane>;

Pull request

#240

More discussion

#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

react-split-pane's Issues

Toggle panes?

Is there a way to hide panes so that the other pane occupies all the space of the parent? Preferably in a way that the user defined split is restored if the pane is unhidden. I guess the structure could be dynamically set (e.g. change from a <SplitPane><Pane1 /><Pane2 /></SplitPane> to just <Pane1 />), but I think this would unmount Pane1 in the transition which is undesired.

Adding 'padding: 10px' to .Pane class will break resize functionality.

Hi,
you can reproduce this error by adding class

.Pane {
    padding: 10px;   
}

to example in index.html.
Then try to resize Pane by dragging Resizer.

Resizer will be moved to the left for default SplitPane and to the right for SplitPane with prop primary="second"

Jan

Publish new version?

Would you be able to publish the latest version of master to npm as 0.1.36?

Looking to pull the latest copy that doesn't include react-vendor-prefix

Lock user-select only when you drag

Vendor prefixing with webpack

When you open the demo page in Safari, nothing display.
My Safari version is 8.0.5

Way to update size by props?

Hi,
Just want to set size of the animation by using react-tween-state, but seems for now, there is no such way to change the size by props.size dynamically.

And also, I think we should provide a way to disable the ability to drag the resizer. Thx.

How to get the current widths of left pane and right pane?

I want to embed AceEditor in both left and right pane. I need to set the current width to their div as a style prop but I don't know how to get the values.

render() {
    var Ace1 = {
        width: The_Current_Left_Pane_Width,    // How to get this value?
        height: "100%"
    };
    var Ace2 = {
        width: The_Current_Right_Pane_Width,  // How to get this value?
        height: "100%"
    };
    return (
        <div ref="root">
            <SplitPane
                split="vertical"
                defaultSize={'72%'}
                minSize={50}
                maxSize={-50}
            >
                <div style={Ace1}><AceEditor /></div>
                <div style={Ace2}><AceEditor /></div>
            </SplitPane>
        </div>
    );
}

Can only move the resizer once

After moving the resizer once, it cannot be moved again. I'm in Chrome 52.0.2743.116 m (64-bit) writing an extension. I'd be happy to provide more details, just let me know what would be useful.

minSize only enforced on Pane1

I can see that min-width only gets set on Pane1 (or may be just the default) but it doesn't enforce the width restriction on the 2nd Pane.

allowResize instead of enableResizing

According to documentation prop name for blocking resizing is enableResizing but actually it is allowResize

import not working

import { SplitPane } from 'react-split-pane/lib/SplitPane';
or
import { SplitPane } from 'react-split-pane

doesn't import module

application.self.js?body=1:97437 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of....

Script Error in IE 9-11

When placing a table inside one of the SplitPanes, resizing the panes in IE 11 (and presumably 9 and 10) throws the error "800a025e". This is caused by SplitPane.js:181: window.getSelection().removeAllRanges();

Without any further investigation, this seems to discuss this exact issue:
http://stackoverflow.com/questions/22914075/javascript-error-800a025e-using-range-selector#37580789

defaultSize percentage

Since the latest changes I'm receiving a warning on panes with defaultSize='50%', since the PropTypes are now supposed to be numbers. How do I pass in a percentage on the new version?
Thanks

Resize both vertical and horizontal at their touching point

Feature request

Support for both manual and programmatic resize at the same time

Hi! I need to allow user do manual resize of panes and also provide buttons to choose some predefined configurations. I don't know how to do that. Could you advice me something?

I read source code and it seems it's impossible to do at the current version:
https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L121
If you set defaultSize changeable by buttons, then when you resize panes manually default size doesn't work anymore.
If you try to change size value it's impossible to do manual resize and even to set onChange callback:
https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L50

What do you think guys?

Doesn't work well with iframes

If I try to embed iframes in the split panes the dragging doesnt work very well. As soon as the mouse enters the iframe it stops dragging. Is there any way to fix this?

Regards

Respond to window resize

When the window size changes, I want to keep the same proportional size of my panes.

For example:

• I make a resizable pane at the bottom.
• The user has a window 600px high
• The user drags the bottom panel to take up 200px of the height, and the top pane is sized by the browser to 400px.
• The user maximized their browser and the window height is now 1200px

In this case the bottom pane was taking 1/3 of the height and the top pane 2/3 of the height, but after resize the bottom pane is only 1/6 of the height. I want to be able to keep the proportions so the bottom pane would grow to 400px high on window resize.

I can make it work with code outside the component, but it would feel pretty natural to either pass in a prop that says to use proportional sizing when the window size changes, or to pass in a callback to use when the window size changes.
Edit: it is actually pretty tricky to get it to change size on window resize. I have a default height of 30%, which I use to set defaultSize prop to defaultHeight * window.innerHeight and that works initially, and resizes to 30% whenever I change the window height, but as soon as I drag the panel to a different size, it ignores defaultHeight so it is stuck at the pixel size it has been dragged to. If I set size prop I can no longer drag it to resize.

Styling Resizer with classes instead of inline?

Whenever I try to use a class instead of passing styles inline to the resizer I get the following:

Error in response to storage.get: Invariant Violation: Thestyleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by 'Resizer'

Can the resizer be styled with classes?

Extra CSS class on SplitPane when dragging

It would be useful if SplitPane got some extra CSS class when dragging takes place. Without this, it is a bit difficult to implement CSS transitions.

I'm currently using this pretty dirty hack:

// MyComponent.jsx
// ...
  _handleSplitPaneOnDragStarted() {
    const splitPaneDiv = this.refs.splitPane.refs.splitPane;
    // eslint-disable-next-line prefer-template
    splitPaneDiv.className = splitPaneDiv.className + ' SplitPane_moving';
  }
  _handleSplitPaneOnDragFinished() {
    const splitPaneDiv = this.refs.splitPane.refs.splitPane;
    splitPaneDiv.className = splitPaneDiv.className.replace(' SplitPane_moving', '');

    const splitPane = this.refs.splitPane;
    // save splitPane.state.draggedSize
  }
// ...

// MyComponent.less
.my-component {
  &>.SplitPane>.Pane1,
  &>.SplitPane>.Pane2 {
    transition: all 200ms ease;
    transition-property: left, width;
  }
  &>.SplitPane_moving>.Pane1,
  &>.SplitPane_moving>.Pane2 {
    transition: none;
  }
}

How to set dimensions by %?

Awesome work. You've saved me so much time. Is it possible to set default size by viewport dimensions as a %?

Server side error - window is not defined

Does server side rendering works ?

ReferenceError: window is not defined
at /Users/[User]/[Project]/node_modules/react-vendor-prefix/dist/index.js:1:994
at Object. (/Users/[User]/[Project]/node_modules/react-vendor-prefix/dist/index.js:1:1243)
at t (/Users/[User]/[Project]/node_modules/react-vendor-prefix/dist/index.js:1:183)
at /Users/[User]/[Project]/node_modules/react-vendor-prefix/dist/index.js:1:270
at Object. (/Users/[User]/[Project]/node_modules/react-vendor-prefix/dist/index.js:1:275)
at Module._compile (module.js:413:34)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (/Users/[User]/[Project]/node_modules/react-split-pane-2/lib/Pane.js:11:26)
at Module._compile (module.js:413:34)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) as .js
[nodemon] app crashed - waiting for file changes before starting...

Update to react v15.0

See https://facebook.github.io/react/index.html

After upgrading to [email protected] npm starts complaining:

npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.

Patch example: react-grid-layout/react-grid-layout@ef335bc
(not submitting a PR since I don't know whether it is just about changing a version or there should be some modifications in the code too)

Does not work on touch devices

Even if the splitter can be "selected" (width changes in the demo), there is no way to resize the panes.
Only tried on android (Chrome and Firefox).

inconsistent default value of "split"

The default value of "split" is "vertical" here: https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L104

But the default value is "horizontal" here: https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L64-L65

This makes pane get wrong size when omitting "split" property.

Resizing doesn't work with React 0.14.7

Hello.
I'm getting the following message when trying to rezie panes:
_ reactDom2.default.findDOMNode is not a function
It's about the SplitPane.js onMouseMove function (line 70).
If you change the _reactDom2.default.findDOMNode(ref) to _react.findDOMNode(ref) it works fine!

Nest component in the Resizer

Hi,

I'd like to customize the look of the resizer attaching an HTML element to it (eg. a toolbar). This would allow an horizontal Resizer to behave like in Chrome or Firefox when you open the console/developer tools: when you resize it, you can always see the 'Elements | Console | Sources | Network | ...' bar while the pane below is resizable and has a scrollbar.

It might be possible to do it with CSS only but it seems tricky. What I'd like to do is something like:

<SplitPane split="horizontal" afterResizer={<ToolBar/>}>
   <div> top pane </div>
   <div> bottom pane </div>
</SplitPane>

before/afterResizer would allow to place the component over or below the resizer.

What do you think?

If the idea seems reasonable to you I'll submit a PR.

Regards,
Paul

remove overflow for Pane.js

Great component!

In lib/Pane.js, please remove overflow so the user of the component can decide whether to include it or not.

Thanks,
Ed
var style = {
flex: 1,
position: 'relative',
outline: 'none',
// overflow: 'auto'
};

Failing on Jest tests.

I use Jest to write tests.
When I try to require my react component which using react-split-pane, my tests fails.
In console: TypeError: Cannot read property '0' of undefined at eval (node_modules\react-split-pane\node_modules\react-vendor-prefix\dist\index.js:
It happens on this line: "ms" === t ? t : t[0].toUpperCase() + t.substr(1)
Do you have some ideas??

Error running with webpack-dev-server (using babel)

Hi (sorry about the crap formatting),

Installed in my project with:

npm install react-split-pane --save

Then I import it in one of my React components:

import SplitPane from 'react-split-pane';

Then I run it with webpack-dev-server.

./node_modules/.bin/webpack-dev-server

I get this error:

ERROR in ./~/react-split-pane/index.js
Module parse failed: /Applications/MAMP/htdocs/ProvingGround/atomsmith-classroom/node_modules/react-split-pane/index.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import SplitPane from './lib/SplitPane';
|
| module.exports = SplitPane;

@ ./app/views/Index.js 19:32-59

webpack is configured to use babel to transpile es6:

module: {
loaders: [
{
test: /.js$/,
exclude: /(node_modules/)/,
loader: 'babel-loader',
query: {compact: false}
}
]

}

Any thoughts about why it's failing?

Thanks.

Text is not selectable in panes

It seems as though the mouse listeners are making so that text within the panes cannot be selected.

UPDATE: I took a look today (sorry I didn't look on Friday, I was sort of busy) and I saw that this style attribute is applied:

userSelect: 'none'

https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L100

Is there a reason why selection is turned off? I can override it for my specific use, but I'm sort of curious about why this is the case. Thanks!

UPDATE 2: Okay, so it seems to cause highlighting when you drag the panes. I'm not sure if there's a way around this, but since it's somewhat of a preference thing I'll close this issue.

Custom react nodes for resizer

Hi @tomkp,
Thanks for the component. I forked this repo to allow users to add custom nodes inside the resizer. This also makes it easier to style the resizer without adding any global css. If you're interested in these changes, I'll send a pull-request.

Here's the source code for the demo. And here's a screenshot:

Layout is wrong when added in arbitrary component

I'm trying to add SplitPane somewhere deep in my structure, but it seems that due to position: absolute (which seems to be unnecessary when using flexbox btw). Is there any reason why it uses absolute positioning?

Text is not selectable in panes

There is a closed without fix issue (issue #7) that mentions the problem of not being able to select text within panes, and the problem of allowing user-select:text without additional coding.

Pull request #35 addresses this and offers a solution.

Horizontal SplitPane does not use full width

I am trying to use the SplitPanes with react 15.2.1

Its working great, I only faced the issue that the pane that is set to be the secondary pane of a horizontal SplitPane, would not resize to its full width, but keep to the max-width of its content.

I found a easy fix:
https://github.com/tomkp/react-split-pane/blob/master/src/Pane.js#L25

[edit:] actually forgot to say what the fix is :)
it is just removing line 25 ! [edit]

also, to get the width to respect paddings correctly, i also added

right: 0,
left: 0

here:
https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L168

Bootstrap CSS problem

Hi I am trying to include couple of react-bootstrap components inside the split pane, but it seems as soon as I import bootstrap.css I can not see any of my components and the split pane does not appear at all.

Thanks
-Selim

why react 14 in peer dependencies?

why do you still have react 14 in your package.json, if none of your plugins are using it?

"peerDependencies": { "react": "^0.14.8", "react-dom": "^0.14.8" },

Push v1.4.0 to github

I'm trying to patch some bugs over in react-storybook and it's requiring the latest v1.4.0 of split pane, but master only has 1.3.

Please push your latest code :)

Error while using react-split-pane npm package

i am facing following error when i tried to 'grunt serve'

ReferenceError: Unknown plugin "add-module-exports" specified in "F:\mercurial-repository-web\SureCallWeb\SureCallWebClient\SureCallWebTriage\node_modules\react-split-pane\package.json" at 0, attempted to resolve relative to "F:\mercurial-repository-web\SureCallWeb\SureCallWebClient\SureCallWebTriage\node_modules\react-split-pane" while parsing file: F:\mercurial-repository-web\SureCallWeb\SureCallWebClient\SureCallWebTriage\node_modules\react-split-pane\index.js

min-width for Pane2

Is there a way to set the min-width for Pane2 in props?

How to split into two parts?

<SplitPane split="horizontal" minSize="200">

the only limits the height of the upper part of the 200px，
how to limit the height of the lower half?
thx!

How to build the demo?

Hey.... This looks cool, but I'm not sure how to build the demo... Does it require gulp? If so, is there a gulpfile that's not included? And what if I wanted to just use this with the in browser JSX Transformer?

Thanks!

Flexbox prefix for old browsers

I would like to use this component also in project supports IE10. But you setup display: flex ... Did you ever consider to use library like this https://github.com/rofrischmann/inline-style-prefix-all

thx

Allow size override from props after resized

I'm storing the state of my interface in a MongoDB object, which makes it possible to update the look of several independent browser windows on fly (all changes in the layout are saved to that object using a Meteor method, then the updated data are pushed to all subscribed instances of the app).

This approach did not work well with SplitPane, so I had to write a small hack to make it work. The reason for the problem is in the way the component treats defaultSize and size.

Setting up size disables dragging and defaultSize is read only once and is ignored after resized becomes true. It would be nice if the component was tracking the changes in the defaultSize and was updating itself to it when this prop has changed.

Here is my current workaround (to help those who is facing something simiar):

export default class MyPage extends React.Component {
  constructor(props) {
    super(props);
    this._handleSplitPaneOnDragFinished = this._handleSplitPaneOnDragFinished.bind(this);
  }

  _handleSplitPaneOnDragFinished() {
    const splitPane = this.refs['splitPane'];
    const draggedSize = splitPane.state.draggedSize;

    updateInterfaceMongoDBObjectWithNewPaneSize(draggedSize);
    // ↑ this is not the actual way of updating interface object, but you get the point

    // ↓ this is what does the trick
    splitPane.setState({
      resized: false,
      draggedSize: undefined,
    });
  }

  render() {
    // Assume that interface is that object from MongoDB that has describes the current layout
    // (it is always up-to-date)
    const interface = props.interface;

   // part of return:
   <SplitPane split="vertical" minSize={ 100 } maxSize={ 400 }
          ref="splitPane"
          defaultSize={ interface.paneSize }
          onDragFinished={ this._handleSplitPaneOnDragFinished }
    >
  }
}

React as peer dep

I may be wrong, but should React and react dom be peer dependancies.
As it stands currently I get errors as there are multiple react instances in the project:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

If I manually remove the react from split-pane's node_modules, the problem is resolved.

Feature-request: maxSize property

How about adding a maxSize additionally to minSize?

I may contribute the corresponding code if this suggestion is fine for you.

Window Resize

Hi,

Please add window resize to the split panes.
For the moment this works for me :

componentWillReceiveProps(newPros){
const ref = this.refs.pane1;
if (ref && newPros.defaultSize && !this.state.resized) {
ref.setState({
size: newPros.defaultSize
});
}
},

Nesting doesn't work (should it?)

This is a handy component, but the following doesn't work as I would expect (only tested in FF):

      <SplitPane split="vertical" minSize="50">
        <SplitPane split="horizontal" minSize="50">
          <div></div>
          <div></div>
        </SplitPane>
        <SplitPane split="horizontal" minSize="50">
          <div></div>
          <div></div>
        </SplitPane>
      </SplitPane>

Is this scenario intended to work?

How to import Pane?

import {Pane, SplitPane} from 'react-split-pane';
Looks like this doesn't work.

With:

 <SplitPane split="horizontal" defaultSize={40}>
                    <ChatHeader key="ChatHeader" {...this.props}/>
                    <SplitPane split="horizontal">
                        <ChatMain key="ChatMain" {...this.props} />
                        <Pane minSize="70"><ChatFooter key="ChatFooter"/></Pane> 
                    </SplitPane>
</SplitPane>

Thanks!

Support a 3rd pane?

I don't know how hard it would be but it would be nice if there could be more than 2 panes.

Is it possible to return the new size in onDragFinished?

It would be useful if onDragFinished returns a new size like onChange does.