menu
Dark Mode
backgroundLayer 1
preact-material-components
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
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
If you are using an ES6 codebase, consider using 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-component';
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';