Skip to content

prateekbh/preact-material-components

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
ts
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

preact-material-components

Deprecation Notice

This repo only works with Preact 8 or lower. The work for preact X+ compatibility was unfortunately suspended due to the given lack of maintainers and their time.

Greenkeeper badge Dependencies badge build

preact components for material-components-web


These components bring material components in an a-la-carte 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. Use these for painless integration of these components into your project, without taking the bloat.

Smaller bundles FTW!!!

Which distribution to use

There are now 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.

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.