https://github.com/LeDDGroup/tsx-create-html-element

Create html elements from tsx syntax
https://github.com/LeDDGroup/tsx-create-html-element

html jsx tsx typescript

Last synced: 10 days ago
JSON representation

Create html elements from tsx syntax

• Host: GitHub
• URL: https://github.com/LeDDGroup/tsx-create-html-element
• Owner: LeDDGroup
• Archived: true
• Created: 2019-01-14T22:04:19.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-13T22:03:04.000Z (almost 5 years ago)
• Last Synced: 2025-03-18T15:27:41.883Z (about 2 months ago)
• Topics: html, jsx, tsx, typescript
• Language: TypeScript
• Homepage:
• Size: 78.1 KB
• Stars: 12
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# tsx-create-html-element

[![npm version](https://img.shields.io/npm/v/tsx-create-html-element.svg)](https://www.npmjs.com/package/tsx-create-html-element)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Built with Spacemacs](https://cdn.rawgit.com/syl20bnr/spacemacs/442d025779da2f62fc86c2082703697714db6514/assets/spacemacs-badge.svg)](http://spacemacs.org)

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

```sh

$ npm install tsx-create-html-element

```

Update your tsconfig.json:

```json

// tsconfig.json

{

  "compilerOptions": {

    "jsx": "react",

    "jsxFactory": "createElement"

  }

}

```

## Usage

Jsx code:

```tsx

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

const title = "Hello World";

function sayHi() {

  alert(title);

  document.getElementById("greet").innerText = title;

}

document.getElementById("app").appendChild(

  


    


    Say Hi

  

);

```


Equivalent:

```ts

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

```