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

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

    0.2.1 • Public • Published

    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:

    <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

    847

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    605 kB

    Total Files

    106

    Last publish

    Collaborators

    • avatar