@formio/jsx

A JSX template engine for Form.io templates that renders JSX to HTML strings.

Installation

npm install @formio/jsx

or

yarn add @formio/jsx

Usage

Basic Setup

Configure your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment"
  }
}

Simple Example

import jsx, { Fragment } from '@formio/jsx';

const html = (
  <div class="container">
    <h1>Hello, World!</h1>
    <p>Welcome to @formio/jsx</p>
  </div>
);

console.log(html);
// Output: <div class="container"><h1>Hello, World!</h1><p>Welcome to @formio/jsx</p></div>

Using Fragments

const items = (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </>
);

Style Objects

const styledDiv = <div style={{ backgroundColor: 'blue', fontSize: '16px' }}>Styled content</div>;
// Output: <div style="background-color:blue;font-size:16px">Styled content</div>

Boolean Attributes

const input = <input type="checkbox" checked disabled={false} />;
// Output: <input type="checkbox" checked />

Using with Modern JSX Transform

If you're using the modern JSX transform (React 17+), configure your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@formio/jsx"
  }
}

Then you don't need to import jsx in every file:

// No import needed!
const element = <div>Hello</div>;

API

jsx(tag, properties, ...children)

Main function that converts JSX elements to HTML strings.

• tag: HTML tag name or null for fragments
• properties: Object containing element attributes and properties
• children: Child elements or content

Fragment

Component for grouping multiple elements without a wrapper.

Limitations

• Event handlers (onClick, onChange, etc.) are not supported as they cannot be serialized to HTML strings

Credits

Adapted from texsaur by Connor James Low.

License

MIT