tsx-create-element

Use TypeScript TSX without React

Love the efficiency of TypeScript TSX syntax, but you have a small project that doesn't use React? This library may help.

Usage

createElement

First, set your tsconfig.json file with these settings:

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "createElement"
    }
}

Then create a file with the .tsx extension:

//yourcomponent.tsx
import { createElement, StatelessProps } from 'tsx-create-element';

interface YourProps {
    yourText: string;
}

export const YourComponent = (props: StatelessProps) =&gt; {
    return <div>{props.yourText}</div>;
}

mount ( jsxElement: JSX.Element, container: HTMLElement )

This is analogous to ReactDOM.render. Typically your app will only mount one component which contains your entire tree. You will need to call mount anytime your props change. No React = no virtual DOM.

import { createElement, mount } from 'tsx-create-element';
import { YourComponent } from './yourcomponent';
mount(YourComponent({yourText:"hello world"}), document.getElementById('your-div-ID'));

Example code

See the test folder for an example of component composition.

Caveats

This will only render stateless components. No React = no React lifecycle.
Everytime mount is called, the DOM subtree is obliterated. You may lose state in stateful elements such as textboxes. You will need to manage this yourself, prior to calling mount.
You may also lose focus when mount is called. There is a simplistic heuristic which tries to map the position of the activeElement.
A technique for maintaining stateful textboxes is found in test/index.tsx.

Test

To see the test page, run:

npm start

Similar work

https://yetawf.com/BlogEntry/Title/TypeScript and JSX without React/?BlogEntry=1034
https://holtwick.de/blog/jsx-without-react
https://www.meziantou.net/2018/05/28/write-your-own-dom-element-factory-for-typescript
https://github.com/dtkerr/jsx-no-react

Most popular functions for tsx-create-element

To help you get started, we’ve selected a few tsx-create-element examples, based on popular ways it is used in public projects.

tsx-create-element.mount