Overview
The Reactions feature renders emoji reactions on annotations and on inline page content. Variables below are available inside any <velt-reaction-...-wireframe>, <velt-inline-reactions-section-...-wireframe>, or <velt-reactions-panel-...-wireframe> tag via three forms:
| You want to… | Use | Example |
|---|
| Display a value as text | <velt-data field="var" /> | <velt-data field="componentConfig.annotation.emoji" /> |
| Hide / show conditionally | velt-if="{var}" | velt-if="{componentConfig.tooltipVisible}" |
| Toggle a CSS class | velt-class="'cls': {var}" | velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}" |
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form. Each primitive carries its own componentConfigSignal — the tool, the pin, and the inline-reactions section expose different variable sets (documented separately below).
<velt-reaction-tool> ”+” emoji-picker button.
| Variable | Type | Description | Example |
|---|
componentConfig.variant | string | Wireframe variant id. | <velt-data field="componentConfig.variant" /> |
componentConfig.onClickOutside | Function | Close handler — call from a click-outside region. | Call this from your custom dismiss handler. |
componentConfig.handleEmojiSelected | Function | Emoji-selection handler. Call with the chosen emoji string. | Call this from your custom emoji button click. |
componentConfig.excludeReactionIds | string[] | Reaction ids to hide from the picker. | <velt-data field="componentConfig.excludeReactionIds.length" /> |
Component Config — Reaction Pin
State on a single <velt-reaction-pin> (an emoji “pin” placed on the page or next to a comment).
| Variable | Type | Description | Example |
|---|
componentConfig.type | ReactionPinType | Pin variant ('comment', 'inline', etc.). | velt-class="'pin-{componentConfig.type}': true" |
componentConfig.annotationId | string | The reaction-annotation id this pin represents. | <velt-data field="componentConfig.annotationId" /> |
componentConfig.annotation | ReactionAnnotation | Full annotation object — from, emoji, users, createdAt, etc. | <velt-data field="componentConfig.annotation.emoji" /> |
componentConfig.disableTooltip | boolean | Hide the hover tooltip. | velt-if="!{componentConfig.disableTooltip}" |
componentConfig.customTooltipTemplate | TemplateRef<any> | Optional custom tooltip template (set programmatically via the [template] input — not used in wireframes). | Internal — programmatic only. |
componentConfig.isReactionSelectedByCurrentUser | boolean | Local user has reacted with this emoji. | velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}" |
componentConfig.user | User | Currently identified end-user. | <velt-data field="componentConfig.user.name" /> |
componentConfig.tooltipVisible | boolean | Tooltip is currently open. | velt-class="'tooltip-on': {componentConfig.tooltipVisible}" |
componentConfig.shadowDom | boolean | Shadow-DOM rendering is enabled. | Host config — set via element attribute. |
componentConfig.variant | string | Wireframe variant id. | <velt-data field="componentConfig.variant" /> |
componentConfig.excludeReactionIds | string[] | Reaction ids to hide. | <velt-data field="componentConfig.excludeReactionIds.length" /> |
componentConfig.commentReactionAnnotationIds | string[] | When this pin lives next to a comment, the full list of reactions on the comment. | <velt-data field="componentConfig.commentReactionAnnotationIds.length" /> |
Component Config — Inline Reactions Section
State on the <velt-inline-reactions-section> — an inline strip of reactions for a target element.
| Variable | Type | Description | Example |
|---|
componentConfig.targetReactionElementId | string | Anchor element id. | <velt-data field="componentConfig.targetReactionElementId" /> |
componentConfig.annotations | ReactionAnnotation[] | Reactions placed on this target. | <velt-data field="componentConfig.annotations.length" /> |
componentConfig.user | User | null | Currently identified end-user. | <velt-data field="componentConfig.user.name" /> |
componentConfig.skeletonLoading | boolean | Skeleton loader is active. | velt-if="{componentConfig.skeletonLoading}" |
componentConfig.darkMode | boolean | Dark mode is active. | velt-class="'dark': {componentConfig.darkMode}" |
componentConfig.variant | string | Per-instance variant tag. | <velt-data field="componentConfig.variant" /> |
componentConfig.shadowDom | boolean | Shadow-DOM rendering is enabled. | Host config — set via element attribute. |
componentConfig.onEmojiSelected | (emoji: string) => void | Emoji-picked handler. | Call this from your custom emoji button click. |
componentConfig.onReactionClick | (reactionAnnotation: ReactionAnnotation) => void | Pin-click handler. | Call this from your custom pin click. |
componentConfig.reactionAnnotationsTrackByFn | Function | Identity function used internally to track list items. | Internal — used as a track-by function. |
Context-Specific Variables
These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.
| Variable | Type | Available in | Example |
|---|
user | User | Reaction-pin tooltip rows — <velt-reaction-pin-tooltip-user-wireframe> and its children | <velt-data field="user.name" /> |
emoji | { key: string; value: string; name?: string } | Reactions-panel rows — <velt-reactions-panel-item-wireframe> and <velt-reactions-panel-item-emoji-wireframe> | <velt-data field="emoji.value" /> |
isSelected | boolean | Reactions-panel rows — true for the currently-selected emoji. | velt-class="'is-selected': {isSelected}" |
Type Reference
Types referenced by the variables above are documented in Data Models:
| Type | Description |
|---|
User | Identified end-user object. |
ReactionPinType | Pin variant discriminator ('comment', 'inline', etc.). |
ReactionAnnotation | The reaction-annotation — from, emoji, users, createdAt. |
Subcomponents
Each subcomponent below has its own wireframe tag.
The ”+” emoji-picker button.
- Public element:
<velt-reaction-tool>
- Wireframe tag:
<velt-reaction-tool-wireframe>
| Property | Value |
|---|
| Extra variables | See Component Config — Reaction Tool. |
reaction-pin
A single placed emoji reaction.
- Public element:
<velt-reaction-pin>
- Wireframe tag:
<velt-reaction-pin-wireframe>
- Children:
*-pin-emoji, *-pin-count, *-pin-tooltip-users, *-pin-tooltip-user, *-pin-tooltip-user-avatar, *-pin-tooltip-user-name.
| Property | Value |
|---|
| Extra variables | See Component Config — Reaction Pin. |
inline-reactions-section
An inline strip of reactions placed next to a target element.
- Public element:
<velt-inline-reactions-section>
- Wireframe tag:
<velt-inline-reactions-section-wireframe>
- Children:
*-tool-container, *-panel, *-list.
Children
| Wireframe tag | Notes |
|---|
<velt-inline-reactions-section-tool-container-wireframe> | Wraps the emoji-picker tool. |
<velt-inline-reactions-section-panel-wireframe> | Panel wrapper that hosts the reaction list. |
<velt-inline-reactions-section-list-wireframe> | Iterates componentConfig.annotations and renders one reaction-pin per entry. |
<velt-...-wireframe> registration and inherits context variables from its parent.
The reaction-pin’s componentConfig.annotation carries from (the reactor), emoji, and users (everyone who reacted with the same emoji).
| Tag | Notes | Example |
|---|
<velt-reaction-pin-emoji-wireframe> | The emoji glyph itself. | <velt-data field="componentConfig.annotation.emoji" /> |
<velt-reaction-pin-count-wireframe> | The “+N” count badge when multiple users have reacted with the same emoji. | <velt-data field="componentConfig.annotation.users.length" /> |
<velt-reaction-pin-tooltip-users-wireframe> | The hover tooltip wrapper listing all reactors. | velt-class="'visible': {componentConfig.tooltipVisible}" |
<velt-reaction-pin-tooltip-user-wireframe> | A single reactor row inside the tooltip (iterated). | <velt-data field="user.name" /> |
<velt-reaction-pin-tooltip-user-avatar-wireframe> | Avatar inside a tooltip row. | <velt-data field="user.photoUrl" /> |
<velt-reaction-pin-tooltip-user-name-wireframe> | Name inside a tooltip row. | <velt-data field="user.name" /> |
reaction-tool ”+” button, the reactions-panel emoji picker opens. Each row exposes the per-iteration variable emoji ({ key, value, name? }) and isSelected.
| Tag | Notes | Example |
|---|
<velt-reactions-panel-items-wireframe> | The list wrapper that iterates the filtered emojis. | (composes per-item rows) |
<velt-reactions-panel-item-wireframe> | A single emoji row. | velt-class="'is-selected': {isSelected}" |
<velt-reactions-panel-item-emoji-wireframe> | The emoji glyph itself. | <velt-data field="emoji.value" /> |
Reactions Panel example
React / Next.js
Other Frameworks
<VeltReactionsPanelWireframe.Items.Item>
<button className="my-emoji-row">
<VeltReactionsPanelWireframe.Items.Item.Emoji>
<span className="my-emoji">
<VeltData field="emoji.value" />
</span>
</VeltReactionsPanelWireframe.Items.Item.Emoji>
<VeltData field="emoji.name" />
</button>
</VeltReactionsPanelWireframe.Items.Item>
<velt-reactions-panel-item-wireframe>
<button class="my-emoji-row">
<velt-reactions-panel-item-emoji-wireframe>
<span class="my-emoji">
<velt-data field="emoji.value"></velt-data>
</span>
</velt-reactions-panel-item-emoji-wireframe>
<velt-data field="emoji.name"></velt-data>
</button>
</velt-reactions-panel-item-wireframe>
