createElement-style JSX factory that creates HTML elements directly
npm install @suchipi/jsxdom@suchipi/jsxdom> JSX factory that creates HTML elements directly
Use JSX as syntax sugar for document.createElement, Object.assign(element.style, {/ ... /}), etc.
``sh`
npm install --save @suchipi/jsxdom
If using TypeScript, put these in your tsconfig.json's compilerOptions:
`json`
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "DocumentFragment",
Or, if using Babel, provide these options to @babel/plugin-transform-react-jsx:
`json`
"pragma": "jsx",
"pragmaFrag": "DocumentFragment",
Then, use the library in your code like so:
`tsx
import { jsx, ref } from "@suchipi/jsxdom";
const upButton = ref();
const myDiv = (
console.log(myDiv); // HTMLDivElement
console.log(upButton); // { current: HTMLButtonElement }
`
It also supports user components:
`tsx
function MyComponent(props) {
return ;
}
const myDiv =
console.log(myDiv); // HTMLDivElement
`
Notes:
- jsx must be in-scope to use JSX.ref
- creates React-style ref objects, shaped like { current: any }.onclick
- 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 instead of onClick, className instead of class.document.body.appendChild
- 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 or etc.ref
- Every prop passed to a JSX element will be assigned to the HTMLElement directly, except for , style, and namespaceURI:ref
- When a prop is present, the HTMLElement will be written to the ref's current property (or, if the ref is a function, it will be called with the HTMLElement).style
- When a prop is present, its properties will be assigned onto the HTMLElement's style property.namespaceURI
- When a prop is present, it will be passed into document.createElementNS`. This can be used to create eg. svg elements.