https://github.com/kripod/material-components-react
Modular and customizable Material Design UI components for React.
https://github.com/kripod/material-components-react
Last synced: 11 months ago
JSON representation
Modular and customizable Material Design UI components for React.
- Host: GitHub
- URL: https://github.com/kripod/material-components-react
- Owner: kripod
- License: mit
- Created: 2017-01-10T21:44:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-26T15:51:27.000Z (over 9 years ago)
- Last Synced: 2025-06-18T18:50:00.489Z (about 1 year ago)
- Language: JavaScript
- Size: 156 KB
- Stars: 32
- Watchers: 5
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Components for React
Material Components for React (MDC-React) help developers execute [Material Design][] by providing bindings for [material-components-web][].
[Material Design]: https://material.io
[material-components-web]: https://github.com/material-components/material-components-web
[](https://www.npmjs.com/package/@react-material/all)
[](https://travis-ci.org/kripod/material-components-react)
[](http://commitizen.github.io/cz-cli/)
## Quick start
Install the library:
```sh
npm i -S @react-material/all
```
Then simply import any of the available components along with the corresponding MDC-Web stylesheet(s):
```jsx
import { Button, Fab } from '@react-material/all';
import React from 'react';
import { render } from 'react-dom';
import 'material-components-web/dist/material-components-web.css';
render(
Hello, World!
favorite_border
,
document.getElementById('root'),
);
```
```html
```
Use [Create React App][] to bootstrap applications based on MDC-React with no build configuration.
[Create React App]: https://github.com/facebookincubator/create-react-app
## Installing individual components
MDC-React is modular by design. Each component lives within its own package under the [@react-material npm scope][].
```sh
npm i -S @react-material/button @react-material/checkbox @react-material/fab
```
All our components can be found in the [packages][] directory.
[@react-material npm scope]: https://npmjs.com/~react-material
[packages]: ./packages
## Including components
### JavaScript
If you are using a module loader such as Webpack or SystemJS to load your JS modules, you can simply `import` every component you need from `@react-material/all` and use it as such:
```js
import { Checkbox } from '@react-material/all';
```
You can do the same with individual components:
```js
import Checkbox from '@react-material/checkbox';
```
### CSS
All MDC-Web components which include styles provide them at `dist/mdc.COMPONENT.css`, as well as a complementary minified version at `dist/mdc.COMPONENT.min.css`. Note that _CSS files for a component's dependencies are not included within the component's CSS file_, so if you are using individual components you'll have to include each separately.
## Running the demo
```sh
npm i
npm run build
npm start
```