Material components for React

React components based on styles from Material Design Components Web project. Components are written in React.js. Doesn't use MDC foundation classes.

Installation

From CDN

<script src="https://unpkg.com/react-mdc-web/out/react-mdc-web.js"></script>

From package manager

npm i --save react-mdc-web

Theming

Default theme

Include CSS with default theme into HTML page

<link rel="stylesheet" href="https://unpkg.com/material-components-web@0.23.0/dist/material-components-web.min.css">

Or import it into JS/JSX file

// 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:

Usage

import React, { Component } from 'react'
import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';

class MyComponent extends Component {
  render() {
    return (
        <Card>
          <CardHeader>
            <CardTitle>
              Title goes here
            </CardTitle>
          </CardHeader>
          <CardText>
            Lorem ipsum dolor sit amet, sint adipiscing ius eu
          </CardText>
          <CardActions>
            <Button compact>Save</Button>
            <Button compact accent>Remove</Button>
          </CardActions>
        </Card>
    );
  }
}

More samples could be found on the Documentation Site

Contribution & Local Development Guide

create parent folder react-mdc-web-dev
clone/fork react-mdc-web inside the react-mdc-web-dev folder
create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
cd react-mdc-web-showcase
npm rm --save-dev react-mdc-web
npm i --save-dev ../react-mdc-web
npm i --save-dev material-components-web
npm start
cd ../react-mdc-web
npm run watch

License

MIT, see LICENSE for details

License

kradio3/react-mdc-web

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 12

Languages

Packages