Subdivide Layout
Split pane layout system for React and Redux apps. Each pane can be subdivided and any widget assigned to any pane allowing users define layout. Panes can be:
- subdivided above a minimum size
- subdivided horizontally or vertically
- subdivided by dragging corners
- resized by dragging edges
- merged by dragging corners onto adjacent panes
When a new pane is created the user can chose which widget to display in that pane. The result is an application where the user can decide on an interface that suits their work flow.
It should also be possible to quickly mash up applications out of preexisting parts.
Usage
npm install react-redux-subdivide
Subdivide exposes the Subdivide
component, a redux reducer
, and a redux-observable epic
.
import React Component from 'react';import ReactDOM from 'react-dom';import createStore combineReducers applyMiddleware from 'redux';import connect Provider from 'react-redux';import createEpicMiddleware combineEpics from 'redux-observable';import myEpics from './my-epics.js'; import Subdivide reducer as subdivideReducer epic as subdivideEpic from 'subdivide'; { ; thisstate = choice: null ; thisonSelect = thisonSelect; } { this; } { const choices = 'world' 'moon' 'universe' 'galaxy' ; return choices;); { const choice = thisstate; return !choice ? <div> this </div> : <h1 />Hello choice !</h1>; }} const epicMiddleware = ; const store = ; ReactDOM;
Run Example
npm installnpm start
Open the following link in a browser:
Testing
Run the following two commands in separate terminals
npm run test:watchnpm run cover:watch
The first will start the testing scripts and rerun them on file changes. The second will run a task that will watch for file changes and run the coverage on the files.
You can open the html page displaying current coverage using the following
npm run cover:show
React-redux-subdivide is based off of the fantastic Subdivide project.
Although similar in appearence, the main differences from that project is a significant change in API, removing Immutable.js, adding the powerfull RxJS to accomplish the complex side-effects in Redux using Redux-Observable