/!\ Note /!\ This framework is still a beta. The issues marked as MS1 at https://github.com/svenberglund/react-mst-grid-layout/projects/1 will be resolved to the first non beta release.

npm install react-mst-grid-layout --save-dev

The published module contains es6. I've gathered some information about it here.

Implement it using your own favorite UI framework (examples using echarts-for-react and styled-components are available in demo branch).

Example:

import RMGL from 'react-mst-grid-layout'; // RMGL object exposes entire API


export default class GridElementAwsome extends RMGL.GridElementSuper {

        static renderElement(i, sm) {
                // The only rule here is that you shall use the i parameter as key for the enclosing div.
                // with sm (the subscription data map) you do what ever you want, see below

                let listItems =[...sm.keys()].map((key) =>
                        <li key={key}>{key} : {sm.get(key)}</li>
                );
                return <div key={i}>
                        <ul>{listItems}</ul>
                </div>;
        };
}

remark
In the renderElement method you do whatever you want with sm, which is the 'subscription data map' i.e. the data that you intend to publish to the grid item. Only you know what that data is... To start with you don't need to implement this method, it will fall back on the super class implementation (that just lists all data that is published to the component) and then you can go back to implement renderElement when you have the grid up and running.

Now register the class with a name via the register method:

RMGL.GridElementSuper.register("awsome", GridElementAwsome)

Render grid:

        <RMGL.MstGridLayout
          compactType="vertical" // default : none
          breakpoint="lg" // default : 'lg' = 12 columns
          rowHeight={30} // default : 30
          gridStyle={{ backgroundColor: 'LightSteelBlue' }}
        />
        {/*  All the params except gridStyle are react-grid-layout standard  */}

remark
To tweak and design your grid the way you want it, there are plenty of configuration options exemplified at react-grid-layout project.

Add component:

    grid = RMGL.mstGrids.getGrid("defaultGrid");

    // i is the component index, the rest of the params are react-grid-layout standard
    let layoutMap = { i: '0', x: 0, y: 0, w: 4, h: 3};
    let subscriptionMap = {some:"initial data" , some_other: "initial data" };
    grid.addMstGridItem( "awsome", layoutMap, subscriptionMap);

remark
In this case the i param in the layoutMap object is the index that needs to be unique and that later (below) shall be reused to wire the component to a publish channel. The rest of the params in layoutMap are again react-grid-layout standard and are documented and described on the project showcase pages.

Tie the component index to a channel index via the PubSubAPI.subscribe method.

     RMGL.PubSubAPI.subscribe("defaultGrid",i, channelIndex )

You probably want to save the subscriptions in a map if you want to be able to unsubscribe:

    this.state.subscriptions.set(i, RMGL.PubSubAPI.subscribe("defaultGrid",i, channelIndex ));

    // unsubscribing

     RMGL.PubSubAPI.unSubscribe(this.state.subscriptions.get(i));
     this.state.subscriptions.delete(i);
    

    publish(channelIndex, {some : "awsome data", some_other : "amusing data" });

The publish-subscribe implementation is built upon publishing name-value stores (referred to above as the subscription data map) to grid items. If you want to publish complex data, e.g. one parameter in your subscription data map containing a series of values, then use JSON.stringify and JSON.parse respectively when publishing and consuming the data.
Examples can be seen in demo branch of publishing and subscribing to such data.

By accessing the object grid = RMGL.mstGrids.getGrid("defaultGrid"); it can be manipulated directly with modification such as locking or unlocking the layouts. This example locks the item with index i:

this.grid.setGridItemLayout(i, this.grid.getGridItemLayout(i).set('static', true));

See a more generic example (onLockAllClick) in demo branch

Just like locking the grid items (above) all layout properties can be manipulated via API by accessing the layout maps RMGL.mstGrids.getGrid("defaultGrid").getGridItemLayout(i); . Examles of such layout mainipulations are available in the method onChangeClick in demo branch. For a documentation of the layout maps format see react-grid-layout.

In the above example we create one <RMGL.MstGridLayout... component and we fill it up with grid items where the index in the layout map lets us define publish channels to the items. We used "defaultGrid" channels to publish. The "defaultGrid" is pre defined.
If you want to build several grid components in your application you can consequently also define and name several different "grid objects" to which you then define and wire your channels.

RMGL.mstGrids.addMstGrid("mySecondGrid")
...
RMGL.mstGrids.removeMstGrid("mySecondGrid")

It is intended (but not necessary) to use different such grid objects for the different grid components.