jsx-dom

Use JSX for creating DOM elements.
Installation
npm install --save jsx-dom
Usage
import { createElement } from 'jsx-dom';
document.body.appendChild(
<div id="greeting" class="alert">Hello World</div>
);
You need to tell your transpiler to use the name createElement
. If you prefer not to, skip to the next section for instructions. For Babel users, specify within your .babelrc
:
"plugins": [
[ "transform-react-jsx", { "pragma": "createElement" } ]
]
Or if you prefer to work with TypeScript:
"jsx": "react",
"jsxFactory": "createElement",
Usage without .babelrc
or tsconfig
options
If you don’t want to configure your transpiler to use jsx-dom
, simply import it using
the React namespace:
import * as React from 'jsx-dom';
Syntax
jsx-dom
is based on the React JSX syntax with a few additions:
Class
class
is supported as an attribute as well as className
class
can take an object with the format { [key: string]: boolean }
. Keys with a truthy value will be added to the classList.
class
can also take an array of values:
Note that false
, true
, null
, undefined
will be ignored per React documentations, and everything else will be used. As an example: <div class={[ condition && "class" ]} />
;
Style
style
accepts both strings and objects.
Other Attributes
dataset
accepts an object.
- Attributes starts with
on
and has a function value will be treated as an event listener and thus attached to the node.
innerHTML
, innerText
and textContent
are accepted.
SVG and Namespaces
A custom build with a list of commonly used SVG tags is included.
import { createElement } from 'jsx-dom/svg';
const { createElement } = require('jsx-dom/svg.cjs');
document.body.appendChild(
<div class="flag" style={{ display: 'flex' }}>
<h1>Flag of Italy</h1>
<svg width="150" height="100" viewBox="0 0 3 2" class="flag italy">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</div>
);
Below is a list of SVG tags included.
svg, animate, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, path, pattern, polygon, polyline, radialGradient, rect, stop, switch, symbol, text, textPath, tspan, use, view
If you need to create an SVG element that is not in the list, or you want to specify a custom namespace, use the attribute namespaceURI
.
import { createElement, SVGNamespace } from 'jsx-dom';
<a namespaceURI={SVGNamespace}>I am an SVG element!</a>
Goodies
Two extra functions and one constant are provided by this package:
preventDefault(event: Event): Event
stopPropagation(event: Event): Event
SVGNamespace
is the namespaceURI
string for SVG Elements.
Browser Support
jsx-dom
requires Object.keys
and Object.create
support. This means IE9 or later.