> Build regular DOM elements using JSX

With dom-chef, you can use Babel or TypeScript to transform JSX into plain old DOM elements, without using the unsafe innerHTML or clumsy document.createElement calls.

It supports everything you expect from JSX, including:

• SVG elements
• Event listeners
• Inline CSS
• Nested elements
• Function elements

If something isn't supported (or doesn't work as well as it does in React) please open an issue!

Install

$ npm install dom-chef

Usage

Make sure to use a JSX transpiler (e.g. Babel, TypeScript compiler, esbuild, you only need one of them).

import {h} from 'dom-chef';

const handleClick = e => {
	// <button> was clicked
};

const el = (
	<div>
		</div></button><button>
			Download
		</button>
	
);

document.body.appendChild(el);

Babel

pragma and pragmaFrag must be configured this way. More information on Babel’s documentation.

// babel.config.js
  
const plugins = [
	[
		'@babel/plugin-transform-react-jsx',
		{
			pragma: 'h',
			pragmaFrag: 'DocumentFragment',
		},
	],
];

// ...

TypeScript compiler

jsxFactory and jsxFragmentFactory must be configured this way. More information on TypeScripts’s documentation.

// tsconfig.json

{
	"compilerOptions": {
		"jsxFactory": "h",
		"jsxFragmentFactory": "DocumentFragment"
	}
}

Alternative usage

You can avoid configuring your JSX compiler by just letting it default to React and exporting the React object:

import React from 'dom-chef';

Recipes

Set classes

const el = <span class="a b c">Text</span>;

// or use `className` alias
const el = <span>Text</span>;

Inline styles

const el = <div style="{{padding:">;

Inline event listeners

const handleClick = e => {
	// <span> was clicked
};

const el = <span>Text</span>;

This is equivalent to: span.addEventListener('click', handleClick)

Nested elements

const title = <h1>Hello World</h1>;
const body = <p>Post body</p>;

const post = (
	<div class="post">
		{title}
		{body}
	</div>
);

Set innerHTML

const dangerousHTML = '';

const wannaCry = <div>;

Render SVG

Note: Due to the way dom-chef works, tags <a>, <audio>, <canvas>, `