Global methods

Component is a global JavaScript object that provides access to all of the components on a page along with several useful utility functions. You can interact with it to read and write data, hook into component events, load and render components, and more.

To use the global Component object in your own JavaScript, be sure that the Component IO <script> tag is placed in your HTML before (above) your JavaScript so that the Component IO script executes first.

Component( key )

All components are built using the underlying API for vue.js. Calling Component('_key_'), where _key_ is the key of the component, will give a handle to the Vue instance for that component.

For example, the component below renders the text Hello World!

<component key=ranno></component>

In this case, Component('ranno') gives access to the component. This type of access is the basis for interacting with components programmatically.

Component( key ).attr

A getter method that returns a value held by a component.

The properties available to get vary by component.

Component( key ).attr =

A setter method that sets a component property locally. Does not save the value for future page loads.

The properties available to set vary by component.

Component.ready( function )

Executes a function once all components have been loaded.

Multiple functions can be registered with ready() and they will all be executed when components are done loading. Any functions registered after components are ready will be executed immediately.

Component.render( function, { options } )

Renders any <component> tags that have not been rendered.

The Component.render() method runs automatically when the Component IO script loads. However, you may not have all components on the page at that time, so you can call Component.render() at any time to render components that have been added since initial page load. There are a few scenarios where this may happen, and the behavior for each is shown below:

TL;DR If a component’s data has already been fetched, that data will be reused on subsequent renders without making additional API calls.

Scenario Behavior
No unrendered components Execute promise or callback, if any.
New, unrendered components Fetch data with single API call for all new components, then render unrendered components, then execute promise or callback, if any.
Previously fetched (but now unrendered) components Use the existing data from Component.Store to render unrendered components, then execute promise or callback, if any.
Mixed components (some previously fetched, some new) Fetch data with single API call for new components, then add data to Component.Store, then use Component.Store to render all unrendered components, then execute promise or callback, if any.
Property Type Default Description
dataComponent boolean false If true, use <div data-component></div> pattern instead of <component></component>

Options can be passed as the first parameter if no callback is needed, e.g. Component.render({ dataComponent: true })

Component.buildImage( image, { options } )

Resizes and crops an image based on options inputs.

Option Type Default Description
w Integer - Width of the image in pixels
h Integer - Height of the image in pixels
c String fit Cropping mode: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, or thumb.
g String center Cropping gravity: see link for options.

Component.loadScript( url, callback, { opts } )

Loads a script as denoted by url and executes an optional callback function once the script is loaded.

Property Type Default Description
id string none Sets the id attribute for the <script> tag.

If a <script> tag with the specified url or id already exists, a new tag will not be added, and the callback function will be invoked immediately if present.

Component.loadStylesheet( url, callback, { opts } )

Loads a stylesheet as denoted by url and then executes a callback function once the script is loaded.

Property Type Default Description
id string none Sets the id attribute for the <script> tag.

If a <link> tag with the specified url or id already exists, a new tag will not be added, and the callback function will be invoked immediately if present.