yyllff/split-pane-react

Resizable split panes for React.js.

中文

split-pane-react

Resizable split panes for React.js.Check out the live demo. Different themes.

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.
• 👷‍♂️Support flexible and convenient customization of sash.

Installing

# use npm
npm install split-pane-react

# or if you use yarn
yarn add split-pane-react

Example Usage

import React, { useState } from 'react';
import SplitPane, { Pane } from 'split-pane-react';
import 'split-pane-react/esm/themes/default.css';

function style (color) {
  return {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: color
  };
}

function App () {
  const [sizes, setSizes] = useState([100, '30%', 'auto']);

  return (
    <div style={{ height: 500 }}>
      <SplitPane
        split='vertical'
        sizes={sizes}
        onChange={setSizes}
      >
        <Pane minSize={50} maxSize='50%'>
          <div style={style('#ddd')}>
            pane1
          </div>
        </Pane>
        <div style={style('#ccc')}>
          pane2
        </div>
        <div style={style('#eee')}>
          pane3
        </div>
      </SplitPane>
    </div>
  );
};

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
• Other demo themes.

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. The project will always be maintained. If you have a good idea, you can propose a merge. If this component helps you, please leave your star. Those who need it will be very grateful.

split-pane-react's Issues

最新vite生成的react 模板代码无法使用

Broken in React 18

Hi there,

Just trying to get your simple example up and running - no dice:

https://codesandbox.io/s/epic-lake-30cfen?file=/src/proto.tsx

Cheers

SplitPane, sashRender prop required?

Hey first time starting my own project,
I started using SplitPane for a simple vertical pane
from the storybook reference only sizes and onChange seems to be used as props
This example here

As prop seems sashRender is also required, why is that?
Could I get some help on this?

This is what I have written

      <SplitPane
        sizes={sizes}
        onChange={setSizes}
      >
        <Pane
          className="emptyInvoiceView"
          style={{ background: "grey", height: "100%" }}
          minSize="10%"
        >
          <CreateEmptyInvoiceView />
        </Pane>
      </SplitPane>

Error message is

Property 'sashRender' is missing in type '{ children: Element[]; sizes: (string | number)[]; onChange: Dispatch<SetStateAction<(string | number)[]>>; }' but required in type 'ISplitProps'.ts(2741)

FR: Disable user-select on .react-split__sash by default

Feature request:

Current behavior:
Dragging the divider outside of the split pane selects text.

Expected behavior:
Dragging the divider of the split pane doesn't select text.

---

Proposed changes:
Modify the default CSS to disable user-select on the divider:

.react-split__sash {
   user-select: none;
}

TS2322: Type 'Element | undefined' is not assignable to type 'Element'.   Type 'undefined' is not assignable to type 'ReactElement<any, any>'

thanks very much for your project

i hope if the currentSelectedTask === undefine , do not render the second <Pane>

but i got a ts error:
TS2322: Type 'Element | undefined' is not assignable to type 'Element'.   Type 'undefined' is not assignable to type 'ReactElement<any, any>

Naming of direction

In layout system, de facto standard naming rule of "horizontal" and "vertical" is related by the affected Elements placement.

Which is

A-B-C : This is horizontal

A
|
B
|
C : This is Vertical

But this library uses inversed naming rule of horizontal and vertical.

If you are considered about the version compatiability, I think it'd be better to create new prop (named orientation or direction)

By the way, I like this library. Well maded. Thanks.

output to commonjs

In our company we would want to use this package but it's only outputted as ESM, is there a way to output in commonjs as well?

Jest - Can't find module Error for split-pane-react

I am trying to test my component with [email protected] with Jest in a Next.js project with typescript.

I am receiving the error as :
Cannot find module 'split-pane-react' from 'my component path'
on running the test case.

I have tried adding the path in moduleNameMapper in jest.config.js as
'split-pane-react': '<rootDir>/node_modules/split-pane-react/esm/index.js'
but it is giving an error of export like this

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './SplitPane';
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

Package versions:
"react": "18.2.0",
"next": "12.3.4",
"jest": "29.7.0",
"ts-jest": "29.1.1",
"ts-node": "10.9.1",

Pane is always expected to be the direct child

Nice work on the component, I like the flexibility it offers.

I facing one issue though. Because of this piece of code, SplitPane is always expecting <Pane> as a direct child, meaning that I can't do something like this:

const MyPane = ({children}) => (<Pane minSize={200} maxSize={500}>{children}</Pane>);

const MyPage = () => (
  <SplitPane>
    <MyPane>Foo</MyPane>
    <MyPane>Bar</MyPane>
  </SplitPane>
);

This is just a simplified example, <MyPane> can be very complex with a lot of customization.

Typescript error

I'm trying to get this to work in my vite project, I keep on getting this error:

node_modules/split-pane-react/src/SplitPane.tsx:122:46 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IAxis'.
  No index signature with a parameter of type 'string' was found on type 'IAxis'.

122         let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
                                                 ~~~~~~~~~~~~~~~~~~~~~~~

No resize if mouse moves fast

Nice work on the component. When I move my mouse a quickly, the splitter stays behind and no resize happens.

Btw, I'm using an element on the left panel with both width and height set to full. Not sure if it can be related.

SashContent children and Typescript

I'm trying to use this in a Next w/Typescript project:

<SashContent className={styles.sashWrapLineActive}>
  <span className={styles.sashWrapLine}></span>
</SashContent>

Typescript complains about the span element:

types.d.ts(60, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & ISashContentProps'

Do I need to add anything to allow the element or is this a bug in split-pane-react?
On the interface, I see children is defined as JSX.Element[]

Resize with full height

I am trying to replicate resizing if height was 100% and below is my working code. I was wondering if there is a better way for resizing?

 const [windowDimension, detectHW] = useState({
    winHeight: window.innerHeight ,
  });

const detectSize = () => {
    detectHW({
      winHeight: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener("resize", detectSize);
    return () => {
      window.removeEventListener("resize", detectSize);
    };
  }, [windowDimension]);

 return (
    <div style={{height: windowDimension.winHeight}}>

Reference: https://www.youtube.com/watch?v=AXQs8dr1VzY

maxSize and minSize aren't working for me:

example can be found here: https://62a261c8d8fc7c6bcee1856c.clutch.host/

left and right panels have maxs and mins but don't seem to react to that:

                      <Pane
                       variants={b.getVariants(undefined)}
                       sx={{
                         height: '100%',
                       }}
                       minSize={230}
                       maxSize={'50%'}
                       key={getKey(report, '20_275', 'pane-3')}
                       data-d={getKey(report, '20_275', 'pane-3')}
                     >

could be that i'm rewrapping the component using Styled from mui to accomplish this? but would be somewhat suprising as all other behaviors work

Must give container height .. cant use with dyanmic child content

<div style={{ height: 500 }}> <SplitPane

Is there no way to have this node module work with passing in height: 100%? ... having to set a fixed height limits the use.

Mobile

I can't resize the panels on a mobile device.
It can be simulated in chrome developer tools.

Maybe due to the width of the divider: can it be made thicker and more visible?

Typescript: Property 'sashRender' is missing in type

Property 'sashRender' is missing in type '{ children: Element[]; sizes: (string | number)[]; onChange: Dispatch<SetStateAction<(string | number)[]>>; }' but required in type 'ISplitProps'.ts(2741)

I suppose you should accept undefined for sashRender.
Had to add sashRender={() => null} to make TS accept it.

Thanks for the good job! Nice lib handling the border cases nicely!

good job

first comment,
hope you can make it better

MarqueeSelection

I've found that MarqueeSelection is causing an issue and the split pane does not resize.

As a workaround I've had to delete the MarqueeSelection component: see my commit below

giuliohome-org/todo-csharp-sql@4287805

Do you know what is going on?