tsx-create-html-element

Create html elements from tsx syntax

Package no longer maintained.
Last updated 3 years ago by danielpanpm .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tsx-create-html-element 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.3.0                                ...           latest (3 years ago)

7 Versions

  • 1.3.0 [deprecated]           ...           3 years ago
  • 1.2.1 [deprecated]           ...           3 years ago
  • 1.2.0 [deprecated]           ...           3 years ago
  • 1.1.0 [deprecated]           ...           3 years ago
  • 1.0.2 [deprecated]           ...           3 years ago
  • 1.0.1 [deprecated]           ...           3 years ago
  • 1.0.0 [deprecated]           ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2021 © npmmirror.com |