Ben-component NPM

What's this component for?

It's a base component template for creating a web component written with ES6. Be sure you can babel it in your dev env before use it. You can easily to add a event and trigger a event, add a class and remove a class, even to add a child component which is extends this component. Contact me without hastation if there is any problem when you using it. Best Wishes.

Usage

Base usage

import Component from 'ben-component';

class Button extends Component {
    constructor(parent, options) {
        super(parent, options);
    }

    createEl() {
        return super.createEl('button', {
            className: 'buttom'
        }, {
            innerHTML: 'click me'
        });
    }
}

const button = new Button;
button.on('click', () => {
    console.log(123);
});
button.trigger('click'); // 123;

add child component

import Component from 'ben-component';

const parent = new Component;
const son = new Component;
parent.addChild(son);
parent.on('a', () => {
    console.log('Parent envent: a');
})
son.on('a', () => {
    console.log('Son envent: a');
    parent.trigger('a');
});

son.trigger('a');
// --------
Son envent: a
Parent envent: a