tiny-jsx v1.1.10
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:
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);
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago