Wall
WallReactions
Emoji reaction bar with toggle interactions and a popover picker for adding new reactions.
Wall
The Wall category provides a complete social feed system. XAWallFeed is the top-level orchestrator; it renders pinned and regular post lists, delegates search/filter to a toolbar, and shows appropriate empty or loading states. Individual posts are rendered by XAWallPost. The remaining components — XAWallInput, XAWallReplies, XAWallReactions, and XAWallTags — can be composed independently or are automatically used inside XAWallFeed and XAWallPost.
Components
<XAWallReactions />
An emoji reaction bar. Displays active reactions (count > 0) as pill buttons that toggle the current user's reaction. A hover popover provides a set of emoji picker buttons for adding new reactions. Emits a single react event with the emoji.
<XAWallReactions
:reactions="[
{ emoji: '👍', count: 3, reacted: true },
{ emoji: '❤️', count: 1, reacted: false }
]"
:available-reactions="['👍', '❤️', '😄', '🎉']"
@react="({ emoji }) => toggleReaction(post, emoji)"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
reactions | Array | [] | Current reactions: { emoji, count, reacted }. |
availableReactions | Array | ['👍', '❤️', '😄', '😮', '😢', '🎉'] | Emoji options shown in the picker popover. |
readonly | Boolean | false | Disables all interaction and hides the picker. |
Events
| Event | Payload | Description |
|---|---|---|
react | { emoji } | Emitted when an emoji is toggled or added. |
AI Context
component: XAWallReactions
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Wall
use-when: Rendering an emoji reaction bar on posts or replies. Shows active reaction counts as toggleable pill buttons with a popover picker for adding new reactions. Use standalone or it is automatically included inside XAWallPost.