Reactions

Emoji reactions: the add-reaction tool, the emoji picker panel, reaction pins (with a hover tooltip listing who reacted), and an inline reactions section. Wireframed + custom emoji sets.

Components

Full examples: the per-component pages have complete tabbed code examples and screenshots: Inline reactions and Reactions wireframe variables.

	Primitive	Wireframe
Add-reaction tool	`VeltReactionTool`	`VeltReactionToolWireframe` (leaf: picker opens as a separate panel)
Emoji picker	None	`VeltReactionsPanelWireframe`
Reaction pin	(no standalone React primitive)	`VeltReactionPinWireframe`
Pin hover tooltip	None	`VeltReactionPinTooltipWireframe`
Inline reactions section	`VeltInlineReactionsSection`	`VeltInlineReactionsSectionWireframe`

There is no VeltReactionPin React primitive: customize pins only via VeltReactionPinWireframe / CSS. Reaction data/actions live on the comment element, so there’s no useReactionUtils (see hooks).

Config props

No general config props beyond the custom emoji set. Replace the default reactions with your own via the customReactions prop (ReactionMap = { [reactionId]: { url?, svg?, emoji? } }):

<VeltInlineReactionsSection customReactions={{ "love": { emoji: "❤️" }, "ship": { svg: "<svg…>" } }} />
// or globally:  client.getReactionElement().setCustomReactions(map)   // also commentElement.setCustomReactions

(Malformed customReactions JSON silently no-ops.)

CSS: stateful classes

(Override with !important because Velt’s runtime styles are high-specificity; see CSS.)

Class	Applied when
`velt-reaction-pin--no-reactions`	Pin has 0 reactions (the key class for “show the tool when empty vs the panel when populated”)
`active` (on the pin)	Current user has reacted (`isReactionSelectedByCurrentUser`)
`action-btn.active` (on the tool)	Picker open
`velt-reactions-panel--default` / `.dark`	Panel default / dark mode
`s-emoji-block_timeline`, `s-emoji-block__item.active`	Timeline variant

Wireframes: slot trees + tokens

VeltReactionsPanelWireframe → .Items → .Item → .Emoji          (per-item: {emoji.value} {emoji.name} {emoji.key}, {isSelected})
VeltReactionPinWireframe    → .Emoji  .Count
VeltReactionPinTooltipWireframe → .Users → .User → .Avatar / .Name   (per-user: {reaction.from.name/.email/.photoUrl})
VeltInlineReactionsSectionWireframe → .ToolContainer  .Panel  .List

Reactions are flat-config (what this means), so read tokens as {componentConfig.<x>} (🔑 = state flag you’ll typically use in velt-if / velt-class): pin {componentConfig.isReactionSelectedByCurrentUser} 🔑, {componentConfig.tooltipVisible} 🔑, {componentConfig.annotation.reactions.length}, {componentConfig.type} ('comment'|'inline'|'timeline'|'standalone'); inline section {componentConfig.skeletonLoading} 🔑, {componentConfig.annotations.length}. type="standalone" renders even at 0 reactions; type="timeline" is the compact variant.

Headless hooks

Reactions are actions on the comment element:

Hook	Returns
`useAddReaction()`	`{ addReaction }`
`useToggleReaction()`	`{ toggleReaction }`
`useDeleteReaction()`	`{ deleteReaction }`

(No useReactionUtils; for custom emoji config call setCustomReactions on the reaction/comment element.)

Limitations

No standalone reaction-pin primitive (wireframe/CSS only).
Two distinct emoji fields: picker items use emoji.value/.key; pins render annotation.icon.
shadowDom defaults differ (inline section true, pin/tool false).

Concepts

Approaches

Recipes & Troubleshooting

Components: Async Collaboration

Components: Realtime Collaboration

Reference

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations

​Components

​Config props

​CSS: stateful classes

​Wireframes: slot trees + tokens

​Headless hooks

​Limitations

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations