A React (15 / 16) wrapper for the official Material Design (Web) Components v0.39.0 https://jamesmfriedman.github.io/rmwc/
Features:
- Implements Google's official material-components-web library
- Tested in all versions of React ranging from 15.5.x to 16.5.x
- First class Flow Type Support, no extra configuration needed
- First class Typescript support (Beta)
- Server side rendering support
- Individually packaged and released components
New in 2.0.0: Individually packaged and released components!
2.0.0 does not contain any changes to the components themselves, but it's a major refactor of how RMWC is packaged and deployed. All components have been broken apart into their own npm packages. What this means for you:
- From now on RMWC will honor Semver. Any breaking change to a component (aka prop interface) will bump the major version. This should alleviate some issues people have had with npm greedily auto updating.
- Components can now be individually installed which means they can also be individually upgraded. This further alleviates the pain of a breaking changes by allowing you to upgrade one component at a time at your leisure.
- Please note that all components will still be versioned and released to together. This means that if any component has a breaking change, the version will be bumped on ALL components, even though they don't contain a breaking change. This is the safest way to guarantee cohesive releases of the library. You'll know that all 3.x.x components are intended to work together.
- The docs have been updated to reflect importing from the new modules, but work has been done to make sure importing from the old syntax (rmwc/Button) still works for the time being. It is recommended that you upgrade to the new syntax at your convenience (@rmwc/button).
View the changelog for detailed updates: https://github.com/jamesmfriedman/rmwc/blob/master/CHANGELOG.md
- To create the thinnest, lightest, and spec compliant wrapper around Google Material Design Components for the 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.
Required steps
npm i rmwc --saveoryarn add rmwc- material-components-web should be installed automatically as a peer dependency. Include
node_modules/material-components-web/dist/material-components-web.min.cssin 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
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" /> - add the class
mdc-typographyto the body<body className="mdc-typography">...</body>
- add
- If you would like to use the material-icons font:
- add
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- add
- Add global settings by using the optional
<RMWCProvider />component at the root of your project. See the 'Provider' section for more info.
Additional information is available in the Installation Guide
Read the docs on how to Usage
Read the docs on Methodology
Read the docs on Methodology
- On MacOS Sierra and higher, install watchman to fix a filesystem issue with
Jest.
brew install watchman npm test
git clone https://github.com/jamesmfriedman/rmwc.gitcd rmwcnpm installnpm start