React Material Components Web

React wrapper of Material Components Web

Under Active Development

The project is under active development.

Every updates can contain breaking changes before 0.2.0.

We do not recommend you to use this library for produciton applications at this time.

Documentation

You can find documentation with live demo at https://react-mdc.github.io/

Features

• Typed strictly with TypeScript

  You can access typing support by also using TypeScript

• Stylesheet independent

  Since Material Components Web can be customized with scss, it does not depend on specific stylesheet. You can load your own stylesheet or a default one.

• Each component packaged individually

  Like Material Components Web, You can access all components individually, under @react-mdc npm scope.

Getting Start

Install the library

$ npm install --save @react-mdc/typography

Import the stylesheet

<link type="text/css" href="/static/material-components-web.min.css" rel="stylesheet" />

Or load using webpack and scss-loader

my-mdc.scss

// My main Sass file.
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #76ff03;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

app.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import "./stylesheets/my-mdc.scss";
import Main from './main.js';

ReactDOM.render(<Main />, document.getElementById('root'));

And import @react-mdc then give it a shot.

main.js

import * as React from "react";
import Typography from "@react-mdc/typography";

export default class Main extends React.Component<{}, {}> {
    render () {
        return (
            <Typography>
                <Typography.Title>
                    This is an example
                </Typography.Title>
                <Typography.Body2>
                    Hello world!
                </Typography.Body2>
            </Typography>
        );
    }
}

Setup for Development

Bootstrap

$ lerna bootstrap

Build

$ npm run build

Run Docs

$ cd docs
$ npm start

Watch for Changes and Build

$ npm run watch

Run Test

$ npm test

to watch

$ npm test:watch