@brawcode/react-spaces

React Spaces

A fork of the excellent UI library React Spaces by Allan Eagle.

   

The Goal

This fork aims to add additional functionality to the original project that does not fit with the vision the author had. It is stated that react-spaces is a resuable foundation to build UI layouts. This means specific functionality that I find useful might not be for everyone, but for the people that want it, then it's available.

I would like to point out I highly suggest you support the original author. I spent a lot of time trying to find something as well engineered as this. I have kept the donation links in this readme which can be found at the bottom.

The documentation provided by this repo is a superset of the original documentation until a point this repository strays far enough away.

 

Documentation

Please see the Original Repo for documentation regarding the base components.

To view the Storybook for this repo with the additional components, please go here

 

Components

<PersisentLayout />

Wrap around your layout and pass a unique name, then give each resizable component a unique identifier to persist the layout to local storage

<PersistentLayout name="my-layout">
  <ViewPort>
    {/* Size now acts as an initial value */}
    <LeftResizable i="area-a" size="20%" /> 
    <Fill />
    {/* Size now acts as an initial value */}
    <RightResizable  i="area-b" size="20%" />
  </ViewPort>
</PersistentLayout>

 

Getting started

To get started with React Spaces you need:

npm install @brawcode/react-spaces --save

import * as Spaces from "react-spaces";

 

Donation

Please support the author, Allan Eagle: