Socket
Socket
Sign inDemoInstall

react-collapse-pane

Package Overview
Dependencies
87
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-collapse-pane

The splittable, draggable and collapsible react layout library.


Version published
Maintainers
1
Weekly downloads
2,527
increased by5.69%

Weekly downloads

Readme

Source

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.

logo

prs welcome Release All Contributors styled with prettier semantic-release npm latest version npm next version npm downloads storybook storybook

[click for storybook demo]

[click for documentation site]

Getting Started :rocket:

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 :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.

<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! :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

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

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 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!

Keywords

FAQs

Last updated on 21 May 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc