Material Design React (MDR)
⚠️ Work in progress. Updates rolling in every other day.
A pragmatic React implementation of Material Design Lite (MDL).
Contents
Introduction
Pragmatic – because if you know how to use MDL you already know how to use MDR.
Most MDL BEM blocks and elements translate to MDR Components and modifiers translate to boolean properties. In addition Components may have added some extra sugar.
An Example
Given MDL markup:
FAB BUTTON
becomes:
FAB BUTTON
or – considering that fab, miniFab, icon and raised are mutually exclusive – we can use the display property:
FAB BUTTON
Getting Started
Installation
npm:
npm install --save material-design-react
Please file an issue if you need additional means of installation.
Usage
Include the Material Design Lite CSS and JavaScript files in each HTML page in your project.
More info: http://www.getmdl.io/started/index.html#download
<!-- index.html -->
In your project's JS files import the components you need.
/* app.jsx */;;// or;// orvar MDR = ;var Button = MDRButton; let coloredButton = <Button colored ripple>I am colored</Button>;
Contributing
Coming soon
History
Have a look at the changelog.
Components
Links point to a component's readme.
Credits
- Contributors for contributing
- Google for Material Design Lite
- Facebook for React
- Yan Foto for his article React Components with Material Design Lite
- Zeno Rocha for his README template
- NPM module authors for this project's dependencies
Get in contact if you think you belong here.
License
This project is licensed under the terms of the MIT license.