Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romelperez/kantrux
Ultralight web UI library for building static components with JSX support
https://github.com/romelperez/kantrux
jsx library lightweight simple ui
Last synced: 8 days ago
JSON representation
Ultralight web UI library for building static components with JSX support
- Host: GitHub
- URL: https://github.com/romelperez/kantrux
- Owner: romelperez
- License: mit
- Created: 2018-12-14T21:48:43.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-08-31T14:01:33.000Z (2 months ago)
- Last Synced: 2024-10-14T14:54:27.863Z (22 days ago)
- Topics: jsx, library, lightweight, simple, ui
- Language: JavaScript
- Homepage:
- Size: 560 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Kantrux
Ultralight web UI library for building static components with [JSX](https://facebook.github.io/jsx/) support.
[](https://npmjs.org/package/kantrux)
[](https://travis-ci.org/romelperez/kantrux)
[](https://npmjs.org/package/kantrux)
[](https://npmjs.org/package/kantrux)
[](https://github.com/romelperez/kantrux)
[](https://github.com/romelperez/kantrux/blob/main/LICENSE)
[](https://standardjs.com)
## Install
### CommonJS
```bash
$ npm install kantrux
```
### UMD
```html
```
## How to use
### JSX
```js
/** @jsx createNode */
import { createNode, render, Component } from 'kantrux';
const Title = ({ className, children }) => (
{children}
);
class Content extends Component {
render () {
const { className, children } = this.props;
return
{children}
;
}
}
const node = (
Kantrux
Simple web UI library in JSX!
);
const root = document.querySelector('#root');
render(node, root);
// #root element HTML:
//
// Kantrux
// Simple web UI library in JSX!
//
```
### Vanilla
```js
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:
//
// Kantrux
// Simple web UI library in JSX!
//
```
## 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](https://preactjs.com) 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](https://facebook.github.io/jsx/) using `createNode` as pragma:
- Using [Babel 6 plugin](https://babeljs.io/docs/en/6.26.3/babel-plugin-transform-react-jsx) `["transform-react-jsx", { "pragma":"createNode" }]`
- Using [Babel 7 plugin](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx) `["@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
This project follows the [all-contributors](https://github.com/kentcdodds/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](https://birdsofcolombia.com).
