Skip to content

Instantly share code, notes, and snippets.

@DarrenN
Created July 14, 2015 01:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DarrenN/5c8e6df6eabb9632af74 to your computer and use it in GitHub Desktop.
Save DarrenN/5c8e6df6eabb9632af74 to your computer and use it in GitHub Desktop.
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
Copy link

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