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!