RMWC - React Material Web Components

RMWC is a React UI Kit built on Google's official Material Components Web library v3.x.x https://rmwc.io/

Features:

Uses Google's official material-components-web library
Includes Addon components for ones missing from the official spec
Works in React 16.3.x and up
First class Typescript Support
Server side rendering support
Individually packaged and released components

Try it in the Code Sandbox

Javascript Sandbox https://codesandbox.io/s/kpy13vqnr

Typescript Sandbox https://codesandbox.io/s/kl0w4xp95

Like this project? Try out some of my others 😎

A library for simplified Redux development: https://github.com/jamesmfriedman/redux-state-branch
Feature Flagging made Easy: https://github.com/jamesmfriedman/flagg

Recent updates

v6.0.0 is coming!

TL;DR

npm i rmwc@next or npm i @rmwc/button@next.
Coming out sometime early spring

Since the creation of RMWC, React and Javascript have continued their blazing pace of change. For context, this project was initially written in FlowTyped with a bunch of classes, and Google's part was plain old JS. Fast forward 2.5 years and React has undergone a paradigm shift with hooks while Typescript continues to expand... Also, a while back, Google released their own React wrapper that was very similar to this project. It was recently declared abandonware which has lead to an increase in interest in RMWC since it should be a relatively simple migration. Needless to say, RMWC needs some love! It's time for some spring cleaning.

The goals of V6 are simple.

A full internal API rewrite to hooks
A full internal conversion of components to idiomatic functional React components. Currently there is an abstraction called 'componentFactory' which is a barrier to entry for 3rd party contributors. With this change, anyone wanting to contribute should be able to jump in and get going.
Removal of all existing deprecations.
Smaller bundle size
Better performance
Some new components :)
More exhaustive testing

Will it be hard to migrate?

No, breaking changes will still be kept to a minimum and documented in the migration guide / changelog
The removal of previously deprecated features will always be considered a breaking change.
While unit test coverage is fairly high, the change in paradigm from classes to hooks does open up the possibility for unexpected bugs.
Some of the more enterprising folks that have hacked around the internals of this library to fix or subvert behaviors, so those hacks can't be guaranteed to continue working.

Feel free to kick the tires and get in any feature requests or bugs in the meantime. 5.7.x will continue to receive minor patches and bugfixes until the v6 release.

v5.7.2 is a maintenance release fixing a few non critical bugs

v5.7.0 is out with some great new features and fixes!

A new Tooltip component has been added
The Typography component can now use semantic tags defined by RMWCProvider
Added a fading tab transition as well as tab indicators
Bugfixes for Selects, Sliders, Lists, and Chips
Updated all dependencies
See the changelog for more details.

View all release notes 👉 https://opencollective.com/rmwc/updates

View the changelog for detailed updates: 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/
To utilize the Foundation javascript classes from material-components-web
To be as unobtrusive and sensible as possible.
To fill the gaps in material-components-web with custom React community driven components.

Installation

npm i rmwc --save or yarn add rmwc

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

RMWC avoids them at all costs! Read the docs on 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

Contributions

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

tata81 / rmwc