@okiba/evented-component

2.0.10 • Public • Published

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']
    }
  }
}

on()

See: EventEmitter::on

off()

See: EventEmitter::off

emit()

See: EventEmitter::emit

destroy()

See: Component

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @okiba/evented-component

    Weekly Downloads

    1

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    7.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • fiad
    • ghzmdr
    • lavolpecheprogramma