blocksjs
v1.0.10
Published
Micro react-like, redux-compatible, plain js library for event-driven ui components
Downloads
6
Maintainers
Readme
Micro react-like, redux-compatible, plain JS library for event-driven ui components
Features
- virtual DOM
- react-like
- jsx compatible
- minimal
- standard
- pure ES2015
Installation
$ npm i --save blocksjs
Examples
A simple component
import { $, mount, dom, Component } from 'blocks'
const hello = (name) =>
dom('span', null, `Hello, ${ name }!`)
class Hello extends Component {
render({ name }) {
return hello(name)
}
}
mount(Hello, $('#helloContainer'), { name: 'John Doe' })
A simple component (jsx enabled)
Enable jsx
npm i --save-dev babel-plugin-transform-jsx
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-react-jsx", {
"pragma": "dom"
}]
]
}
import { $, mount, dom, Component } from 'blocks'
class Hello extends Component {
render({ name }) {
return (
<span>
Hello, {name}!
</span>
)
}
}
mount(Hello, $('#helloContainer'), { name: 'John Doe' })
A component with lifecycle callbacks
import { $, mount, dom, Component } from 'blocks'
class Counter extends Component {
increase() {
this.setState({ count: this.state.count + 1 })
}
decrease() {
this.setState({ count: this.state.count - 1 })
}
render({ count }) {
return dom('span', {
class: 'ribbon'
}, [ count ])
}
}
mount(Hello, $('#counterContainer'), { count: 42 })
A slightly complex counter
Check out a live exmaple (hit Run with JS
)
import { dom, Component } from 'blocks'
const ARROW_KEYS = {
UP: 38,
DOWN: 40
}
const button = (label, onClick) =>
dom('button', { onClick }, label)
const counter = (n = 0) =>
dom('div', {
class: 'counter',
style: `
color: ${ n > 0 ? '#3c3' : '#c33' };
background: ${ n > 0 ? '#cfc' : '#fcc' };
`
}, n)
const headsOrTails = () => Math.random() < .5
class CounterApp extends Component {
onMount() {
document.addEventListener('keyup', (e) => {
switch(e.which) {
case ARROW_KEYS.UP:
this.increase()
break
case ARROW_KEYS.DOWN:
this.decrease()
break
}
})
this.state.interval = setInterval(this.tick.bind(this), 1000)
}
onUnmount() {
this.state.interval = clearInterval(this.state.interval)
}
increase() {
this.setState({ count: this.state.count + 1})
}
decrease() {
this.setState({ count: this.state.count - 1})
}
tick() {
return headsOrTails() ? this.increase() : this.decrease()
}
render({ count }) {
return dom('div', { class: 'app' },
button('-', this.decrease.bind(this)),
counter(count),
button('+', this.increase.bind(this))
)
}
}
mount(CounterApp, $('#appContainer'), { count: 10 })