MDC React

Material Components Web implemented in React.

Setup

Install the library using npm:

npm i mdc-react

If you plan on using the Sass files, you'll also need to install sass:

npm i -D sass

NOTE: MDC React (as well as MDC Web) uses the new Sass Module System. Unfortunately at this time the node-sass implementation does not support it. Please use the sass library.

Usage

JS

To use the components just import what you need from the library:

import { Button } from 'mdc-react';

const App = () => {
    return (
        <div>
            <Button>Click me!</Button>
        </div>
    );
};

Alternatively you can import only the components you need:

import Button from 'mdc-react/button';
import Typography from 'mdc-react/typography';

const App = () => {
    return (
        <div>
            <Typography>Hello world!</Typography>
            <Button>Click me!</Button>
        </div>
    );
};

Sass

You can use all the styles:

@use 'path-to-node_modules/mdc-react';

or only the ones you need:

@use 'path-to-node_modules/mdc-react/src/button';
@use 'path-to-node_modules/mdc-react/src/typography';