Idyll Tutorial: Triggering Updates

Updating components in response to user events.

Idyll comes with many useful built-in components
such as buttons and sliders, but the real power comes when you combine
Idyll’s reactive markup with your own custom JavaScript components. In this short guide
I’ll cover two methods of triggering updates on custom components.

Watching for updates

With Idyll you can write declarative components using React, or use the D3Component to have more direct control over the DOM.
If you are using React components, the typical strategy is define a parameterized template using therender function and let React do the heavy lifting in terms of keeping the DOM up to date with the latest
properties.

While this works well for many components, there are some cases where you want to have more control. For example if you are
drawing to a canvas in a render loop, you may want to trigger some function or update a local variable in the component when a property changes.

In these cases, you can take advantage of React’s componentDidUpdate method to watch for updates to the properties, and handle them accoringly. For example, say that instead of directly specifying the color of the square, the color is randomly assigned, and
we want to be able to trigger a new random color being displayed. In that case, we could define our component like this:

If using the D3Component you can apply similar code to the update() function to watch for changes to the specific variables and respond accordingly.

Triggering methods directly

If this seems a bit roundabout and you just want to call a method on your component, there is another way.
You can use Idyll’s references to get a handle
to the component instance in the markup, and call function directly that way.

For example, imagine if we defined our randomized color square this way: