Need help with react-spaces?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

aeagle
932 Stars 18 Forks MIT License 348 Commits 9 Opened issues

Description

React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.

Services available

!
?

Need anything else?

Contributors list

# 139,160
React
CSS
HTML
reactjs
288 commits
# 251,227
CSS
HTML
reactjs
reactjs...
1 commit

React Spaces

NPM Azure Pipelines

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/mobile type user interfaces in the browser.

Rather than a library of visual UI components, Spaces are intended to be the reusable foundational blocks for laying out a UI which responds neatly to view port resizes leaving you to fill them with whatever components you want.

  • 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.

Version 0.2.0 release - read release notes here.

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.

There are resizable versions of these components called <LeftResizable />, <RightResizable />, <TopResizable /> and <BottomResizable /> which allow the spaces to be resized from the outer edge by dragging with the mouse.

Other

<Fill />

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

<Layer />

Layers allow you to create layers within a parent space, for example:

  
     // floating sidebar
  
  
    
  

<Centered />

Centres the content of a space horizontally and vertically.

<CenteredVertically />

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.

Donation

If you find this library useful, consider making a small donation to fund a cup of coffee:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.