# preact-material-components

[![Greenkeeper badge](https://badges.greenkeeper.io/prateekbh/preact-material-components.svg)](https://greenkeeper.io/)
[![Dependencies badge](https://david-dm.org/prateekbh/preact-material-components.svg)](https://david-dm.org/)
[![build](https://api.travis-ci.org/prateekbh/preact-material-components.svg?branch=master)](https://api.travis-ci.org/prateekbh/preact-material-components.svg?branch=master)

preact components for [material-components-web](https://github.com/material-components/material-components-web)

---

These components bring material components in an a-la-carté fashion.
You can use `n` number of components without taking the weight of any extra code of the components you do not use.

`preact-material-components` is a thin opinion-less wrapper over [material-components-web](https://github.com/material-components/material-components-web/tree/master/packages). Use these for painless integration of these components into your project, without taking the bloat.

Smaller bundles FTW!!!

## Components List

* 👍 button

* 👍 card

* 👍 chips

* 👍 checkbox

* 👍 dialog

* 👍 drawer

* 👍 elevation

* 👍 fab

* 👍 form-field

* 👍 icon-toggle

* 👍 layout-grid

* 👍 line-ripple

* 👍 linear-progress

* 👍 list

* 👍 menu

* 👍 radio

* 👍 select

* 👍 slider

* 👍 snackbar

* 👍 switch

* 👍 tabs

* 👍 textfield

* 👍 theme

* 👍 toolbar

## FAQ

### Error while using preact-material-components with **less**

If you are using less-loader you have to set **strictMath: true** option in your webpack config

```
{
	loader: 'less-loader',
	options: { strictMath: true }
}
```

### Primary and Secondary props not working

To use theming props like primary/secondary, you'll need to include Theme's css

```
import 'preact-material-components/Theme/style.css
```

## Docs and Demos

https://material.preactjs.com/

---

**P.S.:** Let us know if you're using `preact-material-components` we would love to hear your experiences.