Reactions

Customize Velt inline reactions with props, classes, wireframes, hooks, and known limitations.

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

	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, R9b.)

• 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.
• Timeline variant: s-emoji-block_timeline, s-emoji-block__item.active.

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: read tokens as {componentConfig.<x>}: 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: use:

• 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).