@preact-material-components/menu-surface

Implementation of a material menu surface

Usage no npm install needed!

<script type="module">
  import preactMaterialComponentsMenuSurface from 'https://cdn.skypack.dev/@preact-material-components/menu-surface';
</script>

README

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.