react-spaces v0.5.0
React Spaces
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.
\<Positioned />
A space which can be absolutely placed within a parent space either by top, left, width and height or by top, left, right and bottom.
\<Layer />
Layers allow you to create layers within a parent space, for example:
<ViewPort>
<Layer zIndex="{0}"> <LeftResizable size="20%" /> // floating sidebar </Layer>
<Layer zIndex="{1}">
<Fill />
</Layer>
</ViewPort>
\<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:
3 days ago
3 days ago
3 days ago
3 days ago
3 days ago
3 days ago
3 days ago
3 days ago
12 days ago
12 days ago
1 month ago
1 month ago
1 month ago
8 months ago
8 months ago
1 year ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago