Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kradio3/react-mdc-web
Material Design Components for React
https://github.com/kradio3/react-mdc-web
css design material mdc react web
Last synced: 3 months ago
JSON representation
Material Design Components for React
- Host: GitHub
- URL: https://github.com/kradio3/react-mdc-web
- Owner: kradio3
- License: mit
- Created: 2017-01-09T09:17:48.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T18:05:45.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T13:13:20.913Z (7 months ago)
- Topics: css, design, material, mdc, react, web
- Language: JavaScript
- Homepage: https://kradio3.github.io/react-mdc-web/
- Size: 3.43 MB
- Stars: 173
- Watchers: 8
- Forks: 25
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-components - kradio3/react-mdc-web - Simple React.js wrapper, not using foundation classes. (Material Components Web (MDC Web) / MDC Web Framework Integrations)
README
# [Material components for React](https://kradio3.github.io/react-mdc-web/)
[![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Travis build][travis-image]][travis-url]
React components based on styles from [Material Design Components Web project](https://github.com/material-components/material-components-web). Components are written in React.js. Doesn't use MDC foundation classes.
## Installation
From CDN
```html
```
From package manager
```sh
npm i --save react-mdc-web
```
## Theming
### Default theme
* Include CSS with default theme into HTML page
```html
```
* Or import it into JS/JSX file
```javascript
// MyApp/index.js
import 'material-components-web/dist/material-components-web.min.css';
```
### Custom theme
Override default theme colors with Sass or with CSS Custom Properties, just follow these guides:
* [Changing the theme with Sass](https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass)
* [Changing the theme with CSS Custom Properties](https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-4-changing-the-theme-with-css-custom-properties)
## Usage
```js
import React, { Component } from 'react'
import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';
class MyComponent extends Component {
render() {
return (
Title goes here
Lorem ipsum dolor sit amet, sint adipiscing ius eu
Save
Remove
);
}
}
```
More samples could be found on the [Documentation Site](https://kradio3.github.io/react-mdc-web/)
## Contribution & Local Development Guide
1. create parent folder react-mdc-web-dev
1. clone/fork react-mdc-web inside the react-mdc-web-dev folder
1. create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
1. should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
1. cd react-mdc-web-showcase
1. npm rm --save-dev react-mdc-web
1. npm i --save-dev ../react-mdc-web
1. npm i --save-dev material-components-web
1. npm start
1. cd ../react-mdc-web
1. npm run watch
## License
MIT, see [LICENSE](/LICENSE) for details
[status-image]: https://img.shields.io/badge/status-maintained-brightgreen.svg
[status-url]: https://github.com/kradio3/react-mdc-web
[npm-image]: https://img.shields.io/npm/v/react-mdc-web.svg
[npm-url]: https://www.npmjs.com/package/react-mdc-web
[travis-image]: https://travis-ci.org/kradio3/react-mdc-web.svg?branch=master
[travis-url]: https://travis-ci.org/kradio3/react-mdc-web
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg
[license-url]: https://raw.githubusercontent.com/kradio3/react-mdc-web/master/LICENSE