Usage no npm install needed!

<script type="module">
  import reactMdlLayout from '';


React MDL Layout

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

Include file


  • 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 = {
    '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
  • 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.