@react-mdc/elevation NPM

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>
        );
    }
}