RMWC - React Material Web Components

A React (15 / 16) wrapper for Material Design (Web) Components v0.32.0 https://jamesmfriedman.github.io/rmwc/

Recent updates

RMWC is moving towards a direct implementation with MDC's Foundation classes. This means direct code reuse from the material-components-web implementation which will result in better performance, reliability, less bugs, and easier releases for RMWC. These will be rolled out a few at a time every release and will contain minimal breaking changes.

Patch 1.4.1

Fixes issues with SSR and foundation components
Contains a workaround for a MDC bug in Slider
Contains fixes in Select for React 15.x.

MDC has been upgraded to 0.32.0

Slider
- Implemented the foundation adapter.
- BREAKING CHANGE: onInput and onChange now use MDC's custom events and have evt.detail.value instead of evt.target.value.
IconToggle
- Implemented the foundation adapter.
- BREAKING CHANGE: onChange now uses MDC's custom event and has evt.detail.isOn instead of evt.target.value.
Chip
- Implemented the foundation adapter.
- Updated to add chip selected state.
- Added additional custom event handlers from the foundation
Ripple
- Implemented the foundation adapter.
- Corrected issues with unbounded ripples

Notes from 0.31.0

Feature: ChipIcon There are now leading and trailing icons for the chip component. This resulted in a minor breaking change, you now have to wrap the text inside of your chip with a ChipText component. See the docs.
Feature: CardPrimaryAction This makes the primary area of a card clickable with a ripple.

If you are updating from 1.1.x to MDC 0.30.0

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.

Goals

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.

Installation

Required steps

npm i rmwc --save or yarn add rmwc
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 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
- add the class mdc-typography to the body <body className="mdc-typography">...</body>
If you would like to use the material-icons font:
- add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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

Usage

Read the docs on how to Usage

Why?

Read the docs on Methodology

About Breaking Changes