b-zurg/react-collapse-pane

The splittable, draggable, collapsible panel layout library 🎉

react-collapse-pane

This is intended to be the simple, reliable, configurable, and elegant solution to having splittable, draggable and collapsible panes in your React application.

[click for storybook demo]

[click for documentation site]

Getting Started 🚀

Install react-collapse-pane:

npm i react-collapse-pane

# or for yarn

yarn add react-collapse-pane

Once installed you can import the SplitPane component in your code.

import { SplitPane } from "react-collapse-pane";

If you're using Typescript the SplitPaneProps, as well as a few other helper types type is also available.

NOTE: Since the upgrade to MUI v5 you need to install a peer dependency style engine. Since there is a decision between styled components and emotion I did not make this an explicit dependency.

If you want to simply use the default then follow the install guide here https://mui.com/material-ui/getting-started/installation/ If you want to use styled components then follow the configuration guide here https://mui.com/material-ui/guides/styled-engine/

In the future this dependency will be removed, apologies for the hassle while that gets sorted out. The next version will be much leaner.

import { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from "react-collapse-pane";

Quick Start Usage 🔥

The only component you must interact with is SplitPane. This serves as a wrapper for all of the children you wish to lay out.

All you're required to give is a split prop which can be either "horizontal" or "vertical". This identifies what the orientation of the split panel will be.

<SplitPane split="vertical" collapse={true}>
  <div>This is the first div</div>
  <div>This is the second div</div>
  <div>This is the third div</div>
  This is the fourth but not a div!
</SplitPane>

What you just did is make a split collapsible panel layout!

Congrats! That was easy! 😁

This basically splits the children vertically (i.e. full-height split). The children can be any valid React child. If a child is null it will be excluded from being split or displayed.

By default there is a 1px divider with a grabbable surface of 1rem width or height (depending on the split). If you hover over the divider a button will appear that you can use to collapse the panel.

There is no limit to the number of elements you have as children. The SplitPane will split them all accordingly.

But what about styling the resizer, the buttons, controlling the animations, or RTL support? 😭

This library supports all of these things and more!

For more details check out the documentation

Documentation

Documentation can be found at https://b-zurg.github.io/react-collapse-pane/

If you notice an issue then please make an issue or a PR! All docs are generated from the docs folder in the master branch.

Contributing and PRs 💖

If you would like to contribute please check out the contributor guide

All contributions are welcome! All issues and feature requests are welcome!

Credit and Attribution 🙏

This project did not start off from scratch. The foundation of the project was the excellently written react-multi-split-pane library which is itself a typescript rewrite of the react-split-pane library.

Much gratitude to their authors, @NeoRaider and @tomkp

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Buzurg Arjmandi ⚠️ 📖 💻 🎨 💡 📦

hst44 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

react-collapse-pane's Issues

create new splitters from click

is it possible to create new splitters from a right click ->create new splitter (Horizontal or Vertical).

I'm looking for a way to create on the fly new splitters like a progressbar that I could split on the fly in multiple area with the resize functionnality.

[Suggestion]: Migrate to PBandJ

Given tsdx has been unmaintained for quite some time, it may make sense to migrate to PBandJ:

https://github.com/moishinetzer/pbandj

I'm happy to help make the transition if you need any help!

Does collapseDirection work?

I can't seem to get it to work with the collapseOptions. Codesandbox:

https://codesandbox.io/s/react-collapse-pane-down-hrov2?file=/src/App.js

Material-ui 5 (mui) support

Thanks for this useful library!

Is it possible to upgrade the material-ui version to the new 5 release?

The core package name has changed from @material-ui/core to @mui/material, and it also depends on @emotion/react and @emotion/styled.

Inaccurate width calculation for panes on container resize

When I collapse, if I don't have an onCollapse callback, the panel is being correctly collapsed to the size specified in collapseOptions.collapseSize. However, if I add the onCollapse callback, it's now being incorrectly collapsed.

I tried to log the sizes array passed to onCollapse. sizes[collapsedIdx] it's not the collapseSize, and it's not consistent either. Did it take the value from before the animation is finished?

For my specific case, I tried checking if sizes[collapsedIdx] is null. If it's not, I'm manually constructing a new array for the state. However I think this causes an infinite loop that I haven't been able to figure out where, and everything freezes.

---- Edit:

With further debugging, I think it's the width calculation returned incorrect result.
After some container resize, the flex-basis of all children doesn't add up to the container size.

One fix is to make the collapsed children has a flex-grow of 0. I have created a PR #80

Webpack error related to mui on typescript project

I got the following error when installing 3.0.1 and using it on react 18.2.0 and typescript 4.7.4.

ERROR in ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40  
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine\GlobalStyles'    

ERROR in ./node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine\StyledEngineProvider'

ERROR in ./node_modules/@mui/styled-engine/index.js 6:0-39
Module not found: Error: Can't resolve '@emotion/styled' in 'node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/styled-engine/index.js 30:0-62
Module not found: Error: Can't resolve '@emotion/react' in 'node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60 
export 'ThemeContext' (imported as 'StyledEngineThemeContext') was not found in 
'@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'css' (reexported as 'css') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'keyframes' (reexported as 'keyframes') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/react-collapse-pane/dist/react-collapse-pane.esm.js 2:0-48
Module not found: Error: Can't resolve 'styled-components' in 'node_modules\react-collapse-pane\dist'        

webpack compiled with 8 errors and 1 warning

Version `3.0.1` not loading properly

After installing v3.0.1m I'm seeing this:

ERROR in ./node_modules/react-collapse-pane/dist/react-collapse-pane.esm.js
Module not found: Error: Can't resolve '@mui/material' in CENSORED/node_modules/react-collapse-pane/dist'
 @ ./node_modules/react-collapse-pane/dist/react-collapse-pane.esm.js 3:0-49 172:8-12 173:8-12 174:8-12 175:8-12 476:51-55 482:36-40
 @ ./packages/core/src/components/SplitPane/SplitPane.tsx
 @ ./packages/core/src/components/SplitPane/index.ts
 @ ./packages/core/src/components/index.ts
 @ ./packages/core/src/index.ts
...

I uopgraded from v2, is there anything else I should do?

StrictMode check about

I got this when using react-collapse-pane in React.StrictMode

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
div
O@http://localhost:3000/static/js/vendors~main.chunk.js:404904:6
Transition@http://localhost:3000/static/js/vendors~main.chunk.js:398277:30
Fade@http://localhost:3000/static/js/vendors~main.chunk.js:334257:18
div
Resizer@http://localhost:3000/static/js/vendors~main.chunk.js:323839:20
div
O@http://localhost:3000/static/js/vendors~main.chunk.js:404904:6
SplitPane@http://localhost:3000/static/js/vendors~main.chunk.js:324631:41

Left pane gets narrower and narrower as you repeatedly collapse and return

Hi, thanks for very nice library.

Please see CodeSandbox for a sample of what appears to be problem with collapse.
https://codesandbox.io/s/react-collapse-pane37-forked-21whm?file=/src/App.js

What this sample shows is the following.
If you set collapsedSize to less than 50, the left pane gets narrower and narrower as you repeatedly collapse and return.

If this is a phenomenon that cannot be controlled by other options (simply put, "if it's a bug"), I would like to fix for the 1.4.2 version, not just the v2.0.x version. Because I am unable to upgrade my react version to 17 for some reason.

dynamically change of each pane

I am currently using the react-collapse-pane library to implement a split-pane layout in my React application. However, I have encountered an issue while attempting to update the pane sizing dynamically via JavaScript.

Implement the react-collapse-pane in a React application.
Create a split-pane layout with three panes (left, middle and right).
Attempt to programmatically update the size of one of the panes using JavaScript.

Expected Behavior:
When I update the size of the pane using JavaScript, I expect the UI to reflect the changes immediately, and the pane to resize accordingly.

Actual Behavior:
Despite my efforts to update the pane size using JavaScript (e.g., by changing the state that controls the pane size), the UI does not reflect the changes, and the pane size remains unchanged.

code example

const SplitScreen = () => {
const store = useStore();
const { reactSpliData, setReactSpliData } = store;
if (reactSpliData.childComponents.length === 0) {
setReactSpliData({
...reactSpliData,
childComponents,
});
}

const reactSplitPaneFunc = (reactSpliData) => {
return (
reactSpliData.childComponents.length > 0 && (

{reactSpliData.childComponents.map((pane) => (
<div
style={{
overflowY: "scroll",
height: "100vh",
}}
key={pane.id}
>
{pane.component}

))}

)
);
};

return

{reactSplitPaneFunc(reactSpliData)}

;
};

react-collapse-pane version: 3.0.1
React version:18.2.0
Browser: [Chrome
Operating System: Windows 10

Additional Information:
I have checked the React Developer Tools, and it appears that the state updates correctly, but the pane size does not update in the UI.

Please let me know if there is a workaround or any additional information required to address this issue. Thank you for your support and the effort put into maintaining this library!

onCollapse hook triggers when the size of the surrounding component is changed

It seems the onCollapse hook is triggered when the component containing the CollapsePane and its two components. For example because the browser size is changed and the layout is refreshed. I have no possibility to decide if the component was really collapsed or if only the size was changed.

I currently use version 2.0.1.

How To Toggle(Show/Hide) the pane

Hello All,

I have an requirement to toggle the pane

https://codesandbox.io/s/confident-water-fdwgr?file=/src/App.js

The above example is not working

Please let me know. How to solve this issue
Thank you

How to use onSaveSizes

Can you provide an example of how to use onSaveSizes?

React 17 gives findDomNode deprecated warnings

Repro code:

    <SplitPane split="vertical" collapse={true}>
      <div>a</div>
      <div>b</div>
    </SplitPane>

Console gives:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

is it possible to block split?

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 2.0.0 on branch master cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.4.2 <2.0.0 can be published from branch master.

The following commits are responsible for the invalid release:

• chore: remove yarn.lock and update broken package.json and storybook configuration (#50) (8ba689f)
• chore: Upgrade dependencies for v2 (#43) (639ef30)
• chore: create dependabot config file (#45) (9e53cc6)
• docs: Updated to reflect api changes (c2ccd62)
• docs: removed irrelevant section (b0964fa)
• chore: added meta tags for SEO (fff909b)
• fix: Bug where setState depth exceeded if user started dragging but did not move (e84614e)
• feat!: Offer simplified collapse defaults in the API (c8c01d1)
• refactor: Simply component definition and class generation (4b77e92)
• refactor: Moved Pane into component directory (c93f605)
• Create CNAME (f86344f)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch master with git revert or git reset.

A valid branch could be next.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

The height of a vertical splitter is equal to the browser window height and not to the height of a parent container

If I render a SplitPane inside of a fixed size div element, it has a bigger height than the div.

How could I fix it?

Thanks a lot!

Not compatible with ie11，an error is reported

I'm happy to find this library， but it doesn't seem to be compatible with ie11，The error is as follows:

minSizes prop ignored on window resize

if the user shrinks a window, the pane with minSizes set will shrink smaller than the minimal size.

I know this might be a browser issue that's hard to fix so feel free to close this. But this does cause some problems in my usage and any help to circumvent that would be greatly appreciated.

Allow collapse buttons to always be visible

This is a design decision that should be optional. It fits neatly into the buttonTransition collapse option as this indicates what the animation should be for showing/hiding the button. If we add a new possible value of none this makes sense, does not break existing usage, and is very easy to implement.

fix: When multiple panes are collapsed initial size calculation is wrong

This is because the previous sizes are not being added to the expanded pane after the previously collapsed panes, which means the flex-basis is innacurately small for the expanded pane

`styled-components` shouldn't be a dependency.

Hello there, thanks for the great library.

I noticed that styled-components is a library dependency, which is not a good practice.
Please mind the official styled-components docs https://styled-components.com/docs/faqs#marking-styledcomponents-as-external-in-your-package-dependencies.

In addition, to me it feels a bit odd that material-ui is a depednency only for the sake of transitions. Are there any slimer approaches?

Thanks.

Allow maximum size boundaries for panels

Similar to minSizes there should be a maxSizes option that will control the maximum width or height of a panel.

These two options should give people incredible flexibility when managing their layout.

Missing definition for Nullable<T> in SplitPane/index.tsx

Nullable is not defined in src/components/SplitPane/index.tsx which causes builds to fail when including a SplitPane via npm. Results in:

ERROR in ...\node_modules\react-collapse-pane\dist\components\SplitPane\index.d.ts
(8,35): error TS2304: Cannot find name 'Nullable'.
ERROR in ...\node_modules\react-collapse-pane\dist\components\SplitPane\index.d.ts
(34,22): error TS2304: Cannot find name 'Nullable'.

Can the SplitPane fit the size of its containing element?

Hello,

Is there a way to make it so that the SplitPane fits the size of its parent?
I have a container that has a defined size and I would like to use your component in it. But I can't make it fit the size of the parent: it grows out of it until it has the same size of the frame.
I made this sandboxe to explain my problem.
I would need the splitpane to have the same width of the green square, and a height that does not goes out of its containing div, how could I do that?
And as you can see, the footer is put under the header instead of under the splitpane, is it possible to do otherwise?

Thanks for your time !

fix: Animation running on initial render leads to jarring UX

Especially as certain size calculations can only happen after the component has mounted, the animation of collapsing a pane, or setting a proportional size is really annoying.

The animation should only happen based on user actions after the first render has happened.

Add note about polyfills to the readme

For the ionic framework users will need to add a polyfill for the getBoundingClientRect function.
Additionally for IE users will need to add an AbortController polyfill.

Both of these are not things that this library will solve but a note in the docs would be nice.

Window resize panel recalculation firing too often and sometimes failing to resize correctly.

Just a few more callbacks than I would have expected for a debounced resize. It's a bit of an edge case but for cases where people are using this lib in an app this might come up more often than you'd expect.

Additionally if a pane is collapsed and the resize makes the window bigger then the recalculated flex-basis is not correct.

[Feature Request] Add prop to change size of the panels after initial render

The only way to set the size of panels is using initialSizes. Is there anyway to change the size after the panels have been rendered?

initialSizes has no effect

Version 1.4.2

Hi mate, im having issues with the initialSizes prop, which does not seem to be responding to any values. The panes always render with a 1,1,1 ratio (even if the initialSizes prop has a [1,2,1] ratio)

I tried downgrading a few versions but had the same issue,
I tried upgrading to v2.0.0, but in this version I can't even move the bars.

Do you have any any idea what might be causing it?

const AppContent: React.FC = () => {
  const dispatch = useDispatch();
  const { theme, windowPaneLocations } = useSelector((state: StateInterface) => state.settings);
  const currentTheme = getTheme(theme);

  const updateWindowPaneLocations = useCallback(
    (value: number[]) => {
      dispatch(settingsActions.update({ windowPaneLocations: value }));
    },
    [dispatch],
  );

  return (
    <DndProvider backend={HTML5Backend}>
      <ThemeProvider theme={currentTheme}>
        <SplitPane
          split="vertical"
          initialSizes={windowPaneLocations}
          minSizes={250}
          hooks={{ onSaveSizes: (sizes) => updateWindowPaneLocations(sizes) }}
        >
          <CollectionView />
          <FolderView />
          <NoteView />
        </SplitPane>
      </ThemeProvider>
    </DndProvider>
  );
};

SplitPane crashes when only having a single child

Obviously the component makes no sense if you have a single child, but it shouldn't crash, but render the single child and provide the developer with a helpful error message.

Documentation website not accessible anymore

Thank you for the great library!
It seems that there is a problem with the documentation right now. I get the following error message on Chrome:

Your connection is not private
Attackers might be trying to steal your information from collapse-pane.zurg.dev (for example, passwords, messages or credit cards). Learn more
NET::ERR_CERT_COMMON_NAME_INVALID

Do not overwrite parent's div styling

I am trying to have the following structure but SplitPane seems to be overriding my css:

<div>
	<div>
		<SplitPlane>
			<div></div>
			<div><div/>
	<div>
<div>

fix: Memory leak in quick component unmounts

This happens only when unmounting the component quickly after mounting it.

react_devtools_backend.js:6 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Component (created by Component)
    in div (created by styled.div)
    in styled.div
    in div (created by styled.div)
    in styled.div
    in Unknown (created by SplitPane)
    in div (created by styled.div)
    in styled.div (created by SplitPane)
    in SplitPane (created by Component)
    in div (created by styled.div)
    in styled.div (created by Component)
    in Component (created by Component)
    in Component (created by Component)

I believe this has to do with the dragStateHandlers hook and the window-level event listeners that are firing off a set state after it's been unmounted. I will have to look into ensuring they are cleaned up.

fix: Initial sizes not calculating by ratio

If you pass in an initialSizes ratio initially (e.g. [1,2,1]) then the panels should, by default, make the two panels on the side of the middle one half of the size of the middle one.

This is currently not happening.

collapsedSize and buttonPositionOffset adjustments

Hi, ... very nice package.

I think I have found 3 small issues though.

1. react-collapse-pane/src/components/SplitPane/hooks/callbacks/useUncollapseSize.ts

   Line 24 in 8fe33bd

   const offset = isReversed ? -(size - 50) : size - 50;

   
   this line adjust the offset by 50 pixels (hardcoded), but I think it should use collapsedSize for both

2. https://github.com/b-zurg/react-collapse-pane/blob/master/src/components/Resizer/index.tsx#L115
   when creating the flex style for prevButtonFlex and postButtonFlex the flex-basis needs a unit, otherwise browser like chrome will ignore the applied style.

3. The examples in https://github.com/b-zurg/react-collapse-pane/blob/master/docs/README.md pass collapseOptions as property to SplitPane, but I think the prop should be named collapse.

cheers

Multiple collapses do not cascade correctly

When you collapse one pane in the middle, and then collapse the pane next to it, then the previously collapsed pane's size increases.

One option (the cheap option) would be to set a maximum size on the panel when the panel is collapsed.

The more elegant and correct solution would be to somehow cascade the collapses to the siblings of the collapsed pane if they are collapsed.

feat: add ability to position resizer button

This should be fairly easy to do by allowing the user to control the flex values of an item before and after the button.

This can be simplified into an offset which will add the flex value to one side or the other. The option would be provided through the collapseOptions prop

fix: cannot select text inside panel

This is because the pane has user-select: none as a CSS attribute. Should be easy to fix.

Collapse Options

Hi, Im not sure if the collapse options are working properly? I cant seem

<SplitPane split="vertical" minSize={5} defaultSize={100} collapse={true} collapseOptions={{ overlayCss: { backgroundColor: "blue" }, buttonTransition: "zoom", buttonPositionOffset: -20, collapsedSize: 5, collapseTransitionTimeout: 350, collapseDirection: 'right' }}/> but it doesnt seem to be collapsing towards the right, or changing the overlayCss or collapsed size etc?
Also - is it possible to have collapse buttons for both left and right on the same panel?
Thanks!

Collapse Overlay CSS not being applied

in certain contexts the overlay CSS isn't being applied. We need to set the z-index of all of the overlay children to be beneath it.

odd behaviour on touch device

Odd behavior on devices supports touch like a tablet, the grabber of the pane is so soft and can resize the pane even when you touch outside grabber area.

please how to fix it?

fix: collapsedSizes should accept empty array

In order to make the Api easier for making this a controlled component, the collapsedSizes should accept an empty array and interpret it as [null, null, null...] without the user having to do that.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 1.1.0 on branch master cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.2 <1.1.0 can be published from branch master.

The following commits are responsible for the invalid release:

• fix: Document events sometimes not firing for mouseup (e45687b)
• fix: unnecessary div for min-width causing display issues (2a4e89e)
• feat: collapsed panes now retain minimum width and the overflow is hidden (711c78e)
• fix: Min sizes now applied correctly on resize and initial size calculation (c220695)
• fix: collapse now cascades correctly to all siblings (70b829f)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch master with git revert or git reset.

A valid branch could be next.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Move from styled-components to emotion

Emotion is faster and has exactly the same API. This is a no-brainer move. Just need to change the dependencies and a few imports.

Pane specific classes

I'd like to be able to style my panes differently (specifically I'd like to set the flex-grow and shrink on each panel to different values).

As a general approach to fix this I was thinking of adding functionality to set each pane's classname. Currently when you set the className on the SplitPane it applies to each pane.

I have a fork and this is my current approach, looking for feedback:

• Add a pane. class to each pane
• Add a string[] property to Split pane called classNames (much like minSizes) and pass them to each pane.

What do you think?

Grabbable width resizer option not applied when collapse options are set

When hovering over a pane that has a collapse button the grabber width is not set according to the options and is constantly set to 6rem.

How to collapse/open programatically?

Is there a way to collapse/open panel programatically? Changing collapsedSizes doesn't seem to work.

fix: dragging does not always stop when mouse click is done

Sometimes, in strange circumstances, it seems the dragging does not stop after the mouse click is done. I think another event listener on mouse up will probably take care of this issue.

collapseOptions does not exist on SplitPane props

I can't make the exmaple from the wiki work:

<SplitPane
            split="vertical"
            
            collapseOptions={{
              beforeToggleButton: <Button>⬅</Button>,
              afterToggleButton: <Button>➡</Button>,
              overlayCss: { backgroundColor: "black" },
              buttonTransition: "zoom",
              buttonPositionOffset: -20,
              collapsedSize: 50,
              collapseTransitionTimeout: 350,
            }}
          >

Type '{ children: Element[]; split: "vertical"; collapseOptions: { beforeToggleButton: Element; afterToggleButton: Element; overlayCss: { backgroundColor: string; }; buttonTransition: string; buttonPositionOffset: number; collapsedSize: number; collapseTransitionTimeout: number; }; }' is not assignable to type 'IntrinsicAttributes & SplitPaneProps & { children?: ReactNode; }'.
  Property 'collapseOptions' does not exist on type 'IntrinsicAttributes & SplitPaneProps & { children?: ReactNode; }'.ts(2322)