clystian / react-preview-extension

Vscode Extension for React component preview

💻 React Component Preview 💻

VScode extension for React Developers!

This extension enables developers to live preview react components while developing react projects.

You can add custom props from the control panel and preview your updated components

How to start

1. Open Visual Studio Code
2. From your working editor press ctrl + p/⌘ + p to quick start
3. Start editing your react component from the text editor and add props from the control panel
4. When ever you finished editing and wants to check your preview press ctrl + s / ⌘ + s

OR

1. Open Visual Studio Code
2. From your working editor press ctrl + p/⌘ + p to open command Palette and type "React Component Preview: preview start"
3. Start editing your react component from the text editor and add props from the control panel
4. 5. When ever you finished editing and wants to check your preview press ctrl + s / ⌘ + s

Requirements

• previewConfig.json file will be automatically added to your workspace. We strongly recommend you not to modify this file unless it is necessary.

• Current Extension features only supports .js, .jsx files (does not support .tsx at the moment)

• Current Extension only works on Mac OS

• component should be exported with export default <Component>

const Button = () => {
  return (
    <button>
      ClickMe
    </button>
  );
};

// export default
export default Button;

OR

// export default
export default const Button = () => {
  return (
    <button>
      ClickMe
    </button>
  );
};

Future Updates

• .tsx support
• Preview error console

Contributing

Something missing? Found a bug? - Create a pull request or an issue. Github

License

This software is released under MIT License

Enjoy! 😁