This plugin helps in automatically providing a webview playground of your React Component.
Enter ctrl+shift+p and then type React Playground
Appreciate any bug/feture reports via Github
- Support loading of jsx extension
- Enabling css loader to fix css loading issues
- Closing and re-opening the extension should now work
- Live Edit a component
- Set various props
- Automatically create test snapshots ( TODO )
- Closing the Playground windowd does not seem to reopen it again.
- Do I need to setup webpack/babel on my workspace to have it working?
No. You can have an empty dir. Create your react component and use ctrl+shift+p to open the live preview.
- I need to inspect the dom. How can I do that?
You open the webview inspector. Open Keyboard Shortcuts and edit keybindings.json. Add the following:
{ "key": "ctrl+shift+alt+b", "command": "_webview.openDevTools"} Change the key as required. This should enable you to inspect the html.
- I want to have Live Playground launch a non react component. How can I do that?
React Playground will inspect any React Element but it will also evaluate an export that starts with __Playground. So you can have the following be automatically evaluated in React Playground
export const __PlaygroundTestWithSomeStuff = () => {
return (
<SomeComponent attribute='someattr'>
<AnotherComponent />
</SomeComponent>
);
}You should be able to see this within the playground.