elements icon indicating copy to clipboard operation
elements copied to clipboard

React implementation

Open jonit-dev opened this issue 1 year ago • 5 comments

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

image

jonit-dev avatar Nov 14 '24 03:11 jonit-dev

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.

bendera avatar Nov 15 '24 16:11 bendera

@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?

nimo23 avatar Dec 20 '24 12:12 nimo23

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.

bendera avatar Dec 20 '24 14:12 bendera

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?

nimo23 avatar Dec 20 '24 23:12 nimo23

@nimo23 See https://github.com/vscode-elements/react-elements/issues/6#issuecomment-2558139040

bendera avatar Dec 21 '24 14:12 bendera