Aims to be a lightweight and straightforward reactive front-end library.
Always basic and easy to read.
npm i kuva
Your script
import Kuva from 'kuva'; const app = Kuva({ name: 'John', canShowLastName: false })
Your HTML
<label for="name-input">What is your name?</label> <input k-bind="name" name="name-input"/> <div>your name is: <b k-text="name"></b> </div> <p k-if="canShowLastName">This node doesn't exists until the clause is true</p> <p k-not="canShowLastName">This node doesn't exists while the clause is false</p> <p k-hide="canShowLastName">This node is hidden</p>
Every Kuva directive, starts with a k- prefix.
The available ones are:
- k-text:
Shows the value of the received reference in the element's text. - k-if:
Removes the element if received reference is falsy. Add if truthy. - k-not:
Oposite ofk-if. Removes when truthy. Add when falsy. - k-hide:
Hides the element if received reference is falsy. Shows if truthy. - k-bind:
Adds two way data binding to an input with the received reference.
Soon
0.0.3, not stable nor production ready, use with caution