Ultralight web UI library for building static components with JSX support
MIT License
Ultralight web UI library for building static components with JSX support.
$ npm install kantrux
<script src="https://unpkg.com/kantrux/dist/kantrux.js"></script>
/** @jsx createNode */
import { createNode, render, Component } from 'kantrux';
const Title = ({ className, children }) => (
<h1 className={className}>{children}</h1>
);
class Content extends Component {
render () {
const { className, children } = this.props;
return <p className={className}>{children}</p>;
}
}
const node = (
<div className='app'>
<Title className='title'>Kantrux</Title>
<Content className='content'>Simple web UI library in JSX!</Content>
</div>
);
const root = document.querySelector('#root');
render(node, root);
// #root element HTML:
// <div class="app">
// <h1 class="title">Kantrux</h1>
// <p class="content">Simple web UI library in JSX!</p>
// </div>
import { createNode, render, Component } from 'kantrux';
const Title = ({ className, children }) => (
createNode('h1', { className }, children)
);
class Content extends Component {
render () {
const { className, children } = this.props;
return createNode('p', { className }, children);
}
}
const node = createNode(
'div',
{ classname: 'app' },
createNode(Title, { className: 'title' }, 'Kantrux'),
createNode(Content, { className: 'content' }, 'Simple web UI library in JSX!')
);
const root = document.querySelector('#root');
render(node, root);
// #root element HTML:
// <div class="app">
// <h1 class="title">Kantrux</h1>
// <p class="content">Simple web UI library in JSX!</p>
// </div>
If you don't need to worry about reactivity, stateful or contextful components, lifecycle hooks, or asynchronous patterns, you can use this library to build lightweight and simple components.
This is like Preact but with simple support for components.
HTMLElement
components as string nodesconstructor
for component setuprender
to define componentcreateNode
as pragma:
["transform-react-jsx", { "pragma":"createNode" }]
["@babel/plugin-transform-react-jsx", { "pragma":"createNode" }]
/** @jsx createNode */
using Babel (either 6 or 7)class
as className
for
as htmlFor
ref
prop function supportstyle
prop as object supportdangerouslySetInnerHTML: { __html }
supportpropTypes
nor defaultProps
state
supportcontext
supportkey
supportThis project follows the all-contributors specification.
Kantrux's logo is a photo of a bird named Barranquero endemic from Colombia.
A colorful large bird that has a heavy bill and long tails with a distinctive racquet-like tip and known to nest in tunnels in river ban. Solitary or in pairs. Feed on fruit and insects on ground.
Source: birdsofcolombia.com.