ui

The ui plugin allows you to add custom React Components.
You can either add your own React components or extend Eko studio’s default components.
It provides methods to override existing components that were predefined by Eko Studio or add new custom components.
For more information about customizing UI components see the customize UI components guide

See: EkoButton, EkoDecisionButton, EkoParallelButton, EkoTimer
Example

import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp);

Properties

constants
property

Get the constants used by the plugin.
Includes naming conventions for the Eko UI classes, events etc.

Example

console.log(ui.player.constants)

Methods

player.ui.add(id, component, props)
method

Adds a new UI Component. The component will be added at the root level of the UI Component tree.

Param Type Description
id string A unique id of this component.
component class The React component class to add.
props object Props object that will be passed to the component under this.props.*

Example

import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp, { someProp: 'something' });

player.ui.addController(id, typeOrClass, config)
method

Add a new UI Controller
For example - See EkoGroupController

Param Type Description
id string A unique id of this controller.
typeOrClass string | class A string if of Eko type controller (e.g. ‘EkoGroup’) or a class of a custom written controller.
config object A config object that will be passed to the constructor of the controller.

Example

class MyController {
    constructor(id, config) {
        console.log('MyController', id, config.someValue);
    }
}

player.ui.addController('myController', MyController, { someValue: 10 });

player.ui.override(toOverride, component, props)
method

Override the component class or props for a UI Component which already exists/added.
Use this method to override UI Components generated by Eko Studio and replace with your own class.
See Create a Button

Param Type Description
toOverride string | RegExp | Array.<*> The id (or ids) of the UI Component to override. This value can be either a string (component id), a RegExp that will match one or more ids or an array of any of these.
component class Optional. The new React component class to replace the existing.
props object Optional. The new props object to replace the existing.

Example (Overriding a component class)

import MyComponent from 'MyComponent';
player.ui.override('button_start_dc8404', MyComponent);

Example (Overriding component props)

let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', null, { someValue: currProps.someValue + 1 });

Example (Overriding both component class and props)

import MyComponent from 'MyComponent';
let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', MyComponent, { someValue: currProps.someValue + 1 });

player.ui.getProps(id)
method

Get the current props of a specified UI Component, or a map of all UI elements props.

Param Type Description
id string The id of the UI Component to get the props for

Example (getting the props of a specific component)

console.log(player.ui.getProps('button_start_dc8404'));

Example (getting the props of all components)

console.log(player.ui.getProps());
Rate this page: X
Tell us more!