Skip to content

Instantly share code, notes, and snippets.

@DarrenN
Created Jul 14, 2015
Embed
What would you like to do?
Use Material Design Lite's JS to handle layouts with React + Webpack
/* jshint esnext:true */
'use strict';
import React from 'react';
import Header from './header';
import Workspace from './workspace';
import Footer from './footer';
// Manually call upgradeElement / MaterialLayout on the main layout div *AFTER* its been rendered in the DOM.
export default React.createClass({
componentDidMount() {
let Material = require('exports?componentHandler&MaterialLayout!mdl');
let layout = document.getElementById('layout');
Material.componentHandler.upgradeElement(layout, 'MaterialLayout');
},
render() {
return(
<div id="layout" className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<Header />
<Workspace />
<Footer />
</div>
)
}
})
@Ridermansb

This comment has been minimized.

Copy link

@Ridermansb Ridermansb commented Apr 7, 2017

Hi @DarrenN Can you share your webpack config?
I try to use getmdl with React but I can`t. I already post on Stackoverflow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment