Skip to content

A fork of the excellent UI library react-spaces by Allan Eagle, that allows you to divide a page or container into nestable anchored, scrollable and resizable spaces.

License

Notifications You must be signed in to change notification settings

brawcode/react-spaces

 
 

Repository files navigation

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:

About

A fork of the excellent UI library react-spaces by Allan Eagle, that allows you to divide a page or container into nestable anchored, scrollable and resizable spaces.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 89.7%
  • JavaScript 7.6%
  • CSS 1.8%
  • Other 0.9%