linkInstallation
react-md is available as an npm package.
You can install with:
$ npm install -S react react-dom react-md
BashOnce installed, the components can be accessed by
react-md
orreact-md/lib
and the styles fromreact-md/src/scss/_react-md.scss
.linkFonts
The Roboto font and material-icons should be included as well (or some equivalent). These fonts can be included via WebFontLoader or by locally hosting and using the provided Sass mixins to include them. See host-material-icons and host-google-font for more details.
linkExamples
Please see the examples folder for example project setups using create-react-app, next.js, webpack, and others.
linkUMD
react-md is also available as a UMD bundle. This can either be found in the
dist
folder or from unpkg./* index.js */ const { Card, CardTitle, CardText, CardActions, Button } = window.ReactMD; class App extends React.Component { render() { return ( <div className="md-grid"> <Card className="md-cell"> <CardTitle title="Hello, World!" /> <CardText> Lorem ipsum... pretend more ... </CardText> <CardActions> <Button flat label="Action 1" /> <Button flat label="Action 2" /> </CardActions> </Card> </div> ); } } ReactDOM.render(document.getElementById('app'), <App />);
Js<!-- index.html --> <!DOCTYPE html> <html> <head><link rel="stylesheet" href="https://unpkg.com/react-md@1.9.2/dist/react-md.indigo-pink.min.css"></head> <body> <script src="https://unpkg.com/react/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script> <script src="https://unpkg.com/react-addons-css-transition-group/dist/react-addons-css-transition-group.min.js"></script> <script src="https://unpkg.com/react-addons-transition-group/dist/react-addons-transition-group.min.js"></script> <script src="https://unpkg.com/react-md@1.9.2/dist/react-md.min.js"></script> <script src="/bundle.js"></script> </body> </html>
HTML