@pixore/subdivide NPM

Layout system inspired by blender's subdivide layout using React.js

Table of content:

Introduction

Subdivide is based on the layout system created for Blender, in which every area can be split into more areas or be merged with a sibling area.

Installation

npm install @pixore/subdivide

Basic Usage

import React from 'react';
import { render } from 'react-dom';

import Subdivide from '@pixore/subdivide';

const MasterPanel = () => <span>hello world!</span>;

const App = () => {
  return <Subdivide component={MasterPanel} />;
};

render(<App />, document.getElementById('root'));

Note the MasterPanel component, usually, this component should be able to turn into any other panel using a select input or a similar mechanism.

And that's it! You can check more examples in the examples folder

Preservable Layout

The layout is described by a simple object, it can be serializable and use it as the initial state a preservable layout can be achievable:

import React from 'react';
import { render } from 'react-dom';
import Subdivide, {
  ConfigProvider,
  useContainer,
  LayoutState,
} from '../../src';

const MasterPanel = () => <span>Just like you leave it :)</span>;

const getInitialState = () => {
  try {
    const json = localStorage.getItem('state');
    return JSON.parse(json);
  } catch (error) {
    return undefined;
  }
};

const initialState = getInitialState();

const App = () => {
  const onLayoutChange = (state) => {
    localStorage.setItem('state', JSON.stringify(state));
  };

  return (
    <ConfigProvider initialState={initialState} onLayoutChange={onLayoutChange}>
      <Subdivide component={MasterPanel} />
    </ConfigProvider>
  );
};

render(<App />, document.getElementById('root'));

Api

Components

Subdivide

Prop	Type	Defalt Value
component	React.ReactNode	n/a
width	number	100%
height	number	100%
top	number	0
left	number	0
selfPosition	boolean	true

ConfigProvider alias of Config.Provider

Prop	Type	Defalt Value
initialState	State
onLayoutChange	(state: State) => void
classNames	OptionalClassNames
cornerSize	number
splitRatio	number

Hooks

useContainer

Use to access to the container data, and update its state. Check how it's used in the examples: ColorPane, preservable, stats

useConfig

Mostly for internal usage

useClassNames

Mostly for internal usage

Author

👤 Jose Albizures by Pixore

Twitter: @\albzrs, @pixore_io
Github: @albizures, @pixore

🙏 Thanks!

to Blender for inspiring this layout system
to subdivide by @philholden which is an alternative to this library in case you are using redux.
to svelte-subdivide by @Rich-Harris