jsx-dom

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:

// In tsconfig.json:
"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 Namespacing

If you need to specify a namespace for your DOM element, pass a string attribute namespaceURI, except the following SVG elements which are supported out of the box:

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

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.