Material Components React Save
Modular and customizable Material Design UI components for React.
Material Components for React
Material Components for React (MDC-React) help developers execute Material Design by providing bindings for material-components-web.
Quick start
Install the library:
npm i -S @react-material/all
Then simply import any of the available components along with the corresponding MDC-Web stylesheet(s):
import { Button, Fab } from '@react-material/all';
import React from 'react';
import { render } from 'react-dom';
import 'material-components-web/dist/material-components-web.css';
render(
<main>
<Button>Hello, World!</Button>
<Fab aria-label="Favorite">favorite_border</Fab>
</main>,
document.getElementById('root'),
);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>
Use Create React App to bootstrap applications based on MDC-React with no build configuration.
Installing individual components
MDC-React is modular by design. Each component lives within its own package under the @react-material npm scope.
npm i -S @react-material/button @react-material/checkbox @react-material/fab
All our components can be found in the packages directory.
Including components
JavaScript
If you are using a module loader such as Webpack or SystemJS to load your JS modules, you can simply import every component you need from @react-material/all and use it as such:
import { Checkbox } from '@react-material/all';
You can do the same with individual components:
import Checkbox from '@react-material/checkbox';
CSS
All MDC-Web components which include styles provide them at dist/mdc.COMPONENT.css, as well as a complementary minified version at dist/mdc.COMPONENT.min.css. Note that CSS files for a component's dependencies are not included within the component's CSS file, so if you are using individual components you'll have to include each separately.
Running the demo
npm i
npm run build
npm start
Open Source Agenda Badge
