Create html elements from tsx syntax usingdocument.createElement.
- Support for class elements like in React but without lifecycles or rerender
- Support for function elements
- Support for fragments
$ npm install tsx-create-html-element
Update your tsconfig.json:
// tsconfig.json{"compilerOptions": {"jsx":"react","jsxFactory":"createElement" }}Jsx code:
import{createElement}from"tsx-create-html-element";consttitle="Hello World";functionsayHi(){alert(title);document.getElementById("greet").innerText=title;}document.getElementById("app").appendChild(<div><divid="greet"/><buttononclick={sayHi}>Say Hi</button></div>);Equivalent:
consttitle="Hello World";functionsayHi(){alert(title);document.getElementById("greet").innerText=title;}constdivGreetElement=document.createElement("div");divGreetElement.id="greet";constbuttonElement=document.createElement("button");buttonElement.append("SayHi");constdivElement=document.createElement("div");divElement.append(divGreetElement,buttonElement);document.getElementById("app").appendChild(divElement);
