React-mdl-layout NPM

React MDL Layout

This project is combined react and layout of material design lite. I use react to do this.

Include file

You can see here.

Use

This is a react class. As a result, you need to use ReactDOM.render to render.

  import React from 'ract';
  import ReactDOM from 'react-dom';
  import Layout from 'react-mdl-layout';

  import Component from './path/to/component';

  let data = {
    "noSpacing": false,
    "cells": [
      {
        "desktop": "4",
        "component": Component,
        "data": {"value": "1"}
      },
      {
        "desktop": "4",
        "component": Component,
        "data": {"value": "2"}
      },
      {
        "desktop": "4",
        "component": Component,
        "data": {"value": "3"}
      }
    ]
  };

  ReactDOM.render(<Layout data={ data }/>, document.getElementById("root"));

Data

data:

  data = {
    'id': 'gridId',
    'class': 'gridClass',
    'style': {color: 'black'},
    'cells': []
  }

// It will render a html like this
  <div id="gridId" class="mdl-grid gridClass" style="color: black;"></div>

you not need to set all id, class, style and cells. You just use attributes needed.
data.cells in data:

  import Component from './path/to/component';

  cells: [
    {
      'id': 'cellId',
      'class': 'cellClass',
      'style': {color: 'white'},
      'component': Component,
      'data': {'key', 'value'}
    }
  ]

// It will render a html in mdl-grid
  <div id="cellId" class="mdl-cell mdl-cell--hide-desktop mdl-cell--hide-tablet mdl-cell--hide-phone cellClass" style="color: white;">
    // Here is related to your component to render
    // Your component is needed to be a react class
    // `data` will be used as `props` in your component
  </div>

Here also use attributes needed.
You can set desktop, tablet and phone in data.cells to set layout.
- desktop is between 1 to 12.
- tablet is between 1 to 8.
- phone is between 1 to 4.
- If you do not set those attributes, it will be set hide
You can see here.