Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-collapse-pane
Advanced tools
Readme
This is intended to be the simple, reliable, configurable, and elegant solution to having splittable, draggable and collapsible panes in your React application.
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";
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!
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.
This library supports all of these things and more!
For more details check out the 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.
If you would like to contribute please check out the contributor guide
All contributions are welcome! All issues and feature requests are welcome!
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
Thanks goes to these wonderful people (emoji key):
Buzurg Arjmandi ⚠️ 📖 💻 🎨 💡 📦 | hst44 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
The splittable, draggable and collapsible react layout library.
The npm package react-collapse-pane receives a total of 2,500 weekly downloads. As such, react-collapse-pane popularity was classified as popular.
We found that react-collapse-pane demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.