# Emoji Reaction

> A React emoji reaction button in the chat tapback style: it opens a bar of Apple emoji and sends copies of your pick floating up.

- Type: React component (Feedback)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add emoji-reaction`
- Docs: https://wingo-ui.com/components/emoji-reaction

## Interaction

Click the button to pop the emoji bar open, or press and drag straight onto an emoji to pick it in one gesture. Hover an emoji to lift it. Pick one and 5 copies stream up off it, drifting apart, shrinking, and blurring out of focus as they climb. Hold the emoji down to keep them coming. The bar flips below the button when there is no room above, and the arrow keys, Home and End move along it. While it is open the button turns into a cross; click that, click outside, or press Escape to close. The button then shows your last pick.

## Installation

```bash
npx wingo-ui@latest add emoji-reaction
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/emoji-reaction.json`

Files:

- `components/ui/emoji-reaction.tsx`

npm dependencies: `npm i motion react-apple-emojis lucide-react @radix-ui/react-slot`

Wingo UI dependencies (installed automatically):

- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
import { EmojiReaction } from "@/components/ui/emoji-reaction"

export function Demo() {
  return <EmojiReaction onReact={(name) => console.log(name)} />
}

// or hang the bar off your own element:
// <EmojiReaction asChild>
//   <button className="rounded-2xl bg-card p-4">Nice work</button>
// </EmojiReaction>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | Scale of the button, the bar, and the emoji that fly up. The trigger is 32px (sm), 40px (md) or 48px (lg). |
| `align?` | `"left" \| "center" \| "right"` | `"center"` | Which edge of the bar lines up with the trigger. It still shifts inward when it would run off screen. |
| `asChild?` | `boolean` | `false` | Uses your own child as the trigger instead of the built-in button, so the bar can hang off a message, card, or image. |
| `surfaceColor?` | `string` | `"auto"` | Fill of the trigger, the bar and its tail, any CSS color. Auto is #F4F4F9 on light pages and #262626 on dark ones. |
| `burstCount?` | `number` | `5` | How many copies of the emoji fly up per reaction. Holding an emoji repeats the burst, and at most 60 copies are in the air at once. |
| `rise?` | `number` | `450` | How far the copies climb before they fade out, in pixels. Each copy varies it a little. |
| `holdInterval?` | `number` | `550` | While an emoji is held down, a new burst fires this often, in milliseconds. |
| `defaultOpen?` | `boolean` | `false` | Starts with the bar open, for a first-run hint or a screenshot. It does not take focus until the user opens it themselves. |
| `openLabel?` | `string` | `"Add a reaction"` | Accessible name of the trigger before any reaction. |
| `closeLabel?` | `string` | `"Close reactions"` | Accessible name of the trigger while the bar is open. |
| `reactedLabel?` | `string` | `"Reacted {emoji}"` | Accessible name of the trigger after a reaction; {emoji} fills in its name. |
| `menuLabel?` | `string` | `"Pick a reaction"` | Accessible name of the emoji bar. |
| `emojiBaseUrl?` | `string` | `"https://em-content.zobj.net/source/apple/419/"` | Where the built-in five faces load from; point it at your own mirror of the same file names. Ignored when emojiData is passed. |
| `emojis?` | `string[]` | `"[\"smiling-face-with-hearts\", \"star-struck\", \"confused-face\", \"pleading-face\", \"grinning-face-with-smiling-eyes\"]"` | Apple emoji names shown in the bar, hyphenated as on Emojipedia. Anything beyond the five defaults needs emojiData too. |
| `emojiData?` | `EmojiData` | `"built-in Apple emoji set (the five defaults)"` | Emoji name to image map passed to EmojiProvider. Defaults to the five bundled faces served from the emojipedia CDN; pass react-apple-emojis/src/data.json for the full set. |
| `onReact?` | `(name: string) => void` |  | Called with the emoji name every time one is picked, including each repeat while it is held down. |
| `children?` | `ReactNode` |  | The custom trigger when asChild is set. Ignored otherwise. |
| `className?` | `string` |  | Extra classes merged onto the root element; other div props are spread onto it too. |

## Examples

- **React to chat messages**: asChild turns each message bubble into the trigger; onReact receives the emoji name to show or save.
- **Under a post**: The small size next to a running count; every pick, including held repeats, adds one.
- **Fewer faces, bigger burst**: emojis narrows the bar to three; burstCount and rise send more copies higher.

## See also

- [Chat Message](https://wingo-ui.com/components/chat-message) ([Markdown](https://wingo-ui.com/components/chat-message.md))
- [Comment Thread](https://wingo-ui.com/components/comment-thread) ([Markdown](https://wingo-ui.com/components/comment-thread.md))
- [Favorite button](https://wingo-ui.com/components/favorite-button) ([Markdown](https://wingo-ui.com/components/favorite-button.md))
- [Popover](https://wingo-ui.com/components/popover) ([Markdown](https://wingo-ui.com/components/popover.md))
- [Chat Thread](https://wingo-ui.com/components/chat-thread) ([Markdown](https://wingo-ui.com/components/chat-thread.md))

---

Canonical: https://wingo-ui.com/components/emoji-reaction
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt