# Event handling

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/tutorials/react-components/lesson-04

# Event handling

The ThoughtSpot Visual Embed SDK provides a set of Embed events that can be listened to and handled via callback functions.

## Event listener props

Every [EmbedEvent](https://developers.thoughtspot.com/docs/Enumeration_EmbedEvent) has an equivalent **prop** in the React components where the event is applicable, with the naming pattern `on{EmbedEvent}`:

```tsx
// Required for referencing the LiveboardEmbed that is created in other code
const embedRef = useEmbedRef<typeof LiveboardEmbed>();

return <LiveboardEmbed
        frameParams={{width:'100%',height:'100%'}}
        liveboardId={renderContent.split("|")[0]}
        ref={embedRef}
        onLiveboardRendered={afterEmbedRendered}
        onData={removeLoader}
        onSave={updateMenuSystem}
  />
```

## Use embedRef to update ThoughtSpot component

By setting the **ref** prop to the **embedRef** const declared earlier within the page, functions can reference the embed component within their code to trigger a `HostEvent` without causing the React page to attempt to re-render the embedded ThoughtSpot component.

For example, the handler function `afterEmbedRendered` assigned to `onLiveboardRendered` above might look like:

```typescript
const afterEmbedRendered = () => {
        embedRef.current.trigger(HostEvent.SetVisibleVizs, [
                 "3f84d633-e325-44b2-be25-c6650e5a49cf",
                 "28b73b4a-1341-4535-ab71-f76b6fe7bf92",
        ]);
};
```

The `embedRef.current` syntax allows for issuing the `.trigger()` method of calling in a [HostEvent](https://developers.thoughtspot.com/docs/Enumeration_HostEvent) in when the `EmbedEvent` has fired off.

You can use the same syntax to link other UI elements within the React page to the ThoughtSpot component without generating unnecessary and disruptive re-rendering.

[← Previous]({{navprefix}}/tutorials/react-components/lesson-03) [Done]({{navprefix}}/tutorials/tutorials-overview)