> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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? } }`):

```tsx theme={null}
<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.)

| 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**: 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:

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