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');
}
}
- Table of Contents
- Methods
Methods
ekoUIComponents.EkoTimer.clickHandler()
This handler gets called on click,
Override to implement any custom functionality.
ekoUIComponents.EkoTimer.getContent() ⇒ object
| string
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
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’