A React component for resizable panel group layouts
Demo: https://danfessler.github.io/react-panelgroup/
$ npm install --save react-panelgroup
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>
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>
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>
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>
spacing: number
borderColor: Valid CSS color string
panelColor: Valid CSS color string
direction: [ "row" | "column" ]
panelWidths: [panelWidth, ...]
panelWidth.size: number
panelWidth.minSize: number
panelWidth.maxSize: number
panelWidth.resize: [ "fixed" | "dynamic" | "stretch" ]
panelWidth.snap: [snapPoint, ...]
onUpdate: function()
onResizeStart: function(panels)
onResizeEnd: function(panels)
Node.js >= v4 must be installed.
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.
npm start
will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.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.npm run build
will build the component for publishing to npm and also bundle the demo app.npm run clean
will delete built resources.