kaiku
v1.25.1
Published
Lightweight UI framework
Downloads
343
Readme
From Finnish kaiku /ˈkɑi̯ku/, meaning echo.
A lightweight JSX-based UI framework with a freely mutable, boilerplate-free global state management.
Getting started
Kaiku is packaged to be easily used in both browser and as a module, no build tools required:
<script type="module">
import { h, render, createState } from 'https://unpkg.com/kaiku'
const state = createState({ greeting: 'Hello world' })
const App = () => h('span', null, state.greeting)
render(h(App), document.body)
</script>
Or, just install the package using your favorite package manager:
# With NPM
npm i -s kaiku
# With yarn
yarn add kaiku
Example
A simple ticker component with global state management.
import { render, createState } from 'kaiku'
const state = createState({ ticks: 0 })
const Ticker = () => (
<div>
<div>
There have been <b>{state.ticks} ticks</b> since last update.
</div>
<button onClick={() => { state.ticks = 0 }}>Reset</button>
</div>
)
setInterval(() => state.ticks++, 1000)
render(<Ticker />, document.body)
Documentation
See the official website.
License
Copyright (c) 2021 Teemu Pääkkönen
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.