TinyJSX

TinyJSX is a lightweight UI JavaScript library for developing user interfaces using functional components.

GZip packages sizes

Brotli packages sizes

Usage

TinyJSX exposes an API which mimics the recent React Hooks implementation but is really small.

TinyJSX supports only functional components.

import TinyJSX from 'tiny-jsx';
import { render } from 'tiny-jsx/dom';
import useEffect from 'tiny-jsx/hooks/useEffect';
import useState from 'tiny-jsx/hooks/useState';

function Clock () {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setTick(tick + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [tick]);

  return (
    <div>Seconds: {tick}</div>
  );
}

render(<Clock />, document.body);

For smaller bundle sizes all hooks are exported on their own. You can still import the hooks from the above example like this:

import { useState, useEffect } from 'tiny-jsx/hooks';

Examples

Some simple examples can be found in the examples directory. You can also see the library in action using the UMD builds here:

• Clock
• ToDos
• Router

Getting Started

Install

When using NodeJS with yarn or npm

$ yarn add tiny-jsx
or
$ npm install --save tiny-jsx

or in the browser

<script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js"></script>
<script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js"></script>
<script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js"></script>
<script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js"></script>

Import

The tiny-jsx library allows for using named and default exports.

Named Imports:

import { createElement } from 'tiny-jsx';

// Tell Babel to transform JSX into createElement() calls:
/** @jsx createElement */

Default Imports:

import TinyJSX from 'tiny-jsx';

// Tell Babel to transform JSX into TinyJSX.createElement() calls:
/** @jsx TinyJSX.createElement */

Instead of declaring the @jsx pragma you can use it globally by adding it to your Babel config file

For Babel 5 and prior:

{ "jsxPragma": "TinyJSX.createElement" }

For Babel 6: Install the transform-react-jsx plugin and add it to the configuration file:

{
  "plugins": [
     ["transform-react-jsx", { "pragma": "TinyJSX.createElement" }]
  ]
}

For Babel 7: Install the @babel/plugin-transform-react-jsx plugin and add it to the configuration file:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "TinyJSX.createElement", "pragmaFrag": "TinyJSX.Fragment" }]
  ]
}

For TypeScript add to tsconfig.json:

{
  "jsx": "react",
  "jsxFactory": "TinyJSX.createElement"
}

Rendering

The TinyJSX transpile function converts JSX components into Virtual DOM elements (as describe here). In order to render the Virtual DOM elements in a browser, TinyJSX provides a render() function that creates the corresponding DOM tree and renders it into an element from the existing DOM tree.

import TinyJSX from 'tiny-jsx';
import { render } from 'tiny-jsx/dom'; 

render(<div>Hello World!</div>, document.body);