tsx-hooks v0.2.1

tsx-hooks

Simple, Efficient Typescript UI Library

I wanted a minimal jsx compatible library that just implemented the React Hooks API. This is that.

React Hooks without the bloat.

People who have an affinity for the following things will enjoy this library:

This library is in development and currently beta status. Probably safe for hobby projects but not recommended for production quite yet.

Installation

NPM / Yarn

npm i tsx-hooks --save

Browser

Drop the following script in your head:

<script src="https://cdn.jsdelivr.net/npm/tsx-hooks@0.2.1/lib/tsx-hooks.min.js" integrity="sha256-CQt95Vx87jOyOdw351v7PynGqMwf29y1vDDpqSlLO38=" crossorigin="anonymous"></script>

Typescript

For JSX/TSX support adjust your tsconfig.json file with the following:

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

Babel

Adjust your .babelrc or webpack config to include this block:

{
  "plugins": [[
        "transform-react-jsx", {
            "pragma": "element"
        }
    ]
  ]
}

Usage

import { element, useState, useEffect, TSXApp, TSX } from "tsx-hooks/lib/core";
import { HTML } from "tsx-hooks/lib/dom";
// <script> usage:
// const { element, useState, useEffect, TSXApp, HTML } = window["tsx-hooks"].default;

const Timer: TSX.Component<{count: number}> = (props, ...children) => {
    return <div>{props.count}</div>;
}

const App: TSX.Component<any> = (props, ...children) => {

    const [timer, setTimer] = useState(0);

    useEffect(() => {
        let ct = 0;
        const interval = setInterval(() => {
            setTimer(ct);
            ct++;
        }, 1000);
        return () => {
            clearInterval(interval);
        }
    }, []);

    return <div><Timer count={timer} /></div>;
};

const myApp = new TSXApp(HTML);
myApp.mount(document.body, <App />);

// clear the app from the dom and js
myApp.remove();

Hooks Support

This library supports useState, useMemo, useRef, useCallback, useEffect, useReducer and useContext. API is identical to React which is documented here.

Additionally React.memo is implemented, exported as simply memo.

I'm not a fan of the way React works with contexts so there's an addition to the context api: .update(). This removes the need for the <Context.Provider> component entirely, although it's still supported if you prefer it.

A quick example of how to use the tweaked context API:

const myContext = createContext({foo: "bar"});

const App = (props, ...children) => {
    const ctxValue = useContext(myContext);
    return <div>{ctxValue.foo}</div>;
}

const myApp = new TSXApp(HTML);
myApp.mount(document.body, element(App, null));

// update context
setTimeout(() => {
    // this will propagate the change to all components using the context.
    myContext.update({foo: "bar2"});
}, 1000);

SVG Support

SVGs are a unique case, to render to SVG prepend the svg element names with svg..

const SVGApp = (props, children) => {

    return <svg.svg>
        <svg.a />
    </svg.svg>
};

Fragments

Fragments (<>...</> elements) are supported and can be used like this:

import { element, Frag } from "tsx-hooks/lib/core";

const App = (props, children) => {
    return <Frag>
        <div>This div is inside a fragment!</div>
    </Frag>
};

Without JSX/TSX

It's of course possible to use the library without compiling or JSX support.

Using the script tag above the code in the example below will work.

const { element, useState, useEffect, TSXApp, HTML } = window["tsx-hooks"].default;

const App = (props, ...children) => {
    return element("div", {style: {color: "blue"}}, "App!");
};

const myApp = new TSXApp(HTML);
myApp.mount(document.body, element(App, null));