JSX to document.createElement.
npm install @supersede/jsx-domUse JSX for creating DOM elements.
bash
npm install --save jsx-dom
yarn install jsx-dom
`Usage
Note: If you previously use as pragma, there is nothing you need to change.`jsx
import * as React from 'jsx-dom';// DOM Elements.
document.body.appendChild(
Hello World
);// Functional components
//
defaultProps and props.children are supported natively and work as you expected.
function Hello(props) {
return Hello {props.firstName}, {props.lastName}!;
}document.body.appendChild(
);
`Syntax
is based on the React JSX syntax with a few additions:$3
1. class is supported as an attribute as well as className.
2. 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 aboveNote that
false, true, null, undefined will be ignored per React documentations, and everything else will be used. For example,`jsx
0 }} />
`$3
1. accepts both strings and objects.`jsx
`$3
1. accepts an object, where keys with a null or undefined value will be ignored.
`jsx
`2. Attributes starts with
and has a function value will be treated as an event listener and attached to the node with addEventListener.
`jsx
e.preventDefault() } />
`3.
, innerText and textContent are accepted.4.
ref accepts either 1) a callback (node: Element) => void that allows access to the node after being created, or 2) a React style ref object. This is useful when you have a nested node tree and need to access a node inside without creating an intermediary variable.`jsx
// Callback
$(node).typehead({ hint: true }) } />// React.createRef
import * as React from 'jsx-dom';
const textbox = React.createRef();
render(
);window.onerror = () => {
textbox.current.focus();
};
`$3
You can write functional components and receive passed in the same way in React. Unlike
React, props.children is guaranteed to be an array.$3
A custom build with a list of commonly used SVG tags is included.`jsx
// Use 'jsx-dom/svg';
import * as React from 'jsx-dom/svg';document.body.appendChild(
Flag of Italy
);
`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
.`jsx
import * as React from 'jsx-dom';`Goodies
Two extra functions and one constant are provided by this package:1.
2.
3. is the namespaceURI string for SVG Elements.Browser Support
jsx-dom requires Object.keys and Object.create support. This means IE9 or later.Known Issues
, 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.