React-PanelGroup

A React component for resizable panel group layouts

Demo: https://danfessler.github.io/react-panelgroup/

Features

• Absolute & Relative Sizing
  Choose between absolute pixel sizing and relative weights to describe your layout. Even mix the two per panel for more complex layouts. Supports fixed-size, dynamic (absolute pixel), and stretchy (relative weights) resizing
• Neighbor-Aware Resizing
  When a panel is resized beyond it's extents, it will begin to push or pull at it's neighbors recursively.
• Column & Row Orientations
  Supports vertical and horizontal orientations. Nest them together to produce grid-like layouts
• Snap points
  If supplied, panels can snap to pre-defined sizes

Installation

$ npm install --save react-panelgroup

Examples

Defaults

When not specifying any props, the panel group defaults to a horizontal orientation with panels of equal (stretchy) widths. PanelGroup will always try to entirely fill it's container.

<PanelGroup>
  <div>panel 1</div>
  <div>panel 2</div>
  <div>panel 3</div>
</PanelGroup>

Column layout

Setting the direction prop to "column" will result in a vertical layout

<PanelGroup direction="column">
  <div>panel 1</div>
  <div>panel 2</div>
  <div>panel 3</div>
</PanelGroup>

Nested layout

Nest multiple panelGroups for more complex layouts

<PanelGroup direction="row">
  <PanelGroup direction="column">
    <div>panel 1</div>
    <div>panel 2</div>
    <div>panel 3</div>
  </PanelGroup>
  <div>panel 4</div>
  <PanelGroup direction="column">
    <div>panel 5</div>
    <div>panel 6</div>
  </PanelGroup>
</PanelGroup>

Defined panel sizes

Providing panelWidths with an array of objects defining each panel's size parameters will set the initial sizing for each panel. If any property is missing, it will resort to the default for that property.

<PanelGroup
  panelWidths={[
    { size: 100, minSize: 50, resize: 'dynamic' },
    { minSize: 100, resize: 'stretch' },
    { size: 100, minSize: 50, resize: 'dynamic' }
  ]}
>
  <div>panel 1</div>
  <div>panel 2</div>
  <div>panel 3</div>
</PanelGroup>

Component Props

• spacing: number sets the width of the border between each panel
• borderColor: Valid CSS color string Optionally defines a border color for panel dividers. Defaults to "transparent"
• panelColor: Valid CSS color string Optionally defines a background color for the panels. Defaults to "transparent"
• direction: [ "row" | "column" ] Sets the orientation of the panel group
• panelWidths: [panelWidth, ...] An array of panelWidth objects to initialize each panel with. If a property is missing, or an index is null, it will resort to default values
• panelWidth.size: number Initial panel size. If panelWidth.resize is "fixed" or "dynamic" the size will be pixel units. If panelWidth.resize is "stretch" then it is treated as a relative weight: Defaults to 256
• panelWidth.minSize: number minimum size of panel in pixels. Defaults to 48
• panelWidth.maxSize: number maximum size of panel in pixels. Defaults to 0 (No Max Width)
• panelWidth.resize: [ "fixed" | "dynamic" | "stretch" ] Sets the resize behavior of the panel. Fixed cannot be resized. Defaults to "stretch"
• panelWidth.snap: [snapPoint, ...] An array of positions to snap to per panel
• onUpdate: function() Callback to receive state updates from PanelGroup to allow controlling state externally. Returns an array of panelWidths
• onResizeStart: function(panels) Callback fired when resizing started, receives state of panels
• onResizeEnd: function(panels) Callback fired when resizing ends, receives state

Contribute

Prerequisites

Node.js >= v4 must be installed.

Installation

• Running npm install in the components's root directory will install everything you need for development.

NOTE yarn does not work! It will yield phantomjs errors.

Demo Development Server

• npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.

Running Tests

• npm test will run the tests once.
• npm run test:coverage will run the tests and produce a coverage report in coverage/.
• npm run test:watch will run the tests on every change.

Building

• npm run build will build the component for publishing to npm and also bundle the demo app.
• npm run clean will delete built resources.