https://github.com/pb2204/html2react

A simple Visual Studio Code plugin that converts html text to React JSX.
https://github.com/pb2204/html2react

collaborate communityexchange ghdesktop github github-campus-experts github-codespaces github-pages gitkraken gitlens hacktoberfest hacktoberfest-accepted html2react jetbrains microsoft microsoftvisualstudio pabitra-banerjee student-vscode

Last synced: 18 days ago
JSON representation

A simple Visual Studio Code plugin that converts html text to React JSX.

• Host: GitHub
• URL: https://github.com/pb2204/html2react
• Owner: PB2204
• License: mit
• Created: 2023-10-18T19:02:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-26T06:16:34.000Z (over 1 year ago)
• Last Synced: 2025-04-15T18:18:01.565Z (3 months ago)
• Topics: collaborate, communityexchange, ghdesktop, github, github-campus-experts, github-codespaces, github-pages, gitkraken, gitlens, hacktoberfest, hacktoberfest-accepted, html2react, jetbrains, microsoft, microsoftvisualstudio, pabitra-banerjee, student-vscode
• Language: JavaScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=PabitraBanerjee.html2react
• Size: 11 MB
• Stars: 12
• Watchers: 1
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Convert HTML to React JSX

A simple Visual Studio Code plugin that converts html text to React JSX.

Just `ctrl + shift + P` -> `Convert HTML to React JSX` in the document you want to edit and run it.

![Html2React](https://github.com/PB2204/Html2React/assets/120979437/7a5162cc-a1c2-4b83-b6d1-ab6fedb69dd9)

## How does it work

It simply replaces html tags with React ones.

Here's the current list:

```js

var mapObj = {

  "class=": "className=",

  "for=": "htmlFor=",

  "-rule": "Rule",

  "stroke-l": "strokeL",

  "stroke-w": "strokeW",

  "": "*/}",

  tabindex: "tabIndex",

};

```

[Open a pull request](https://github.com/PB2204/Html2React/compare) to add missing rules.