Skip to content

Components

Warning

Make sure you understand how Plugins work before continuing.

Creating A Component

Components are similar to plugins, except that they operate on a single object instead of the entire Space. To create a component, you extend BaseComponent and then register it in the onLoad() method of your plugin.

For this example, let's take the example plugin from the Plugins guide and add a component to it.

// myplugin.js

module.exports = class MyPlugin extends BasePlugin {

    /** Plugin info */
    static get id()             { return 'my-plugin' }
    static get name()           { return 'My Plugin' }
    static get description()    { return 'A sample plugin.' }

    /** Called when the plugin is loaded */
    onLoad() {

        // Register my component
        this.objects.registerComponent(MyComponent, {
            id: 'my-component',
            name: 'My Sample Component',
            description: 'Shows a popup when someone clicks this object'
        })

    }
}

class MyComponent extends BaseComponent {

    /** Called when an object with this component is loaded */
    onLoad() {

        console.log('Loaded component!')

    }

    /** Called when the user clicks on this object */
    onClick() {

        // Show alert
        this.plugin.menus.alert('Object clicked!')

    }

}

The above component is added to the plugin by using the registerComponent method in the onLoad() method of the plugin.

Now, upload the plugin to a CORS enabled server somewhere, copy the URL and use it to install the plugin.

I don't have a server, what now?

You don't need your own server, you can upload the plugin directly to your Space's storage!

To do this, go to File -> Storage and click the    in the top-right. Once it's uploaded, click on the file choose "Copy URL".

Component Lifecycle

A component will generally go through a couple lifecycle events, which you can use to provide functionality. These are from the BaseComponent class and include:

  • onLoad() - First event called when the component is loaded.
  • onObjectUpdated(newFields) - Called when an editable field inside the component has changed.
  • onUnload() - Called when your component is about to be removed

Attaching The Component

Next, you need to attach this component to an object. You can do this by right-clicking an object, selecting "Properties", then "Components", and clicking the "Add Component" button. You should see a list of components, and you can find your own one in the list.

Once the component is added, close the Editor panel. Now you can click on the object and you should see your alert.

Next Steps

For more information, you can take a look at some examples or go directly to the API documentation.

Back to top