2.0.4 • Published 5 years ago
kelbas v2.0.4
Kelbas
Write JSX like code with ES6 template-strings.
Support matrix: 61+ | 60+ | 16+
Features
- Small, less than 1KB minified.
- Includes multiple render possibilites. (as SVG, Fragment, regular Dom).
- Fast
- Use JSX like syntax without bundling
How to use
- Add script tagg to your JS file with modules enabled.
import {HTML} from "https://unpkg.com/kelbas"
// Or
npm i -D kelbas
After installtion is complete you can import functions from the library.
import {HTML, SVG, FRAGMENT} from "kelbas"
Examples
Create a document fragment with list of elements
const click_event = () => {
window.alert("Click event works!");
}
const list = FRAGMENT`<span onclick=${click_event}><strong>Click me!</strong></span>
<span>Element2</span>
<span>Element3</span>
<span>Element4</span>
<span>Element5</span>
<span>Element6</span>`
document.body.appendChild(list);
Creating an Array of posts with click events
const open_post = () => {
window.alert("Open!");
}
const array = HTML`<div id="container">
${["post1", "post2", "post3"].map(item => HTML`<span onclick=${open_post}>${item}</span>`)}
</div>`
document.body.appendChild(array);
Creating SVG-s also possible
const circle = SVG`<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;
document.body.appendChild(circle);
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.13
6 years ago
1.1.12
6 years ago
1.1.11
6 years ago
1.1.10
6 years ago
1.1.9
6 years ago
1.1.8
6 years ago
1.1.7
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago