Displaying LIT web components programatically in React

Question

I have the a simple lit web component that renders a input box


import {html} from "lit-element";
import {customElement} from 'lit/decorators.js';
import "./plain-text";

export class MyInputText {
    constructor(args){
        this.args = args;
    }
    
    createPreview(){
        const {
            colorScheme,
            disabled,
            labelText,
            value,
            size,
            customizeStyles
        } = this.args? this.args: {};
        return html`
        <plain-text
                color-scheme="${colorScheme}"
                ?disabled="${disabled}"
                label-text="${labelText}"
                value="${value}"
                size="${size}"
                customizeStyles="${customizeStyles}"></plain-text>
    `;
    }
    
    propertyChanged(propertyName, propertyValue){
        this.args = {...this.args, [propertyName]:propertyValue}
        return this.createPreview();
    }
    
};

I am trying to load it programmatically in react using the following code:

let el = new PlainTextPreviewUI.PlainTextPreview();
el.propertyChanged("width", "300px");
return el;

It returns the following:

With the result above, how can display this web component correctly in React?

I tried rendering it but it gives the following error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {strings, values, type, processor}). If you meant to render a collection of children, use an array instead.

TIA.

I think you just need to remove the html` and ending back-tick: https://reactjs.org/docs/web-components.html#:~:text=As%20a%20developer%2C%20you%20are,are%20written%20using%20Web%20Components. — Colin Hale, Aug 30 '22 at 18:24

Augustine Kim · Answer 1 · 2022-09-02T00:46:37.313

React has some support for custom elements already so you can just use the custom element tag name within JSX as long as the custom element definition is loaded and registered.

If you don't need to worry about events, doing something like below is fine.

import './path/to/plain-text.js';

const ReactComponent = () => {
  const plainTextProps = {
    labelText: 'Text',
    disabled: false,
    customizeStyles: "",
    value:"d"
  }

  return (
    <plain-text {...plainTextProps}></plain-text>
  );
}

However, if you need to pass in complex data props or want to declaratively add event listeners, considering using @lit-labs/react for a React component wrapper for the Lit component.

Displaying LIT web components programatically in React

1 Answers1