Properties #

Modules can provide CastHub with a real-time specification of user-defined Properties. These properties can be modified by the user on-demand inside the CastHub UI itself and Modules can react as necessary.

The property specification is defined in your Modules code, and the function itself is asynchronous, allowing you to populate the specification with data fetched from external APIs.

Providing a Specification #

By specifying the method prepareProps in your Module, you can return a specification that will be used to render the Properties Form to the end-user.

This method is asynchronous, and there is currently no timeout on the length of time this method can take to execute. For example:

/**
 * Asynchronously builds all of the properties for this Module.
 *
 * @return {Promise}
 */
prepareProps() {
    return Promise.resolve({
        hello: {
            type: 'text',
            required: true,
            default: 'test',
            label: 'Hello World',
            help: 'Enter any text',
        },
    });
}

Reacting to Changes #

When a User modifies a property, we provide a way for you to react to this change in real-time through another method, onPropChange. This method is also called for every property on initial load, after your Module has mounted.

/**
 * Called when the given property has changed.
 *
 * @param {String} key
 * @param {*} value
 * @param {Boolean} initial Whether this is the initial value, `false` if it's an update
 */
onPropChange(key, value, initial) {
    //
}

Supported Types #

Every field in the property specification must provide a type. This defines how the property will be rendered to the user, and each has different additional fields.

  • text - Renders a textfield for the user to freely enter any text.
  • toggle - Renders a switch-like component that can be toggled on/off.
  • select - Renders a select/dropdown for the user to pick one of the given options.
    • Requires the options key, which is an Object of key-object option pairs. E.g.
      options: {
          twitch: {
              text: 'Twitch',
              icon: 'twitch',
          },
          mixer: {
              text: 'Mixer',
              icon: 'mixer',
          },
      },
      The default of this field should link to one of the keys for an option.