react-cool-layout
Why react-cool-layout
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 left
, top
and size info like width
, 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>}
Limitation
- 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
Install
$ npm install react-cool-layout
Examples
$ npm run dev
Examples can be found here.