search

junsikshim / react-pane-system

A declarative, flexible pane layout system for React projects.
MIT License
6 stars 1 forks source link

readme

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.