React wrapper of Google's Material Components Web
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
packages
scripts
.gitignore
.npmignore
.travis.yml
README.md
lerna.json
package-lock.json
package.json
tsconfig.base.json
tsconfig.json
tslint.base.json
tslint.json

README.md

React Material Components Web

License: MIT npm version Build Status

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