Home

Welcome to the react-collapse-pane wiki!

Overall Architecture.

The architecture is mainly involving three distinct components each with a specific purpose:

SplitPane - the export component and provider of the api for the whole split/collapse process. Pane - a wrapper for an individual pane that is being split Resizer - the component responsible for the aesthetics of the resizer and begins the event handling for dragging a panel.

Very little of this project is JSX or basic event handling. The bulk of the logic has mostly been abstracted into hooks. Specifically the useSplitPane hook is the controller of many different things that need to happen to make the magic of the split pane work.

Each Pane is arranged with a flex-basis that is set to its pixel width. When a resizer is dragged what happens is the new flex-basis for all of the panels is calculated based on the drag offset and the flex-basis is set.

When a pane is collapsed, this is also done using flex-basis.