An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop type user interfaces in the browser.

Features

No styling to achieve simple or complex layouts.

Spaces know how to behave in relation to each other and resize accordingly.

Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.

Getting started

To get started with React Spaces you need:

npm install react-spaces --save

You can then import the spaces as follows:

import * as Space from 'react-spaces';

Top-level spaces <ViewPort />

Fills the full viewport of the browser window resizing with the browser window. <ViewPort /> <Fixed />

Given a height and optionally a width (by default it will size to 100% of it's container). <Fixed />

Anchored spaces <Left /> and <Right /> <Top /> and <Bottom /> These can be used within the top-level spaces <ViewPort /> and <Fixed /> and within other inner spaces. A size can be specified in pixels/percent to determine its width (left/right) or height (top/bottom). <Left /> <Right /> <Top /> <Bottom />

Other <Fill />

A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side. <Fill /> <Layer />

Creates a layer within the parent space. All child spaces interact within this layer but do not affect spaces within other layers. <Layer /> <Layer />

Centreing <Centered />

Centres the content of a space horizontally and vertically. <Centered /> <CenteredVertically />

Centres the content of a space vertically but not horizontally. <VerticallyCentered />

Useful properties