# Reaction Picker

Emoji reaction bar that opens on long press right where you touch. Slide across to grow each emoji, let go to pick it, and watch it fly into a chip with a live count. Tap yours to take it back.

> Composed · Pro · Actions — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/reaction-picker
```

## Import

```tsx
import { ReactionFocusContext, useReactionFocusRows, ReactionFocusDim, ReactionScope, ReactionPicker } from "@/components/ui/reaction-picker/reaction-picker";
```

## Variants

- `chat` — In a chat: `npx @lumioui/cli add pro/reaction-picker-chat`

## Props

### ReactionScope

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ReactionPicker

| Prop | Type | Notes |
| --- | --- | --- |
| `reactions?` | `ReactionOption[]` | Reactions in the bar. Default ❤️ 😂 😮 😢 🔥 👍. |
| `onSelect?` | `(emoji: string) => void` | Fires with the picked emoji as it lands. |
| `value?` | `string | null` | Your reaction (controlled). `null` = none. Enables the chips row. |
| `defaultValue?` | `string | null` | Your initial reaction (uncontrolled). Enables the chips row. |
| `onValueChange?` | `(emoji: string | null) => void` | Fires when your reaction changes — a pick lands, or you take it back. |
| `counts?` | `Record<string, number>` | Everyone else's reactions, by emoji. Enables the chips row. |
| `actions?` | `ReactionAction[]` | Menu rows anchored to the message. |
| `onOpenChange?` | `(open: boolean) => void` | Fires when the bar opens and once it has fully closed. |
| `children?` | `React.ReactNode` | Child content the bar anchors to — typically a message bubble. |
| `holdMs?` | `number` | Hold duration before the bar opens (ms). Default 300. |
| `align?` | `"start" | "center" | "end"` | Which side the message sits on — the chips and menu line up with it  and a bar wider than the message grows away from that edge. Default "center". |
| `landAt?` | `ReactionLanding` | Without chips: the corner the picked emoji flies to. Default "top-end"  ("top-start" when align is "end"). |
| `lift?` | `boolean` | Lift the message while the bar is open. Default true. |
| `lightColor?` | `string` | Colour of the disc behind the hovered emoji. Defaults to the muted surface. |
| `className?` | `string` | — |
| `chipsClassName?` | `string` | Classes for the chips row. |

Source: https://lumioui.com/components/reaction-picker