React implementation

[jonit-dev]

I created a React implementation of this lib (still WIP)

https://github.com/jonit-dev/vscode-extension-react-webview-boilerplate

Together with a boilerplate + hot reload

enjoy

[bendera]

Hi,

Thank you for showing interest in the project. Well... a side project already exists for this purpose: https://github.com/vscode-elements/react-elements I've just noticed that this fact is missing from the documentation. My bad, sorry.

[nimo23]

@bendera I want to use this library as a typical component framework (e.g. like MUI-React). Is this possible? According to the web component version documentation (https://vscode-elements.github.io/getting-started/#installation):

The appearance of components provided by VSCode Elements depends on the presence of hundreds of CSS variables and default styles supplied by the VSCode Webview. The Webview Playground was created to emulate this environment.

It sounds like these vscode-elements is not a typical component library, but need to be run inside a vscode host (as an extension). Would it be possible to rebuild this library (React library) to use it as a standalone component library? @jonit-dev Is this already possible with your react implementation?

[bendera]

It's not a typical component library in terms of styling. It works without the vscode host, but will be ugly. You can go to the documentation page, copy the CSS variables from the HTML element, and paste into your code. But you don't need any additional javascript setup.

[nimo23]

You can go to the documentation page, copy the CSS variables from the HTML element, and paste into your code.

@bendera It would be great to be able to use it as a typical component library (especially for React) out of the box (without a vs code host) where the CSS styles (as themes) are already included. Don't you think? I think the use cases would be much larger than if this lib was limited to vs code extensions. What do you think of the idea?

[bendera]

@nimo23 See vscode-elements/react-elements#6 (comment)