dom-chef
v5.1.1
Published
Build regular DOM elements using JSX
Downloads
3,637
Readme
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:
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 className="header">
<button className="btn-link" onClick={handleClick}>
Download
</button>
</div>
);
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 className="a b c">Text</span>;
Inline styles
const el = <div style={{padding: 10, background: '#000'}} />;
Inline event listeners
const handleClick = e => {
// <span> was clicked
};
const el = <span onClick={handleClick}>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 = '<script>alert();</script>';
const wannaCry = <div dangerouslySetInnerHTML={{__html: dangerousHTML}} />;
Render SVG
Note: Due to the way dom-chef
works, tags <a>
, <audio>
, <canvas>
, <iframe>
, <script>
and <video>
aren't supported inside <svg>
tag.
const el = (
<svg width={400} height={400}>
<text x={100} y={100}>
Wow
</text>
</svg>
);
Use functions
If element names start with an uppercase letter, dom-chef
will consider them as element-returning functions:
function Title() {
const title = document.createElement('h1');
title.classList.add('Heading');
return title;
}
const el = <Title className="red">La Divina Commedia</Title>;
// <h1 class="Heading red">La Divina Commedia</h1>
This makes JSX also a great way to apply multiple attributes and content at once:
const BaseIcon = () => document.querySelector('svg.icon').cloneNode(true);
document.body.append(
<BaseIcon width="16" title="Starry Day" className="margin-0" />
);
To improve compatibility with React components, dom-chef
will pass the function's defaultProps
property to itself (if present). Note that specifying attributes won't override those defaults, but instead set them on the resulting element:
function AlertIcon(props) {
return <svg width={props.size} className={props.className} />
}
AlertIcon.defaultProps = {
className: 'icon icon-alert'
size: 16,
}
const el = <AlertIcon className="margin-0" size={32} />;
// <svg width="16" class="icon icon-alert margin-0" size="32" />
License
MIT © Vadim Demedes