Skip to content
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.
TypeScript JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jul 28, 2019
demo Re-added code sandbox to docs Aug 14, 2019
react-spaces Bumped version Aug 14, 2019
.gitignore Initial commit Jul 21, 2019
LICENSE Create LICENSE Jul 28, 2019
README.md Update README.md Aug 3, 2019
workspace.code-workspace Added workspace Aug 14, 2019

README.md

React Spaces

NPM Azure Pipelines

React Spaces allow you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.

View full documentation here.

Top level spaces

Used at the top level of all other spaces.

<ViewPort />

This space will take over the full viewport of the browser window. Resizing the browser window will automatically adjust the size of this space and all the nested spaces.

<Fixed />

This space can be given a height and optionally a width (by default it will size to 100% of it's container). All nested spaces will be contained within this fixed size space.

Anchored spaces

These can be used within the top-level spaces <ViewPort /> and <Fixed /> or nested within other spaces.

<Left /> and <Right />

A space anchored to the left or right of the parent container/space. A size can be specified in pixels or as a percentage to determine its width.

<Top /> and <Bottom />

A space anchored to the top or bottom of the parent container/space. A size can be specified in pixels or as a percentage to determine its height.

Other

<Fill />

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

<Centered />

Centres the content of a space horizontally and vertically.

<VerticallyCentered />

Centres the content of a space vertically.

Getting started

To get started with React Spaces you need:

npm install react-spaces --save
import * as Spaces from 'react-spaces';

View full documentation here.

You can’t perform that action at this time.