Ultralight web UI library for building static components with JSX support
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.prettierignore
.prettierrc
.travis.yml
LICENSE
README.md
jest.config.js
kantrux.png
package.json

README.md

Kantrux's logo

Kantrux

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

version travis license code style: prettier downloads github stars

Install

$ npm install kantrux

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.

  • 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
  • To render HTML string children, use html prop
  • Synchronous rendering
  • No state support
  • No context support
  • No hooks
  • No support for SVG