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.
- 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.
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';
Fills the full viewport of the browser window resizing with the browser window.
Given a height and optionally a width (by default it will size to 100% of it's container).
<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).
A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
Creates a layer within the parent space. All child spaces interact within this layer but do not affect spaces within other layers.
Centres the content of a space horizontally and vertically.
Centres the content of a space vertically but not horizontally.
|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.|