Wondering what’s next for npm?Check out our public roadmap! »

react-spacesTypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

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.

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:

<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:

Install

npm i react-spaces

DownloadsWeekly Downloads

338

Version

0.2.0

License

MIT

Unpacked Size

599 kB

Total Files

104

Last publish

Collaborators

  • avatar