# trent-super-components

> React Components for Material Design Lite

Latest version **0.0.4** (published 2016-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install trent-super-components
pnpm add trent-super-components
yarn add trent-super-components
bun add trent-super-components
```

## 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.4 |
| Published | 2016-04-05 |
| First published | 2016-04-05 |
| 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 | 1751 |
| Author | Tommy Leunen |
| Maintainers | young_spring |
| Keywords | react, react-component, mdl, material-design, badge, button, card, checkbox, data-table, fab-button, icon, icon-button, icon-toggle, radio, radio-group, switch, textfield, progress, progress-bar, spinner, slider, tooltip, menu, dropdown, Layout, Drawer, Grid, Tabs |

## Links

- npm: https://www.npmjs.com/package/trent-super-components
- Repository: https://github.com/tleunen/react-mdl
- Issues: https://github.com/tleunen/react-mdl/issues
- npm.io page: https://npm.io/package/trent-super-components

## Dependencies (4)

- [clamp](https://npm.io/package/clamp.md) ^1.0.1
- [jquery](https://npm.io/package/jquery.md) ^2.2.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.3
- [jquery-inview](https://npm.io/package/jquery-inview.md) ^1.1.2

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2016-04-05
- 0.0.3 — 2016-04-05
- 0.0.2 — 2016-04-05
- 0.0.1 — 2016-04-05

## README

# [React-MDL][react-mdl-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url]

React-MDL is a set of React components build on top of [Material Design Lite][google-mdl-url] v1.1.3

Join the #react-mdl channel of the [Reactiflux Discord][discord-url] community.

## Requirements
Instead of using the official `material.css` and `material.js` files from the MDL project, you should use the files we provide in [/extra](/extra/). The reason to that is because the official `Layout` component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it.
If you're worried about the changes we made, you can take a look at the [patch note](/extra/layout-patch.diff) or read about the issue in [this ticket](https://github.com/google/material-design-lite/issues/1356).

```html
<link rel="stylesheet" href="material.css">
<script src="material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```

## How to use the components

### import the entire library
```js
import ReactMDL from 'react-mdl';

var Button = ReactMDL.Button;
var Card = ReactMDL.Card

// or
import { Button, Card, CardText } from 'react-mdl';
```

### import a specific component
```js
import Button from 'react-mdl/lib/Button';
import { Card, CardText, CardActions } from 'react-mdl/lib/Card';
```

## License

MIT, see [LICENSE.md](/LICENSE.md) for details.

[react-mdl-url]: https://tleunen.github.io/react-mdl/
[travis-image]: https://travis-ci.org/tleunen/react-mdl.svg?branch=master
[travis-url]: https://travis-ci.org/tleunen/react-mdl
[coveralls-image]: https://coveralls.io/repos/tleunen/react-mdl/badge.svg?branch=master&service=github
[coveralls-url]: https://coveralls.io/github/tleunen/react-mdl?branch=master
[google-mdl-url]: https://github.com/google/material-design-lite
[discord-url]: https://discord.gg/0ZcbPKXt5bWTpxL5

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