React MDL Merges React with Material Design Lite

By Jake Rocheleau. in Coding. Updated on February 14, 2019.

Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the material design guidelines with pre-built CSS and JS.

This is a popular framework for simple dev projects. React MDL combines Google’s framework with the React library to make a well-rounded frontend resource.

Google’s material design is clearly the future of UI/UX in the world of Google. And with Material Design Lite it’s easier than ever to implement these features onto any website with a proprietary open source library.

React is also by far the most popular frontend JS framework used for frontend view components. With React MDL you can merge these React components with the MDL library to get a view much like you’ll find in Google’s online documentation.

Here’s a sample article template so you can get a feel of how this looks.

This page doesn’t have many React components but it demonstrates the aesthetic of material design. You’ll find a lot more action on this demo built using React components.

You can actually find more info about Material Design Lite on the GitHub repo if you’re curious to learn more. From there you can download the raw CSS and JS to implement into your page which automatically supports all modern browsers and graceful degradation.

Unfortunately since React MDL is still fairly new it doesn’t have full support for all components.

But you can see a full list here including small demos for each one. This also includes bits of source code that you can copy/paste into your own projects as needed.

I would not recommend learning React MDL until you already feel comfortable with both libraries.

The Material Design Lite suite is pretty simple to start but React is much more complex.

To learn more about MDL check out the FAQ page on their official site. It offers tips on where to use MDL, which features it offers, and how it can fit into a typical webdev workflow.

But truthfully even if you don’t understand React very well you can still get by with all the samples on the components page. For example the textfield page has working textfields using material design but with React code snippets.

Feel free to play around and see what you can build. Both libraries are completely free and open source for all projects whether personal or commercial.

You can find out more from the React MDL GitHub page if you want to study the source and dive in.

Read Also: Getting Started with React.js