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

Table of content:

• Introduction
• Usage
• Installation
• Basic Usage
• Preservable Layout
• Api

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

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Jose Albizures. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator