Update: rmwc is now also a complete implementation of Material Components for the Web and, as of this writing, seems to be more actively maintained than react-mc.
Note: Upon the discovery of react-mc, which is an already-complete React implementation of Material Components for the Web, this project is being discontinued in order to avoid unnecessarily duplicating work.
(This project is not affiliated with Google.)
This project enables you to easily use Google's modern Material Components for the Web library with Facebook's React framework. This project wraps each Material component with a React component. You only have to invoke the respective React component and this project will take care of instantiating a Material component.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
# Windows choco install nodejs # macOS: Homebrew brew install node # Ubuntu curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs # See for more options: https://nodejs.org/en/download/package-manager/
# Windows choco install yarn # macOS: Homebrew brew install yarn # Ubuntu curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update && sudo apt-get install yarn
First of all, clone this repository onto your local machine and cd
into the project:
git clone https://github.com/0x326/material-components-react cd material-components-react/
To download dependencies, open a terminal prompt and enter:
yarn
First, you'll want to have a look at this project's React documentation. To do so, run:
yarn docs # This will start a server with the compiled docs
Then, in your own project, add this as a dependency:
yarn add
Finally, in your code, write something like this:
import MDCReact from 'material-components-react' // ... render() { return ( <FormField> <Checkbox id="my-checkbox" indeterminate={true} checked={false} disabled={false} /> <CheckboxLabel id="my-checkbox-label" for="my-checkbox"> Ready to go </CheckboxLabel> </FormField> ) }
If you want to contribute to this project, you'll want to try out your code with a development build and server. To begin, execute:
yarn start
This project uses Flow and Jest to test code.
Flow is a static type checker for JavaScript. It reads type annotations and makes sure every variable is
typed correctly given its usage (ex: so you don't call .toLowerCase()
on a Number
). To run flow, execute:
yarn flow
It could be useful to have the type warnings in an IDE. I recommend Flow-IDE for Atom.
To install, go to Settings >> Install
and search for "Flow IDE" or enter this command:
apm install flow-ide
Jest is a typical unit-testing framework for JavaScript. To run the tests, execute:
yarn test
TODO: Test coding style. Presently there are no tests or formatters.
For deployment, make sure to use a production build:
yarn build
Please read CONTRIBUTING.md for details on the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the our releases.
- John Meyer - Initial work
See also the list of contributors who participated in this project.
This project is licensed under the MIT License.
- Google, for designing and implementing an awesome UI
See also MDC's README for a maintained list of framework integrations
- rmwc: Full implementation of MDC; actively maintained
- react-mc: Full implementation of MDC
- react-mdc-web: Uses MDC classes (
material-components-react
uses MDC foundation classes) - react-material-components-web