A React (15 / 16) wrapper for Material Design (Web) Components v0.30.0 https://jamesmfriedman.github.io/rmwc/
RMWC has been updated to MDC 0.30.0 which has several new features but some breaking changes.
- Feature: Chip There is a new Chip and ChipSet component for you to use.
- Feature: Standard and Box Select There are new stylings for the Select component
- Feature: ButtonIcon You can now use the ButtonIcon component to render an Icon inside of a Button
- Breaking Change: cssOnly Select Removal MDC has completely removed cssOnly selects. If you relied on the cssOnly Select for mobile, guidance is to wrap the select in your own component that returns a standard CSS select.
- Breaking Change: Menu MDC renamed SimpleMenu has been renamed to Menu. In addition to this, RMWC uses the "Simple"Component naming convention and has added a SimpleMenu component that manages state. To upgrade, just rename your exising SimpleMenu components to Menu, or see the new SimpleMenu usage and adjust accordingly.
- Breaking Change: Cards MDC has completely reworked their card layouts to be much more minimal. Guidance on this is to use your own CSS to style the content appropriately.
- Breaking Change: Dark Theme The automatic dark theme styling and themeDark props have been entirely removed from MDC. Guidance on this is to use your own CSS to style things in a dark theme context.
- 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