jsx-dom

jsx-dom

Use JSX for creating DOM elements.

Usage

npm install --save jsx-dom

// Using React namespace, works with most transpilers directly
import * as React from 'jsx-dom';
// Or: specify the JSX pragma directly. See below for instructions.
import { createElement } from 'jsx-dom';

document.body.appendChild( <div id="hello" /> );

If you prefer jsx-dom not to occupy the React namespace, you need to provide the module name as pragma with your Babel settings, specifically within your .babelrc:

{
	"plugins": [
		[ "transform-react-jsx", { "pragma": "createElement" } ]
	]
}

Or if you prefer to work with TypeScript:

import { createElement } from 'jsx-dom';

// In tsconfig.json:
{
	"jsx": "react",
	"jsxFactory": "createElement",
}

Syntax

jsx-dom is based on the React JSX syntax with a few additions:

• class is supported as an attribute as well as className
• class can take an array of strings (and booleans, but they will be filtered out automatically) or an object with the format { [key: string]: boolean }.
• style accepts both strings and objects.
• 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.

Goodies

Two extra functions are provided by this package:

• preventDefault(event: Event): Event
• stopPropagation(event: Event): Event

Browser Support

jsx-dom requires Object.keys.