!Maintenance Statusstatus-imagestatus-url !NPM versionnpm-imagenpm-url !Build Status Linuxcircleci-imagecircleci-url !Coverage Statuscoverage-imagecoverage-url
If you use it, add only this one line to your HTML:
Then add these lines to
Alternatively, you can include
For a listing of available components, as well as specific usage information, check out the Componentsreact-mdl-components-url page on the website.
Some extra components can be found in the react-mdl-extra package.
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 Litegoogle-mdl-urlv1.2.1Requirements
Instead of using the officialmaterial.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 withreact-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 webpackwebpack-url or browserifybrowserify-url by importingreact-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 Componentsreact-mdl-components-url page on the website.
Some extra components can be found in the react-mdl-extra package.