rmwc

RMWC - React Material Web Components

A thin React wrapper for Material Design (Web) Components v0.24.0 https://jamesmfriedman.github.io/rmwc/

Recent updates

RMWC has been tested and works properly with React 16 and Material Components Web v0.24.0.

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

• npm install rmwc --save
• material-web-components should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.css in your webpage via your method of choice.

Usage

import React from 'react';
import { Button } from 'rmwc';

const HelloWorld = props => <Button>Easy</Button>

This example is using ES6 modules imports, but the library will work via CommonJS or any other UMD format.

Why?

There are many different Material UI implementations in both Angular and React. The last thing we need is another one... In React land there has been a lot of great work done, but you eventually end up in one of the following situations:

• The library is heavy or extremely inflexible (crazy api, opinionated styling)
• The library is an opinionated representation of material or it isn't very polished
• The library has been abandoned

The solution: Use the Google sanctioned javascript Material Design Components and get out of their way.

Status: Beta

RMWC is currently in Beta. All of the Material components are covered and smoke tests have been written to check rendering and basic functionality. The docs will get a fresh coat of polish and additional documentation with the final release.

• Buttons
  • Standard
  • FABs
  • Icon Toggles
• Cards
• Dialogs
• Drawers
• Elevation
• Grid Lists
• Inputs and Controls
  • Checkboxes
  • Form Fields
  • Radio Buttons
  • Select Menus
  • Sliders
  • Switches
  • Text Fields
• Layout Grids
• Linear Progress
• Lists
• Menu
• Ripples
• Snack Bars
• Tabs
• Toolbars
• Typography

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