react-pane-system

react-pane-system

A declarative, flexible pane layout system for React projects. Allows pixel and percent values to sizes(including min and max).

View Storybook

Install

> npm install react-pane-system

Usage

import { PaneSystem, PaneRow, Pane } from 'react-pane-system';

<PaneSystem width="100vw" height="100vh">
  <PaneRow>
    {/* A pane with a splitter on the right side */}
    <Pane
      id="left-pane"
      width="30%"
      minWidth="100px"
      maxWidth="50%"
      splitter="right"
    >
      <div>Left Pane</div>
    </Pane>

    {/* This pane resizes automatically */}
    <Pane id="right-pane">
      <div>Right Pane</div>
    </Pane>
  </PaneRow>
</PaneSystem>;

Documentation

PaneSystem

Prop	Type	Description
width	string?	Width of the pane system. Can be any CSS string. (Default: 100%)
height	string?	Height of the pane system. Can be any CSS string. (Default: 100%)
bgColor	string?	Base background color for all the Panes. Can be any CSS color string. (Default: #4b5563)
borderWidth	number?	Base border width for all the PaneRows and Panes. (Default: 1)
borderColor	string?	Base border color for all the PaneRows and Panes. Can be any CSS color string. (Default: #909090)

PaneRow

Prop	Type	Description
height	string?	Height of the row. Can be either px or %. Only one row can have an auto height. (Default: auto)
minHeight	string?	Minimum height of the row. Can be either px or %. (Default: 0)
maxHeight	string?	Maximum height of the row. Can be either px or %. (Default: 100%)
splitter	string?	Position of the splitter. Can be either top or bottom.
splitterHeight	number?	Height of the splitter. (Default: 4)
splitterColor	string?	Color of the splitter. Can be any CSS color string. (Default: rgba(0, 0, 0, 0.2))
bgColor	string?	Overrides the base background color for all the enclosed Panes. Can be any CSS color string.
borderWidth	number?	Overrides the base border width for all the enclosed Panes.
borderColor	string?	Overrides the base border color for all the enclosed Panes. Can be any CSS color string.

Pane

Prop	Type	Description
id	string	ID of the pane.
width	string?	Width of the pane. Can be either px or %. Only one pane can have an auto width. (Default: auto)
minWidth	string?	Minimum width of the pane. Can be either px or %. (Default: 0)
maxWidth	string?	Maximum width of the pane. Can be either px or %. (Default: 100%)
splitter	string?	Position of the splitter. Can be either left or right.
splitterWidth	number?	Width of the splitter. (Default: 4)
splitterColor	string?	Color of the splitter. Can be any CSS color string. (Default: rgba(0, 0, 0, 0.2))
bgColor	string?	Overrides the base background color for this pane. Can be any CSS color string.
borderWidth	number?	Overrides the base border width for this pane.
borderColor	string?	Overrides the base border color for this pane. Can be any CSS color string.