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 product now.

Documentation

You can find a document with live demo from https://react-mdc.github.io/

Features

• Typed strictly with TypeScript

  You can get a typing support with 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 default one.

• Packaged each components individually

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

Getting Start

Install the library

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

Import stylesheet

<link type="text/css" href="/build/materialmaterial-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 try it.

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

Supported Components

• Button

• Card

• Checkbox

• Dialog

• Drawer

• Elevation

• Fab

• Form Field

• Icon Toggle

• Layout Grid

• List

• Menu

• Radio

• Ripple

• Rtl

• Select

• Snackbar

• Switch

• Textfield

• Theme

• Toolbar

• Typography