@okiba/evented-component

Okiba / EventedComponent

A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.

Untranspiled code. 🛑

Okiba is transpiled for browser usage only. If you use it in production, don't forget to transpile it with your bundler.

__

// 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

You can grab it as an npm package

npm i --save @okiba/evented-component

Or use it in the browser

<!-- Minified -->
<script src="https://unpkg.com/@okiba/evented-component/dist/index.min.js"></script>

<!-- Full -->
<script src="https://unpkg.com/@okiba/evented-component/dist/index.js"></script>

on()

See: EventEmitter::on

off()

See: EventEmitter::off

emit()

See: EventEmitter::emit

destroy()

See: Component