https://github.com/kodedninja/bik
Simple functional components for non-choo & choo environments
https://github.com/kodedninja/bik
choo components minimal ui
Last synced: 11 months ago
JSON representation
Simple functional components for non-choo & choo environments
- Host: GitHub
- URL: https://github.com/kodedninja/bik
- Owner: kodedninja
- Created: 2018-04-22T07:11:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-09T21:33:48.000Z (about 7 years ago)
- Last Synced: 2025-07-04T10:07:41.653Z (12 months ago)
- Topics: choo, components, minimal, ui
- Language: JavaScript
- Homepage:
- Size: 75.2 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# bik
Simple functional components for non-choo & [choo](https://github.com/choojs/choo) environments. Provides a state around [morfine](https://github.com/kodedninja/morfine).
## Installation
```
npm i bik
```
## Example
```javascript
var component = require('bik')
var html = require('nanohtml')
var counter = component({ count: 0 }, function (ctx, amount) {
return html`
Count is ${ctx.count}
`
function click () {
ctx.count += amount
ctx.r()
}
})
// non-choo
document.body.appendChild(counter(2))
// choo
html`${counter(2)}`
```
It also works standalone in the browser by including `build/bik.min.js`. It provides a global `bik` function.
## Why?
To write simple components and be able to use them outside of Choo.
Bik's philosophy:
- Support both choo and non-choo environments
- Direct access to the whole context (state + component)
- No events, only functions
## API
### `render(...props) = bik(initialState, renderer(context, ...props))`
Initialize a new `bik` instance. `initialState` is an `object`. The `renderer` function gets the whole context (state + component) as an argument, followed by the arguments of the `render` call.
### `component.load(el)`
Called when the element was mounted via [`on-load`](https://github.com/shama/on-load).
### `component.unload(el)`
Called when the element was unmounted via [`on-load`](https://github.com/shama/on-load).
### `component.rerender()` or `component.r()`
Rerenders the component.
### `component.beforerender(el)`
Called after the new tree has been generated, but not yet rendered.
### `component.afterrender(el)`
Called after the new tree was rendered.
### `component.el`
The current DOM Node in the document.
## See Also
- [nanocomponent](https://github.com/choojs/nanocomponent)
- [fun-component](https://github.com/tornqvist/fun-component/)
- [microcomponent](https://github.com/yoshuawuyts/microcomponent)