React Material Web Components
A React wrapper for Material Design (Web) Components
README
RMWC - React Material Web Components
⚡️ Attention: This project is currently being brought back to life. If you're interested in helping with maintenance and becoming a contributor or maintainer, please message on Discord.
- https://github.com/jamesmfriedman/rmwc/issues/758
- We recently closed all issues for a full reset as we get back to the most recent Google version. If any still apply, please reopen.
RMWC is a React UI Kit built on Google's official Material Components Web library v8.x.x
Features:
- [x] Uses Google's official material-components-web library
- [x] Includes Addon components for ones missing from the official spec
- [x] Works in React 16.8.x and up
- [x] First class Typescript Support
- [x] Server side rendering support
- [x] Individually packaged and released components
Try it in the Code Sandbox
- Javascript Sandbox https://codesandbox.io/s/rmwc-sandbox-o0s0d
- Typescript Sandbox https://codesandbox.io/s/rmwc-typescript-sandbox-y7516
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
v8.0.3 is here! This release includes bug fixes of v8.0.0. One being the date-picker not showing up in Chrome, when setting Textfield to have type="date".
- npm i rmwc@latest or npm i @rmwc/button@latest.
- React 17 now usable as a peer dep
- Updated dependencies
_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
- 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! 🙏 We are no longer accepting financial contributions, and the remaining balance in our Open Collective will go to help efforts in the Ukraine. Thank you to all of our previous backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]