Component

import Component from '@bbc/front-end-kit/js/components/Component';

Introduction

The Component class serves as a base for every javascript instance that manages at least one DOM element. By extending from this class, developers are encouraged to follow a certain way of manipulationg DOM elments throughout the codebase in a shared and consistent way. The Component class extends from EventDispatcher to automatically provide the class with event management out of the box.

Getting started

The class is meant to always be extended when used. It should be used as a base to start from when building components that manipulate DOM elements in javascript. It can be instansiated directly but its usefullness is too limited to do so. We advise to always extend into a specific component type, even if it seems unnecessary. This will make things more understandable for other developers

class CustomComponent extends Component {
    constructor(args = {}) {
        super(args);
    }

    // methods
}

Later when you initialise CustomComponent

const myCustomComponent = new CustomComponent({
    $el: $domElement
})

After the initialisation, the DOM element can be managed by the instance in javascript. Component adds a --is-ready class to the DOM element as a sign that it is initialised by a Javascript instance of type Component.

The instance will have all the benefits of EventDispatcher as well, out of the box.

API

constructor(args = {})

The constructor method initialises the new Component instance

Parameters

• args: An object used to configure the instance. Parmeters it may contain are:
  • $el: The Dom element it should manage.
  • ... EventDispatcher properties

Getters & Setters

$el

Returns the DOM element the instance is managing.

isReady

Gets and sets the ready state. When set, toggles the --is-ready class on the element's classlist and dispatches one of the following events:

Events

ready

Dispatched when isReady is set to true.

not-ready

Dispatched when isReady is set to false.