Kantrux

Ultralight web UI library for building static components with JSX support.

Install

CommonJS

$ npm install kantrux

UMD

<script src="https://unpkg.com/kantrux/dist/kantrux.js"></script>

How to use

JSX

/** @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>

Vanilla

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>

Why?

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.

Features

This is like Preact but with simple support for components.

• Synchronous rendering
• HTMLElement components as string nodes
• Function components
  • Accepts props as argument
  • Returns node
• Class components
  • Use constructor for component setup
  • Use render to define component
• Components definition with JSX using createNode as pragma:
  • Using Babel 6 plugin ["transform-react-jsx", { "pragma":"createNode" }]
  • Using Babel 7 plugin ["@babel/plugin-transform-react-jsx", { "pragma":"createNode" }]
  • File inline /** @jsx createNode */ using Babel (either 6 or 7)
• Custom HTML attributes as props:
  • class as className
  • for as htmlFor
• ref prop function support
• style prop as object support
• dangerouslySetInnerHTML: { __html } support
• No special treatment for forms
• No propTypes nor defaultProps
• No state support
• No context support
• No lists key support
• No hooks
• No support for SVG

Contributors

Romel Pérez 📆 💻 📖 💬

This project follows the all-contributors specification.

About

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.