material-design-for-react's Introduction

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 HERE

The DEMO page (which includes docs) was constructed using this library.

Recommend Projects

andrewjhart / material-design-for-react Goto Github PK