jsx-dom-render

Render JSX to DOM Tree.

Why jsx-dom-render

Sometimes you may need to create some DOM objects, but writing a lot of document.createElement() is unmaintainable.

How it Works

jsx-dom-render is a simple lib which pretend to be React.createElement, it creates DOM objects instead of React Elements. (check the source code)

How to use

import React from 'jsx-dom-render';

const h1Content = 'world';
const list = ['Zhao', 'Qian', 'Sun', 'Li'];
let btn;
document.body.appendChild(
  <div class="cls1 cls2" data-foo="foo" style={{ color: 'red' }}>
    <h1 title="hello world">hello {h1Content}</h1>
    <div>{'<h4>JSX Prevents Injection Attacks</h4>'}</div>
    <div dangerouslySetInnerHTML="<h4>but you can use dangerouslySetInnerHTML</h4>" />
    <div
      dangerouslySetInnerHTML={() => '<h4>inner HTML from function</h4>'}
    />
    <hr />
    <ol>
      {list.map(function(item, idx) {
        return <li data-index={idx}>{item}</li>;
      })}
    </ol>
    <hr />
    <button
      ref={(_: HTMLElement): void => void (btn = _)}
      onClick={(e: Event): void => void alert('from tsx')}
    />
  </div>
);
btn.textContent = 'Click me';

It also support Typescript(check the demo).

NOTE

Instead of className and onClick (etc.), jsx-dom-render use class to create class attribute and onclick (etc.) to bind event listeners, property names are insensitive, both onclick and onClick are valid.

Also, since there is no Virtual DOM and Reconciliation in jsx-dom-render, property key is unnecessary when creating lists.

License