Emoji Reaction

A bar with emoji reactions, particle bursts, and a rolling count. It shows a picker on hover or focus. Use when allowing users to react with emojis and see visual feedback.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/emoji-reaction

npx layro-cli add @educlopez/emoji-reaction

npx layro-cli add @educlopez/emoji-reaction

bunx layro-cli add @educlopez/emoji-reaction

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { SmilePlus } from "lucide-react";
import {
  AnimatePresence,
  motion,
  useAnimate,
  useReducedMotion,
} from "motion/react";
import {
  type KeyboardEvent,
  useCallback,
  useEffect,