Pradeep-selva / react-gui

A simple, blazingly fast way to create React Components using a GUI

Home Page:https://marketplace.visualstudio.com/items?itemName=pradeepselva.react-gui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

icon

React GUI

A blazingly fast way to bootstrap react components

Create your react components quickly & easily with a straightforward GUI


Demo

demo

Installation

Download the extension by -

  1. Searching for React GUI by pradeepselva on your vscode extensions.
  2. Visit the extension's home page at https://marketplace.visualstudio.com/items?itemName=pradeepselva.react-gui and download it.

Usage

  1. Component creation -

    Open the component creation form from sidebar and fill it up as shown in the above demo. Click create and get started with producing logic for your component, without worrying about boilerplate. visit this link if the demo doesn't load.

  2. Definition file initialization -

    • Highlight a list of props that you want to create a definition file (.d.ts) from.
    • Press ctrl+shift+p and search Initialize Definition File.
    • Press the React GUI: Initialize Definition File option.

    eg: You may highlight the props from lists like the following. The highlighted text in the following cases must be label, placeholder, value.

    1. const {label, placeholder, value} = this.props;
    2. const InputField = ({label, placeholder, value}) =>

Built Using

  • Typescript
  • Svelte
  • HTML/CSS
  • Yo

Steps to run locally

  • Clone the repo using git clone https://github.com/Pradeep-selva/react-gui.
  • install dependencies using yarn or npm install.
  • Run yarn watch in your root directory.
  • In your root directory press f5 and select npm compile.

License

MIT © Pradeep-selva

About

A simple, blazingly fast way to create React Components using a GUI

https://marketplace.visualstudio.com/items?itemName=pradeepselva.react-gui

License:MIT License


Languages

Language:TypeScript 55.1%Language:Svelte 27.8%Language:JavaScript 8.6%Language:CSS 8.4%