This package has been deprecated

Author message:

Not maintained

material-design-react

Material Design React (MDR)

⚠️ Work in progress. Updates rolling in every other day.

A pragmatic React implementation of Material Design Lite (MDL).

Contents

• Introduction
• Getting Started
• Contributing
• Components
• Histroy
• Credits
• License

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:

<button class="mdl-button mdl-js-button mdl-button--fab">FAB BUTTON</button>

becomes:

<Button fab>FAB BUTTON</Button>

or – considering that fab, miniFab, icon and raised are mutually exclusive – we can use the display property:

<Button display="fab">FAB BUTTON</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 -->
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

In your project's JS files import the components you need.

/* app.jsx */
import React from 'react';
import { Button } from 'material-design-react';
// or
import Button from 'material-design-react/button';
// or
var MDR = require('material-design-react');
var Button = MDR.Button;
 
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.

• Button
• Card
  • CardTitle
  • CardTitleText
  • CardSubtitleText
  • CardMedia
  • CardSupportingText
  • CardActions
  • CardMenu
• ...coming

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.