npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@brawcode/react-spaces

v0.3.3

Published

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 type user interfaces in the browser.

Downloads

2

Readme

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: