Reaction Picker

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/reaction-picker

Usage

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

Also exported: ReactionFocusContext, useReactionFocusRows, ReactionFocusDim, ReactionScope.

Examples

In a chat

A band's group chat (pink).

API reference

ReactionScope

Prop Type Default
className string —
children React.ReactNode —

ReactionPicker

Prop Type Default
reactions ReactionOption[]

Reactions in the bar. Default ❤️ 😂 😮 😢 🔥 👍.

 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.

 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".

 "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.

 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.

 —