React-Mdc-Web

Material Design Components for React

Installation

• Library could be installed from CDN. Include the library into your html page:

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

  Try it out on Codepen

• Or from package manager:

   npm i --save react-mdc-web 
  

• If you are going to use Material icons, don’t forget to include them:

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
  

Usage

• Bundlers

  Import ‘react-mdc-web’, if you are using bundler, such as webpack or Browserify

  import {Card, CardHeader, CardTitle} from 'react-mdc-web/lib';
  

  Or default import to reduce chunks sizes:

  import Card from 'react-mdc-web/lib/Card/Card';
  import CardHeader from 'react-mdc-web/lib/Card/CardHeader';
  import CardTitle from 'react-mdc-web/lib/Card/CardTitle';
  

• UMD build

  Library is available as ReactMdcWeb in the global context.

  const {Card, CardHeader, CardTitle} = ReactMdcWeb;
  const Demo = (props) => (
         <Card style={{width: '300px'}}>
            <CardHeader>
              <CardTitle>
                Hello world!
              </CardTitle>
            </CardHeader>
          </Card>
  
  );
  ReactDOM.render(<Demo />, document.getElementById('demo'))
  

  Try it out on Codepen