Skip to content
This repository has been archived by the owner on Apr 19, 2021. It is now read-only.

LeDDGroup/tsx-create-html-element

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tsx-create-html-element

npm version

Conventional Commits code style: prettier Built with Spacemacs

Create html elements from tsx syntax using document.createElement.

  • Support for class elements like in React but without lifecycles or rerender
  • Support for function elements
  • Support for fragments

Install

$ npm install tsx-create-html-element

Update your tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createElement"
  }
}

Usage

Jsx code:

import { createElement } from "tsx-create-html-element";

const title = "Hello World";

function sayHi() {
  alert(title);
  document.getElementById("greet").innerText = title;
}

document.getElementById("app").appendChild(
  <div>
    <div id="greet" />
    <button onclick={sayHi}>Say Hi</button>
  </div>
);

Equivalent:

const title = "Hello World";

function sayHi() {
  alert(title);
  document.getElementById("greet").innerText = title;
}

const divGreetElement = document.createElement("div");
divGreetElement.id = "greet";
const buttonElement = document.createElement("button");
buttonElement.append("SayHi");
const divElement = document.createElement("div");
divElement.append(divGreetElement, buttonElement);
document.getElementById("app").appendChild(divElement);