Easy way to use the components in react

[4E-69-63-6B-20-42-6F-73]

Hey folks,

I've been tinkering around and created this script to easly use the material-web in React. Manually creating wrappers with lit is a hassle. Well, this script does the heavy lifting. Pop in a list of components, and out comes everything wrapped.

Of course you still need to install @lit/reac and @material/web

The magic

components = {
    "Button": [
        "md-elevated-button",
        "md-filled-button",
        "md-filled-tonal-button",
        "md-outlined-button",
        "md-text-button"
    ],
    "Checkbox": ["md-checkbox"],
    "Chips": [
        "md-assist-chip",
        "md-chip-set",
        "md-filter-chip",
        "md-input-chip",
        "md-suggestion-chip"
    ],
    "Dialog": ["md-dialog"],
    "Divider": ["md-divider"],
    "Elevation": ["md-elevation"],
    "Fab": ["md-branded-fab", "md-fab"],
    "Field": ["md-filled-field", "md-outlined-field"],
    "Focus": ["md-focus-ring"],
    "Icon": ["md-icon"],
    "IconButton": [
        "md-filled-icon-button",
        "md-filled-tonal-icon-button",
        "md-icon-button",
        "md-outlined-icon-button"
    ],
    "List": ["md-list-item", "md-list"],
    "Menu": ["md-menu-item", "md-menu", "md-sub-menu"],
    "Progress": ["md-circular-progress", "md-linear-progress"],
    "Radio": ["md-radio"],
    "Ripple": ["md-ripple"],
    "Select": ["md-filled-select", "md-outlined-select", "md-select-option"],
    "Slider": ["md-slider"],
    "Switch": ["md-switch"],
    "Tabs": ["md-primary-tab", "md-secondary-tab", "md-tabs"],
    "TextField": ["md-filled-text-field", "md-outlined-text-field"]
}

imports = []
wrappers = []
exports = []
for category, component_list in components.items():
    for component in component_list:

        new_class_name = "".join([ x.capitalize() for x in component.split("-")[1:]])
        class_name = "".join([ x.capitalize() for x in component.split("-")])
        import_component = component if component is "md-focus-ring" else component[3] #md-focus-ring doesnt follow the pattern

        imports.append(f'import {{{class_name}}} from "@material/web/{category.lower()}/{import_component}";')
        exports.append(new_class_name)

        wrappers.append(f"""const {new_class_name} = createComponent({{
    react: React,
    tagName: "{component}",
    elementClass: {class_name},
}});
""")

default_imports = """import React from "react";
import { createComponent } from "@lit/react";

"""

export = "export { \n" + ", ".join(exports) + "\n}"

code_block = default_imports + "\n".join(imports) + "\n\n" + "\n".join(wrappers) + "\n" + export
print(code_block)

[Jhoscy]

Could you show an example non how to use it in a React project ? For example a Menu

[anthonyleung-dev]

@Jhoscy I have a library that shows how to use it with React:
https://github.com/anthonyleung-dev/react-material-web

[SaadBazaz]

Here's a library which uses these components directly in React, and is installable from npm:
https://github.com/grayhatdevelopers/material-web-components-react/

P.S.: I'm a maintainer of that library.