Adding React support

[veredcon]

When trying to adopt controls from this library in React components it doesn't work out of the box. For example:

• "class" as a reseved keyword in ECMAScript and in jsx/tsx, react uses "className"

• boolean values as props will not be handled simply as expected, and should add falsy values as fallback.

• custom event handler not work if attached in classic inline manner.

Are there any thought of creating some adapter or address these kind of differences?

[bendera]

There is a react example repo, although I forgot to mention it in the docs. https://github.com/vscode-elements/react-example

These are the important parts: https://github.com/vscode-elements/react-example/blob/main/src/global.d.ts https://github.com/vscode-elements/react-example/blob/main/src/Demo.tsx

class and className: It's a bit confusing. React uses className for native elements, but class for web components.

Event handlers: React's event system doesn't work with custom events. This will be changed in the next version. Until then, you need to add event handlers "manually" using useEffect (see the example in the linked demo above). Publishing a react wrapper package with @lit/react is already on my to-do list.

[bendera]

Custom CSS and HTML data are also included with the package. It will also be published as a VSCode extension.

https://github.com/vscode-elements/language-support-extension https://code.visualstudio.com/blogs/2020/02/24/custom-data-format

[veredcon]

Thanks @bendera for your quick reply and examples! we'll take a look into it.

[bendera]

I have done with the React wrapper: https://github.com/vscode-elements/react-elements

You can also find a demo application in the repo.

[veredcon]

Thank you very much @bendera !