@suchipi/jsxdom
JSX factory that creates HTML elements directly
Use JSX as syntax sugar for document.createElement
, Object.assign(element.style, {/* ... */})
, etc.
Installation
npm install --save @suchipi/jsxdom
Usage
If using TypeScript, put these in your tsconfig.json's compilerOptions
:
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "DocumentFragment",
Or, if using Babel, provide these options to @babel/plugin-transform-react-jsx
:
"pragma": "jsx",
"pragmaFrag": "DocumentFragment",
Then, use the library in your code like so:
import { jsx, ref } from "@suchipi/jsxdom";
const upButton = ref();
const myDiv = (
<div>
<button ref={upButton} onclick={() => console.log("up!")}>
Up
</button>
<button
onclick={() => console.log("down!")}
style={{ backgroundColor: "red" }}
>
Down
</button>
</div>
);
console.log(myDiv); // HTMLDivElement
console.log(upButton); // { current: HTMLButtonElement }
It also supports user components:
function MyComponent(props) {
return <div {...props} />;
}
const myDiv = <MyComponent id="hi" />;
console.log(myDiv); // HTMLDivElement
Notes:
-
jsx
must be in-scope to use JSX. -
ref
creates React-style ref objects, shaped like{ current: any }
. - There's no re-rendering logic here. You can use this to get an initial element tree, but modifying it after that point is up to you.
- Use eg
onclick
instead ofonClick
,className
instead ofclass
.- Because it's using the HTMLElement property names.
- The result of every JSX expression is an HTMLElement (or DocumentFragment if you use JSX fragment syntax).
- To attach the resulting HTMLElement(s) to the DOM, use
document.body.appendChild
or etc. - Every prop passed to a JSX element will be assigned to the HTMLElement directly, except for
ref
,style
, andnamespaceURI
:- When a
ref
prop is present, the HTMLElement will be written to the ref'scurrent
property (or, if the ref is a function, it will be called with the HTMLElement). - When a
style
prop is present, its properties will be assigned onto the HTMLElement'sstyle
property. - When a
namespaceURI
prop is present, it will be passed intodocument.createElementNS
. This can be used to create eg. svg elements.
- When a