Home

preact-material-components is a thin opinionless wrapper around material-components-web. Use these components to add material components to your web app, without worrying about the extra code of components which you are not using.

How to use:

There are three distributions:

Default Build
Location:
Package Root / preact-material-components/<Component>
Who?
- Libraries: ✖ (Users should decide about transpilation themselves)
- Applications: ✔
Support:
This supports all browsers supported by mwc, JavaScript and TypeScript

ES Module Build
Location:
esm directory / preact-material-components/esm/<Component>
Who?
- Libraries: ✔
- Applications: ✔
Support:
This supports most recent browsers, JavaScript and TypeScript

TypeScript Source
Location:
ts directory / preact-material-components/ts/<Component>
Who?
- Libraries: (✔) (Not recommended, keep in mind that your library will only support TypeScript)
- Applications: ✔
Support:
Browser support depends on transpilation/TypeScript configuration and only TypeScript is supported.

Installation and Usage:

All the components of preact-material-components are built to work independently. So there are couple of ways to use them.

npm i -D preact-material-components

Using the JS of the component

You can also use the components individually, as none of the tree shaking currently removes unused classes.

import Radio from 'preact-material-components/Radio';
import FormField from 'preact-material-components/FormField';
import Button from 'preact-material-components/Button';

Although you can import all the components together, you should not. Importing this way will bring unnecessary code of other components into your final bundle. This might hit your metrics like time to interactivity, load times, etc. DO NOT BLOAT YOUR BUNDLE.

import {Button, Fab, Snackbar} from 'preact-material-components';

Using the CSS of the component

If you are using only a couple of components from the entire package, try importing individual CSS, for the same reason: TO AVOID BLOATING YOUR CSS BUNDLE.

import 'preact-material-components/Radio/style.css';
import 'preact-material-components/FormField/style.css';
import 'preact-material-components/Button/style.css';

However this approach might work against you if you use a lot of components. In that case, prefer adding the entire stylesheet at once, as it is more optimized for such cases.

import 'preact-material-components/style.css';