# reactmdcweb

> Material Design Components for Web packaged in React

Latest version **0.0.7** (published 2017-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactmdcweb
pnpm add reactmdcweb
yarn add reactmdcweb
bun add reactmdcweb
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2017-04-08 |
| First published | 2017-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | srinathh |

## Links

- npm: https://www.npmjs.com/package/reactmdcweb
- Repository: https://github.com/srinathh/reactmdcweb
- Homepage: https://github.com/srinathh/reactmdcweb#readme
- Issues: https://github.com/srinathh/reactmdcweb/issues
- npm.io page: https://npm.io/package/reactmdcweb

## Dependencies (4)

- [react](https://npm.io/package/react.md) 0.14.3
- [jquery](https://npm.io/package/jquery.md) 2.1.4
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [material-components-web](https://npm.io/package/material-components-web.md) ^0.8.0

## Recent versions

- 0.0.7 (latest) — 2017-04-08
- 0.0.6 — 2017-04-04
- 0.0.5 — 2017-04-04
- 0.0.4 — 2017-04-04
- 0.0.3 — 2017-03-26
- 0.0.2 — 2017-03-26
- 0.0.1 — 2017-03-26

## README

reactmdcweb
===========
[Material Components for Web](https://github.com/material-components/material-components-web)
encapsulated as React Components. These components use the CSS and JS directly from Material Components for Web and by and large implement the [Simpler Approach](https://github.com/material-components/material-components-web/blob/master/docs/integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components) 
of integrating with frameworks. These are therefore suitable for use in Browser/Webview contexts.

The intent of this project is to build a completely non-opinionated, [flexible
and modular](http://srinathh.github.io/blog/modular-flexible-react-container-components/)
plain vanilla wrapping of Material Components of Web without any magic. We won't make
any assumptions in how the components should be composited beyond the
documented specifications and let you use your nodes as children.

The setup for compiling to CommonJS uses [React to CommonJS](https://github.com/goncalvesjoao/react-to-commonJS) project.

Repositories
============
- GitHub repository: [https://github.com/srinathh/reactmdcweb](https://github.com/srinathh/reactmdcweb)
- NPM package: [https://www.npmjs.com/package/reactmdcweb](https://www.npmjs.com/package/reactmdcweb)

Usage
=====

## 1. Import CSS for material components for web into your app.
Install material components for web in your app
```
npm install --save material-components-web
```

Import the default css from material-components-web in your app
```
import 'material-components-web/dist/material-components-web.css'
```

Alternatively to importing the full CSS, you can also import 
only the CSS belonging to the components of interest like this.
```
import '@material/card/dist/mdc.card.min.css'
```

## 2. Install 'reactmdcweb` package
```
npm install --save reactmdcweb
```

## 3. Import required components into your app 
```
import {Card, CardPrimary, CardTitle, CardSubTitle} from 'reactmdcweb'
```

## 4. Use the Components
```
<Card>
    <CardPrimary>
        <CardTitle>Title</CardTitle>
        <CardSubTitle>SubTitle</CardSubTitle>
    </CardPrimary>
</Card>
```

Compiling
=========
```
npm run build-commonjs
```

Components
==========
These UI elements have currently been implemented. More to come.

- Card Components
  - Card,
  - CardPrimary,
  - CardTitle,
  - CardSubTitle,
  - CardActions,
  - CardActionButton,
  - CardSupportingText,
  - CardMediaItem
- Toolbar Components
  - Toolbar, 
  - ToolbarTitle, 
  - ToolbarSection, 
- Main
- Drawer Components
  - TemporaryDrawer,
  - TemporaryDrawerContent,
  - TemporaryDrawerToolbarSpacer
- Button
- Fab
- List Components
  - List,
  - ListItem
  - ListItemText
- Text Input
  - TextField
  - TextFieldInput

---
_Source: https://npm.io/package/reactmdcweb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._