@empathyco/x-components
Version:
Empathy X Components
45 lines (32 loc) • 1.47 kB
Markdown
title: DisplayEmitter
# DisplayEmitter
A component that emits a display event when it first appears in the viewport.
## Props
| Name | Description | Type | Default |
| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------- | ------------- |
| <code>payload</code> | The payload for the display event emit. | <code>TaggingRequest</code> | <code></code> |
| <code>eventMetadata</code> | Optional event metadata. | <code>Omit<WireMetadata, 'moduleName' \| 'origin' \| 'location'></code> | <code></code> |
## Events
This component emits the following events:
- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)
## See it in action
In this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when
the div inside first appears in the viewport.
```vue
<template>
<DisplayEmitter :payload="{ url: 'tagging/url', params: {} }">
<div>I'm displaying</div>
</DisplayEmitter>
</template>
<script>
import { DisplayEmitter } from '@empathyco/x-components'
export default {
name: 'DisplayEmitterDemo',
components: {
DisplayEmitter,
},
}
</script>
```