react-mdl

React-MDL

Deprecation notice

This library is now deprecated. It's higly recommended to use Material Design Components instead.

Description

React-MDL is a set of React components build on top of Material Design Lite^v1.2.1

Requirements

Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

<link rel="stylesheet" href="material.css">
<script src="material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Create React App

The above instructions won’t work if you use Create React App with react-scripts higher than 0.4.0.
If you use it, add only this one line to your HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Then add these lines to src/index.js:

import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';

Installation

npm install --save react-mdl

Usage

You can use React-MDL through a bundler like webpack or browserify by importing react-mdl in your application:

import { Button, Card, CardText } from 'react-mdl';

// or...
import Button from 'react-mdl/lib/Button';
import { Card, CardText, CardActions } from 'react-mdl/lib/Card';

Alternatively, you can include node_modules/react-mdl/out/ReactMDL.js as a script, but you'll likely want to copy it to a folder outside of node_modules first, such as lib or vendor. Then a global ReactMDL will be available:

const { Button, Card, CardText } = ReactMDL;

For a listing of available components, as well as specific usage information, check out the Components page on the website.

Some extra components can be found in the react-mdl-extra package.

License

MIT, see LICENSE.md for details.