1.3.0 • Published 5 years ago

tsx-create-html-element v1.3.0

Weekly downloads
10
License
ISC
Repository
github
Last release
5 years ago

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);
1.3.0

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago