React wrapper of Material Components Web
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.
You can find a document with live demo from https://react-mdc.github.io/
-
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.
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>
);
}
}
Bootstrap
$ lerna bootstrap
Build
$ npm run build
$ cd docs
$ npm start
$ npm run watch
$ npm test
to watch
$ npm test:watch
-
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