{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "reaction-picker",
"type": "registry:component",
"title": "Reaction Picker",
"description": "Tap or hold the smiley and a tray of emoji pours out of it like liquid; slide to one and let go, and it lands on the message as a counted chip with yours lit up.",
"categories": [
"component",
"Together"
],
"dependencies": [
"lucide-react",
"motion"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "registry/devl/reaction-picker.tsx",
"type": "registry:component",
"content": "\"use client\";\n\nimport { SmilePlusIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, type PointerEvent, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Stays false until mounted so the server render and the first client render match.\nfunction useSafeReducedMotion() {\n const prefers = useReducedMotion();\n const [mounted, setMounted] = useState(false);\n useEffect(() => setMounted(true), []);\n return mounted && !!prefers;\n}\n\nexport interface ReactionOption {\n emoji: string;\n label: string;\n}\n\nexport interface Reaction {\n emoji: string;\n count: number;\n mine?: boolean;\n}\n\nexport interface ReactionPickerProps {\n reactions?: Reaction[];\n options?: ReactionOption[];\n onChange?: (reactions: Reaction[]) => void;\n holdDelay?: number;\n className?: string;\n}\n\nexport const defaultReactionOptions: ReactionOption[] = [\n { emoji: \"👍\", label: \"Like\" },\n { emoji: \"❤️\", label: \"Love\" },\n { emoji: \"😂\", label: \"Funny\" },\n { emoji: \"🎉\", label: \"Celebrate\" },\n { emoji: \"😮\", label: \"Wow\" },\n { emoji: \"🙏\", label: \"Thanks\" },\n];\n\nconst TRIGGER = 32;\nconst SLOT = 36;\nconst PAD = 4;\nconst TRAY_H = 44;\nconst GAP = 8;\nconst BLUR_ROOM = 24;\n\nconst spring = { type: \"spring\", stiffness: 520, damping: 34 } as const;\n\nfunction Count({ value, reduce }: { value: number; reduce: boolean | null }) {\n return (\n \n \n \n {value}\n \n \n \n );\n}\n\nexport function ReactionPicker({\n reactions: initial = [],\n options = defaultReactionOptions,\n onChange,\n holdDelay = 280,\n className,\n}: ReactionPickerProps) {\n const reduce = useSafeReducedMotion();\n const filterId = `goo-${useId().replace(/:/g, \"\")}`;\n const trayId = useId();\n const [reactions, setReactions] = useState(initial);\n const [open, setOpen] = useState(false);\n const [hovered, setHovered] = useState(null);\n const [focusIndex, setFocusIndex] = useState(0);\n const holdTimer = useRef>(undefined);\n const holding = useRef(false);\n const wasOpen = useRef(false);\n const triggerRef = useRef(null);\n const emojiRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const trayW = options.length * SLOT + PAD * 2;\n\n useEffect(() => () => clearTimeout(holdTimer.current), []);\n\n const toggle = (emoji: string) => {\n setReactions((rs) => {\n const existing = rs.find((r) => r.emoji === emoji);\n let next: Reaction[];\n if (!existing) next = [...rs, { emoji, count: 1, mine: true }];\n else if (existing.mine) {\n next = rs\n .map((r) => (r.emoji === emoji ? { ...r, count: r.count - 1, mine: false } : r))\n .filter((r) => r.count > 0);\n } else next = rs.map((r) => (r.emoji === emoji ? { ...r, count: r.count + 1, mine: true } : r));\n onChange?.(next);\n return next;\n });\n };\n\n const pick = (emoji: string) => {\n const mine = reactions.find((r) => r.emoji === emoji)?.mine;\n if (!mine) toggle(emoji);\n close(true);\n };\n\n const close = (refocus = false) => {\n setOpen(false);\n setHovered(null);\n if (refocus) triggerRef.current?.focus({ preventScroll: true });\n };\n\n const emojiAt = (x: number, y: number) => {\n const i = emojiRefs.current.findIndex((el) => {\n if (!el) return false;\n const r = el.getBoundingClientRect();\n return x >= r.left - 2 && x <= r.right + 2 && y >= r.top - 14 && y <= r.bottom + 14;\n });\n return i < 0 ? null : i;\n };\n\n const onPointerDown = (e: PointerEvent) => {\n if (e.button !== 0) return;\n e.currentTarget.setPointerCapture(e.pointerId);\n wasOpen.current = open;\n holding.current = false;\n clearTimeout(holdTimer.current);\n holdTimer.current = setTimeout(() => {\n holding.current = true;\n setOpen(true);\n }, holdDelay);\n };\n const onPointerMove = (e: PointerEvent) => {\n if (holding.current) setHovered(emojiAt(e.clientX, e.clientY));\n };\n const onPointerUp = (e: PointerEvent) => {\n clearTimeout(holdTimer.current);\n if (holding.current) {\n holding.current = false;\n const i = emojiAt(e.clientX, e.clientY);\n if (i !== null) pick(options[i].emoji);\n return;\n }\n setOpen(!wasOpen.current);\n };\n\n const onTriggerKey = (e: KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowUp\") {\n e.preventDefault();\n setOpen(true);\n setFocusIndex(0);\n requestAnimationFrame(() => emojiRefs.current[0]?.focus());\n }\n };\n\n const onTrayKey = (e: KeyboardEvent) => {\n let i = focusIndex;\n if (e.key === \"ArrowRight\") i = (focusIndex + 1) % options.length;\n else if (e.key === \"ArrowLeft\") i = (focusIndex - 1 + options.length) % options.length;\n else if (e.key === \"Home\") i = 0;\n else if (e.key === \"End\") i = options.length - 1;\n else if (e.key === \"Escape\") {\n e.preventDefault();\n close(true);\n return;\n } else return;\n e.preventDefault();\n setFocusIndex(i);\n emojiRefs.current[i]?.focus();\n };\n\n const trayLeft = -PAD;\n const trayTop = -(TRAY_H + GAP);\n const originX = TRIGGER / 2 - trayLeft;\n\n return (\n \n
\n
\n\n
\n \n \n
\n
\n {open && (\n \n )}\n \n
\n