A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.
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's no room above, and arrow keys move along it. While it's open the button turns into a cross; click that, click outside, or press Escape to close. The button then shows your last pick.
Options you can pass to customize this component.
emojisstring[]Apple emoji names shown in the bar, hyphenated as on Emojipedia. Anything beyond the five defaults needs emojiData too.
emojiDataEmojiDataEmoji name to image map passed to EmojiProvider. Defaults to the five bundled faces; pass react-apple-emojis/src/data.json for the full set.
onReact(name: string) => voidCalled with the emoji name every time one is picked, including each repeat while it's held down.
sizesmmdlgScale of the button, the bar, and the emoji that fly up.
alignleftcenterrightWhich edge of the bar lines up with the trigger. It still shifts inward when it would run off screen.
asChildbooleanUses your own child as the trigger instead of the built-in button, so the bar can hang off a message, card, or image.
classNamestringExtra classes merged onto the root element.
npx shadcn add swamimalode07/rare-ui/emoji-reactionimport { 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>
Click the code icon in the top-right corner to view the source code.
Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.
1
Click the button, then pick an emoji to throw it up the screen.