React Spaces

View on GitHub NPM version GitHub stars

JAN 2023 - v0.4.0 released - Experimental SSR support added - add <SSR /> component above use of spaces to enable.

NOV 2021 - v0.3.0 released - Added <Positioned /> spaces - perfect for creating dialogs and windows which can be resized and moved by dragging

DEC 2020 - v0.2.0 released - Major global state re-implementation for spaces - read release notes for more information.

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.

Click here to see source code for the example above

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

as string By default React Spaces will render a div to the DOM. You can override the element rendered by setting this property with the element name, i.e. as="article" or as="aside".
centerContent "vertical" or "horizontalVertical" Instead of using the <Centered /> or <CenteredVertically /> components inside space you can specify the centering type here. Possible values are "vertical" or "horizontalVertical".
left, right, top, bottom number An optional offset from the edge of the browser viewport which can be specified when using <ViewPort />.
maximumSize, minimumSize number The maximum or minimum size a resizable space can be resized in pixels.
scrollable boolean Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if the content overflows.
trackSize boolean Tells the space to report it's size when it changes size to the <Info /> component. With this turned off the space will only report the initial size.
size number | string The size of an anchored space in pixels (number) or percentage (string). This represents the height for <Top /> and <Bottom /> spaces, and the width for <Left /> and <Right /> spaces.
zIndex number A number representing which layer the space sits within. If not specified the space is place in layer 0. Higher numbers appear in front of lower numbers. This is intended to be an alternative to using <Layer /> as a wrapper.