Dark Mode
backgroundLayer 1
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
    Package Root / preact-material-components/<Component>
    • Libraries: ✖ (Users should decide about transpilation themselves)
    • Applications: ✔
    This supports all browsers supported by mwc, JavaScript and TypeScript

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

  • TypeScript Source
    ts directory / preact-material-components/ts/<Component>
    • Libraries: (✔) (Not recommended, keep in mind that your library will only support TypeScript)
    • Applications: ✔
    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';