material-design-for-react
Version:
A React package that implements Google Material Design Web Components
72 lines (58 loc) • 1.63 kB
Markdown
# Material Design for React
When I was looking for a new UX look and feel for a project at work, I came across
Material Design ("MD"). I found some very good libraries that implemented MD for React. I also found
that they differed somewhat between each other and also suffered inconsistencies from one
release to another.
I therefore took the approach of wrapping Material Design Components (WEB) inside React components.
That's all my library is. A loose wrapper of MD components. But, what you get is a true implementation
of Material Components.
## Supported Components
* AppBar
* Buttons
* Card
* Checkbox
* Dialog
* Drawer Permanent and Temporary)
* Grid (Responsive layout)
* Lists
* Menus
* Pickers (Date and Time)
* Progress
* RadioButton
* Select
* Simple Menu
* Slider
* Snackbar
* Switch
* Tabs
* Textfield
* Theme
* Toolbar
* Typography
# Installation and Usage
```
npm install material-design-for-react
```
To use any component in your code...
```
// Import button and Grid components
import { Button, Grid } from 'material-design-for-react';
. . . .
render() {
return (
<Grid>
<div span='4'>
<Button type='primary'>Hi, I'm a button!</Button>
</div>
</Grid>
);
}
```
# Running this code
* Download the repo
* ``` npm install ```
* ``` npm run startdev ```
* Point your browser to http://localhost:8080
Note: I use a simple node server to serve the app... Not required for your app :-)
View DEMO <a href=https://reactmaterial.herokuapp.com/>HERE</a>
The DEMO page (which includes docs) was constructed using this library.