react-cool-layout

    1.7.0 • Public • Published

    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
          id="1"
          left={lib => {
            // here we're declaring left of item with id '1' depends on the width of item '3'
            // so if something happens and causing dom state of item 3 changes, left of item '1'
            // will be automatically recalculated based on the function declared here 
            const width = lib.page().width - lib.get('1').width - lib.get('3').width - 200;
            return parseInt(width / 2);
          }}
          style={{
            background: 'red',
          }}
        >
          <div style={{
            width: 200,
            height: 200,
          }} />
        </Layout.Item>
     
        <Layout.Item
          left={lib => {
            // here we're declaring left of item '2' depends on the left of item '1' 
            // so if something happens and causing dom state of item 1 changes, left of item '2'
            // will be automatically recalculated based on the function declared here 
            const width = lib.get('1').left + 200 + 200;
            return parseInt(width);
          }}
          id="2"
        >
          <div style={{
            width: 200,
            height: 80,
            background: 'yellow'
          }} />
        </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 
    

    http://localhost:1234/

    Examples can be found here.

    Keywords

    none

    Install

    npm i react-cool-layout

    DownloadsWeekly Downloads

    0

    Version

    1.7.0

    License

    none

    Unpacked Size

    20.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar