Have ideas to improve npm?Join in the discussion! »

    ccs-react-collapse-pane
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    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 🚀

    Install react-collapse-pane:

    npm i ccs-react-collapse-pane
    
    # or for yarn
    
    yarn add ccs-react-collapse-pane

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

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

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

    import { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from "ccs-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">
      <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 splittable 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).

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

    But what about collapsing the panels, styling the resizer, 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://collapse-pane.zurg.dev

    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!

    Install

    npm i ccs-react-collapse-pane

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    390 kB

    Total Files

    67

    Last publish

    Collaborators

    • avatar