Mini JSX

Create DOM elements using JSX

Table of Contents

• Installation
• Usage
  • Attributes
  • Ref
  • Children
• Configuration
  • TypeScript Configuration
  • Babel Configuration
  • Using JSX Comments
• License

Installation

npm install mini-jsx

Usage

mini-jsx can be used to create native DOM nodes using JSX.

const button = (
  <button
    className="is-primary"
    onclick={() => {
      console.log('Click!')
    }}
    ref={(node) => {
      // Logs the button
      console.log(node)
    }}
    type="button"
  >
    <i className="button" />
    <span>Button text</span>
  </button>
)

Attributes

All properties are assigned to the element as-is if the attribute exists on the element type. Otherwise it is assigned as an attribute. This way attributes such as role and attributes are supported, but also unknown attributes, such as ng-app. This also means for example onclick should be used, not click or onClick.

Ref

Also a ref prop can be defined as a function. This will be called with the created component after its props and children have been set.

Children

Children of type null, undefined, or boolean will be ignored. Arrays will be handled recursively. Other elements will be appended to the DOM node as-is. This means HTML element children will be rendered as expected, but other values will be converted to strings.

Configuration

TypeScript Configuration

This library is fully typed. In fact, it is written in TypeScript.

Add the following properties to compilerOptions in tsconfig.json.

{
  "compilerOptions": {
    // This should always be "react-jsx".
    "jsx": "react-jsx",
    "jsxImportSource": "mini-jsx",

    "lib": [
      "dom",
      // es2017 or higher is required
      "esnext"
    ]

    // More compiler options…
  }
}

Babel Configuration

Add the following to your babel config.

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic", "importSource": "mini-jsx" }]

    // More plugins…
  ]
}

Using JSX Comments

If you don’t want to configure Babel or TypeScript using the above methods project wide, a JSX pragma can be used to transform a single file using mini-jsx. This way it can be combined with for example React in the same project.

/** @jsxRuntime automatic */
/** @jsxImportSource mini-jsx */

License

MIT © Remco Haszing