react-cool-layout is a responsive layout engine based on runtime js calculation.
The idea is that you can declare a dynamic way of getting position info like
top and size info like
height for each layout item. One layout item (say component A) can declare dependencies of another (say component B). If size/position info of B changes, size/position info of A will be changed automatically according to the way that is declared for setting the position/size property based on the new state of component B. Let's take the following code snippets as an example:
<Layout><Layout.Item="1"==><div =/></Layout.Item><Layout.Item=="2"><div =/></Layout.Item></Layout>}
- The dependencies management is managed by react-cool-layout and we use MutationObserver to automatically register all subscriptions. Thus browsers or polyfil that supports MutationObserver is required.
- Currently, we don't support re-rendering of react-cool-layout. #12
$ npm install react-cool-layout
$ npm run dev
Examples can be found here.