# 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]](https://storybook-collapse-pane.netlify.app/)
## [[click for documentation site]](https://b-zurg.github.io/react-collapse-pane/)
# Getting Started :rocket:
Install react-collapse-pane:
```bash
npm i react-collapse-pane
# or for yarn
yarn add react-collapse-pane
```
Once installed you can import the `SplitPane` component in your code.
```ts
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.
```ts
import { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from "react-collapse-pane";
```
# Quick Start Usage :fire:
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.
```tsx
This is the first div
This is the second div
This is the third div
This is the fourth but not a div!
```
What you just did is make a split collapsible panel layout!
## Congrats! That was easy! :grin:
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? :sob:
This library supports all of these things and more!
For more details check out [the documentation](https://b-zurg.github.io/react-collapse-pane/)
# 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 :sparkling_heart:
If you would like to contribute please check out the [contributor guide](/CONTRIBUTING.md)
All contributions are welcome! All issues and feature requests are welcome!
# Credit and Attribution :pray:
This project did not start off from scratch. The foundation of the project was the excellently written [react-multi-split-pane](https://github.com/neoraider/react-multi-split-pane) library which is itself a typescript rewrite of the [react-split-pane](https://github.com/tomkp/react-split-pane) library.
Much gratitude to their authors, [@NeoRaider](https://github.com/NeoRaider) and [@tomkp](https://github.com/tomkp)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
