react-md
React Material Design - React components built with sass
react-md is a set of React components and sass files for implementing Google's Material Design. The Documentation Website can be used for viewing live examples, code samples, and general prop documentation.
Installation
$ npm i -S react \
react-dom \
react-addons-transition-group \
react-addons-css-transition-group \
react-md
Usage
Using create-react-app
create-react-app
does not support Sass, so
here are some steps to get it working:
$ create-react-app my-app --scripts-version --custom-react-scripts
$ npm i -S react-md
Customize the .env
to include SASS. See custom-react-scripts
for more information.
If this is not a solution for you, you can always run yarn run eject
(or npm run eject
) from your app and add Sass yourself.
$ create-react-app my-app
$ yarn run eject
$ yarn add react-md
$ yarn add --dev sass-loader node-sass
$ vim -O config/webpack.config.dev.js config/webpack.config.prod.js
Add an scss/sass exclusion on line 109 (webpack.config.dev.js) and line 115 (webpack.config.prod.js)
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/,
/\.s(c|a)ss$/,
],
In the dev config, add a new loader after the CSS loader:
{
test: /\.s(a|c)ss$/,
loader: 'style!css?importLoaders=2!postcss!sass?sourceMap&outputStyle=expanded'
},
In the prod config:
{
test: /\.s(a|c)ss$/,
loader: ExtractTextPlugin.extract('style', 'css?importLoaders=2!postcss!sass?outputStyle=compressed')
},
Using one of the Boilerplates
If create-react-app
is not your thing, you can try using one of the available boilerplates.
Basic Webpack Usage
/* App.jsx */
import React from 'react';
import { render } from 'react-dom';
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Roboto:300,400,500,700', 'Material Icons'],
},
});
import './_styles.scss';
import MyAwesomeComponent from './MyAwesomeComponent';
const App = () => (
<MyAwesomeComponent />
);
render(<App />, document.getElementById('app'));
/* MyAwesomeComponent.jsx */
import React, { Component } from 'react';
import Button from 'react-md/lib/Buttons';
export default class MyAwesomeComponent extends Component {
render() {
return <Button raised label="Hello, World!" />;
}
}
/* _styles.scss */
@import '~react-md/scss/react-md';
You can also use the UMD build from unpkg:
<!-- Production Version -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-md.deep_purple-pink.min.css">
<script src="https://unpkg.com/[email protected]/dist/react-md.min.js"></script>
<!-- Development Version -->
<!-- development version of CSS unavailable -->
<script src="https://unpkg.com/[email protected]/dist/react-md.js"></script>
UMD Usage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-md.deep_purple-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:400,500,700">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-md.min.js"></script>
<script>
var MyAwesomeComponent = React.createClass({
render: function() {
return React.createElement(ReactMD.Button, { label: 'Hello, World!', flat: true });
}
});
ReactDOM.render(React.createElement(MyAwesomeComponent), document.getElementById('app'));
</script>
</body>
</html>
Customizing the theme
The application should define a primary
and secondary
color. The primary
color
should be chosen from one of the '-500'
colors and the secondary
should be one of
the 'a-'
colors.
The default color palette is defined as:
$md-primary-color: $md-indigo-500 !default;
$md-secondary-color: $md-pink-a-200 !default;
If you change these variables before the react-md-everything
mixin is included, your entire
application will be styled with your new theme.
@import '~react-md/src/scss/react-md';
$md-primary-color: $md-teal-500;
$md-secondary-color: $md-lime-a-400;
@include react-md-everything;
See the themes page on the documentation website. There is also a theme builder available to try mix and matching different colors.
Known Bugs/Works in Progress/Future Changes
- Bottom sheets
- Steppers
- Eventually add Floating button transitions/morphing abilities. Ex: Speed Dial, Morph into toolbar/material/paper