Components

We expose some Web Components to Modules directly from the CastHub App itself. By doing this, we aim to aid in Module prototyping, as well as allowing Module Developers to create Modules that are in-line with the App Design and branding if they choose to do so.

Whilst these Components are technically Web Components, we still recommend using the window.casthub.create() helper to create them. There are some caveats to using our Web Components inside of Modules which using this helper solves by applying patches automatically.

button

Properties

NameTypeDefaultValues
colorString'primary'['primary', 'secondary', 'success', 'danger']
iconString''Icon Explorer
icon-positionString'left'['left', 'right']
flatBooleanfalse
floatingBooleanfalse
smallBooleanfalse
disabledBooleanfalse

Events

The Button Component only emits a single event, which is click. Given Components are destroyed when the Module is, you don't need to worry about removing any listeners.

const $button = window.casthub.create('button');
$button.addEventListener('click', () => {
    console.log('Hello world');
});

Examples

const $button = window.casthub.create('button');
$button.color = 'primary';
$button.icon = 'casthub';
$button.iconPosition = 'right';
$button.innerText = 'Hello World';

// Add the Button to the DOM.
this.addEl($button);
// Create a new Element.
this.$newElement = document.createElement('div');
this.addEl($newElement);

const $button = window.casthub.create('button');
$button.color = 'danger';
$button.icon = 'close';
$button.innerText = 'Don\'t Press';
$button.addEventListener('click', () => {
    alert('You shouldn\'t have done that...');
});

// Append the Button to an existing Element.
this.$newElement.appendChild($button);
const $button = window.casthub.create('button');
$button.color = 'secondary';
$button.floating = 'true';
$button.small = 'true';
$button.icon = 'check';

// Add the Button to the DOM.
this.addEl($button);

empty

The Empty Component is a simple empty indicator that can be used via the empty Component.

Properties

NameTypeDefaultValues
iconString''Icon Explorer
textString'There\'s nothing here!'
overlayBooleanfalse
visibleBooleantrue

Examples

const $empty = window.casthub.create('empty');
const $empty = window.casthub.create('empty');
$empty.icon = 'twitch';
$empty.text = 'Hello World';

The Header Component is a stylized, pre-made Module Header that can be used via the header Component.

Properties

NameTypeDefaultValues
iconString''Icon Explorer
colorString'#000000'

Examples

$header = window.casthub.create('header');
$header.icon = 'streamlabs';
$header.color = '#31c3a2';
$header.innerText = 'Top Donations';
$header = window.casthub.create('header');
$header.icon = 'twitch';
$header.color = '#4b367c';
$header.innerText = 'Latest Subscribers';

icon

The Icon Component renders a simple, inline Icon. You can choose from any of the available icons.

Examples

const $icon = window.casthub.create('icon', 'casthub');
this.$container.appendChild($icon);

If you need to change the type of Icon being displayed, you can just change the type attribute of the element:

const $icon = window.casthub.create('icon', 'casthub');
$icon.setAttribute('type', 'twitch');

select

The Select Component closely follows Material Design specifications and has two different styles - default and outlined.

Properties

NameTypeDefaultValues
id Required String
items Required Array
title Required String
valueString''
outlinedBooleanfalse
errorString''
helpString''
disabledBooleanfalse
filterBooleanfalse
visibleNumber-1

Examples

const $select = window.casthub.create('select');
$select.id = 'hello-world-1';
$select.title = 'Hello world!';
$select.help = 'Just a simple Select';
$select.items = [
    {
        text: 'Test 1',
        value: 'test-1',
    },
    {
        text: 'Test 2',
        value: 'test-2',
    },
    {
        text: 'Test 3',
        value: 'test-3',
    },
];
const $select = window.casthub.create('select');
$select.id = 'hello-world-2';
$select.title = 'Hello world 2!';
$select.outlined = true;
$select.filter = true;
$select.visible = 2;
$select.items = [
    {
        text: 'Test 1',
        value: 'test-1',
    },
    {
        text: 'Test 2',
        value: 'test-2',
    },
    {
        text: 'Test 3',
        value: 'test-3',
    },
];

textfield

The Textfield Component closely follows Material Design specifications and has two different styles - default and outlined.

Properties

NameTypeDefaultValues
id Required String
title Required String
valueString''
outlinedBooleanfalse
errorString''
helpString''
maxNumber-1
disabledBooleanfalse

Examples

const $textfield = window.casthub.create('textfield');
$textfield.id = 'hello-world-1';
$textfield.title = 'Hello world!';
$textfield.help = 'Just a simple Textfield';
const $textfield = window.casthub.create('textfield');
$textfield.id = 'hello-world-2';
$textfield.title = 'Hello world!';
$textfield.outlined = true;
$textfield.max = 20;
$textfield.error = 'Whoops!';