Material Components

Stateless UI components for react that follow material design.

Introduction

material-components is a library of React (0.14.0) user interface components based on material design.

Unlike some other React based component libraries, material-components are completely stateless making them an ideal companion to libraries such as Cerebral or Redux. But they can also be used with other flux based frameworks or even without a framework at all.

Demo & Code Examples

Take a look at the demo page for code examples.

Installation

npm install --save-dev material-components

Configuration

material-components is dependent on the react-tap-event-plugin, so be sure to add the following in your main.js:

// support tap events
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Some styles and transitions are defined in css and must be included in your project. With webpack simply use the css-loader plugin and include the following line in your main.js:

require('material-components/lib/index.css');

In the root component you need to define the styles for material-components. These only need to be defined once and should then work wherever material-components are used in your app. For color choices please see https://www.google.com/design/spec/style/color.html#color-color-palette

import React, { Component, PropTypes } from 'react';

class Application extends Component {

  static displayName = 'Application';

  static childContextTypes = {
    componentStyle: React.PropTypes.object
  };

  getChildContext() {
    return {
      componentStyle: {
        primaryColor: '#FFC107',
        primaryFontColor: 'rgba(0, 0, 0, 0.7)',
        secondaryColor: '#009688',
        secondaryFontColor: 'rgba(255, 255, 255, 0.9)',
        errorColor: '#C00',
        successColor: '#090',
        typographyColor: '#212121'
      }
    };
  }

  render() {
    return (
      <div>
        The app goes here
      </div>
    );
  }
}

export default Application;

Contribute

Fork the repository

• npm install
• npm run dev runs dev mode which watches for changes and auto lints, tests and builds
• npm test runs the tests
• npm run lint lints the code
• npm run build compiles to es5

License

MIT