UN
unlight/h-document-element
Create html elements from jsx (tsx) syntax
h-document-element
Create html elements from jsx/tsx syntax
Usage
// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "createElement"
}
}JSX/TSX code:
import { createElement } from 'h-document-element';
document.body.appendChild(
<div>
<div id="greet" />
<button onClick={() => alert('Hi!')}>Say</button>
</div>
);Equivalent plain JavaScript code
const divGreetElement = document.createElement('div');
divGreetElement.id = 'greet';
const buttonElement = document.createElement('button');
buttonElement.onclick = () => alert('Hi!');
buttonElement.append('Say');
const divElement = document.createElement('div');
divElement.append(divGreetElement, buttonElement);
document.body.appendChild(divElement);Browser Support
Only modern browsers are supported:
- Chrome 69
- Edge 76
- Firefox 62
- Opera 56
- Safari 12
If you need IE, you need polyfill for:
Similar Projects
On this page
Languages
TypeScript65.2%JavaScript33.9%Shell0.8%
MIT License
Created July 9, 2019
Updated February 13, 2020