@okiba/evented-component
v2.0.10
Published
Component with events
Downloads
54
Readme
Okiba / EventedComponent
A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.
__
// FetchButton.js
import EventedComponent from '@okiba/evented-component'
import {on, off} from '@okiba/dom'
class FetchButton extends EventedComponent {
constructor(args) {
super(args)
this.onClick = this.onClick.bind(this)
on(this.el, 'click', this.onClick)
}
onClick() {
fetch('/api')
.then(data => this.emit('update', data))
}
onDestroy() {
off(this.el, 'click', this.onClick)
}
}
// UIPiece.js
import Component from '@okiba/component'
const components = {
fetchButton: {selector: '.fetch-button', type: FetchButton}
}
class UIPiece extends Component {
constructor({el, options}) {
super({el, ui, components, options})
this.components.fetchButton.on(
'update', this.update
)
}
onDestroy() {
this.components.fetchButton.off(
'update', this.update
)
}
}
Installation
npm i --save @okiba/evented-component
Or import it directly in the browser
<script type="module" src="https://unpkg.com/@okiba/evented-component/index.js"></script>
Usage
import EventedComponent from '@okiba/evented-component'
Untranspiled code 🛑
Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
{
test: /\.js$/,
exclude: /node_modules\/(?!(@okiba)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}