React to events

Interactivity transforms your toddle project from a static website to a full-scale dynamic web app. The click of a button, a modified attribute, or an API response should give the user feedback.

You will learn how responding to application or user events is the only way cause side effects and update the state of your components.

Listening to user events

Reacting to user events is the most common form of interaction. You can set these up on all elements.

Interactivity is what transforms your toddle project from a static website to a full-scale dynamic web app. Clicks on reactive events gives the user feedback.

Application events

There are a few special events on the top level of each of your components:

`onLoad`: This is useful for triggering actions as soon as the element is loaded

`onAttributeChange` is valid for triggering actions in response to an attribute change. For example, it could reload an API with new data when an attribute changes.

Declaring component events

Declaring and emitting events from your components is crucial in building highly dynamic and scalable applications.

Events are the unidirectional flow of data from child components to their ancestors. Events always bubble upwards. Parent components can communicate with their children by setting down their attributes for flowing data.

Read much more about declaring custom events on components.

Event Workflows

Listening to events is not much fun without them causing some action. In toddle, you can set up workflows in response to an event. A workflow consists of a graph of actions. An action could be to `Set variable`, `Log to console`, or `Navigate to URL`. See the complete overview here .

Actions are unpure functions that usually mutate persistent data or have a side-effect.