Skip to content
This repository has been archived by the owner on Dec 1, 2022. It is now read-only.

Hummingbird-RegTech/react-mdc-web

 
 

Repository files navigation

Maintenance Status NPM version Travis build

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/[email protected]/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

License

MIT, see LICENSE for details

Packages

No packages published

Languages

  • JavaScript 100.0%