Use JSX for creating DOM elements.
npm install --save jsx-dom
Note: If you previously use h
as pragma, there is nothing you need to change.
import * as React from 'jsx-dom';
document.body.appendChild(
<div id="greeting" class="alert">Hello World</div>
);
jsx-dom
is based on the React JSX syntax with a few additions:
-
class
is supported as an attribute as well asclassName
. -
class
can take:- a string
- an object with the format
{ [key: string]: boolean }
. Keys with a truthy value will be added to the classList - an array of values where falsy values (see below) are filtered out
- an array of any combination of the above
Note that false
, true
, null
, undefined
will be ignored per React documentations, and everything else will be used. For example,
<div class="greeting" />
<div class={[ condition && "class" ]} />
<div class={{ hidden: isHidden, 'has-item': this.array.length > 0 }} />
<div class={[ classArray1, classArray2, ['nested'] ]} />
style
accepts both strings and objects.
<div style="background: transparent;" />
<div style={{ background: 'transparent', fontFamily: 'serif' }} />
dataset
accepts an object, where keys with anull
orundefined
value will be ignored.
<div dataset={{ user: "guest", isLoggedIn: false }} />
- Attributes starts with
on
and has a function value will be treated as an event listener and attached to the node withaddEventListener
.
<div onClick={ e => e.preventDefault() } />
-
innerHTML
,innerText
andtextContent
are accepted. -
ref
accepts either 1) a callback(node: Element) => void
that allows access to the node after being created, or 2) a React styleref
object. This is useful when you have a nested node tree and need to access a node inside without creating an intermediary variable.
// Callback
<input ref={ node => $(node).typehead({ hint: true }) } />
// React.createRef
import * as React from 'jsx-dom';
const textbox = React.createRef();
render(
<div>
<label>Username:</label>
<input ref={ textbox } />
</div>
);
window.onerror = () => {
textbox.current.focus();
};
A custom build with a list of commonly used SVG tags is included.
// Use 'jsx-dom/svg';
import * as React from 'jsx-dom/svg';
// Or if you prefer Common JS
const React = 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 * as React from 'jsx-dom';
<a namespaceURI={ React.SVGNamespace }>I am an SVG element!</a>
Two extra functions and one constant are provided by this package:
preventDefault(event: Event): Event
stopPropagation(event: Event): Event
SVGNamespace
is thenamespaceURI
string for SVG Elements.
jsx-dom
requires Object.keys
and Object.create
support. This means IE9 or later.
<div />
, and other tags, are inferred as a general JSX.Element
in TypeScript instead of
HTMLDivElement
(or the equivalents). This is a known bug and its fix depends on TypeScript#21699.