[](https://circleci.com/gh/jamesmfriedman/rmwc/tree/master)
[](https://www.npmjs.com/package/rmwc)
[](https://github.com/jamesmfriedman/rmwc/blob/master/LICENSE)
[](https://gitter.im/react-material-web-components/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# RMWC - React Material Web Components
A React (15 / 16) wrapper for the official Material Design (Web) Components v0.36.0
[https://jamesmfriedman.github.io/rmwc/](https://jamesmfriedman.github.io/rmwc/)
Features:
* [x] Uses Google's official material-components-web library
* [x] Tested in all versions of React ranging from 15.5.x to 16.4.x
* [x] First class Flow Type Support, no extra configuration needed
* [x] First class Typescript support (Beta)
* [x] Server side rendering support
## Recent updates
MDC 36 is a simple upgraded containing mostly bugfixes and there are minimal breaking changes.
View the changelog for detailed updates: [https://github.com/jamesmfriedman/rmwc/blob/master/CHANGELOG.md](https://github.com/jamesmfriedman/rmwc/blob/master/CHANGELOG.md)
## Goals
* To create the thinnest, lightest, and spec compliant wrapper around Google
Material Design Components for the Web
[https://material.io/components/web/](https://material.io/components/web/)
* To utilize the Foundation javascript classes and expose their api for
consumption
* To be as unobtrusive and sensible as possible.
## Installation
Required steps
* `npm i rmwc --save` or `yarn add rmwc`
* [material-components-web](https://github.com/material-components/material-components-web) should be installed automatically as a peer dependency. Include `node_modules/material-components-web/dist/material-components-web.min.css` in your project via your method of choice (using a link tag, a css-loader, etc.).
Optional steps
* If you would like to use the default **Roboto font**:
* add ``
* add the class `mdc-typography` to the body `...`
* If you would like to use the **material-icons** font:
* add ``
* Add global settings by using the optional `` component at the root of your project. See the 'Provider' section for more info.
Additional information is available in the [Installation Guide](https://jamesmfriedman.github.io/rmwc/installation)
## Usage
Read the docs on how to [Usage](https://jamesmfriedman.github.io/rmwc/usage)
## Why?
Read the docs on [Methodology](https://jamesmfriedman.github.io/rmwc/methodology)
## About Breaking Changes
Read the docs on [Methodology](https://jamesmfriedman.github.io/rmwc/methodology)
## To run the tests
* On MacOS Sierra and higher, install watchman to fix a filesystem issue with
Jest. `brew install watchman`
* `npm test`
## To run the docs / contribute
* `git clone https://github.com/jamesmfriedman/rmwc.git`
* `cd rmwc`
* `npm install`
* `npm start`