EkoTimer

EkoTimer is an abstract class for decision timer which can be extended to provide custom functionality or look & feel.
Some of the methods specified here can be overridden to tailor for required behaviors.
See the guide on customizing UI components
Note: This component exposes it’s root element as a react ref property this.containerRef.
Note: This component sets the CSS variable --timer-progress which outputs a number between 0 and 1 according to timer progress.

Example

export default class EkoTimer extends React.Component {
    // This handler gets called on click,
    // Override to implement any custom functionality.
    clickHandler() {...}

    // The return value of this function is used to set which CSS classes will be present in the DOM
    // for the root element of this component (default is 'ekoTimer').
    getClassnames() {
        return 'ekoTimer';
    }

    // The return value of this function will be used as the content of this component.
    // It can be either a string or a React component.
    getContent() {
        return null;
    }
}

Example

// Creating a component that extends EkoTimer:

import EkoUIComponents from 'EkoUIComponents';

export default class MyTimer extends EkoUIComponents.EkoTimer {
    clickHandler() {
        super.clickHandler();
        alert('timer clicked');
    }
}

Methods

ekoUIComponents.EkoTimer.clickHandler()
method

This handler gets called on click,
Override to implement any custom functionality.

ekoUIComponents.EkoTimer.getContent() ⇒ object | string
method

The return value of this function will be used as the content of this component.
It can be either a string or a React component.

Returns: object | string - a string or a react component representing the content of this component.

ekoUIComponents.EkoTimer.getClassnames() ⇒ string
method

The return value of this function is used to set which CSS classes will be present in the DOM
for the root element of this component.

Returns: string - A string of space-delimited classes. Default is ‘ekoTimer’

Rate this page: X
Tell us more!