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@nextornpm 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 --saveoryarn 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.gitcd rmwcnpm installnpm start
Contributions
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! ? [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]