A react button that opens a row of five face reactions on click or press and hold. The hovered face scales up and the choice replaces the button label.
Noor Haddad
Product designer / 5h
Shipped the new onboarding today. Three screens became one and nobody noticed.
npx shadcn@latest add https://hyperblur.dev/r/like-reaction-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-reaction-picker.tsx.
import { LikeReactionPicker } from "@/components/hyperblur/like-reaction-picker"
<LikeReactionPicker onChange={(reaction) => console.log(reaction)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | "like" | "love" | "haha" | "wow" | "sad" | null | Controlled reaction. Pair with onChange. | |
| defaultValue | "like" | "love" | "haha" | "wow" | "sad" | null | null | Initial reaction when uncontrolled. |
| onChange | (value: ReactionId | null) => void | Called with the chosen reaction, or null when the current one is chosen again. | |
| open | boolean | Controlled open state of the reaction row. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the row opens or closes. | |
| accent | string | "#2f7bff" | Focus ring, selected marker and default highlight color. |
| label | string | "Like" | Text on the button while no reaction is chosen. |
| holdDelay | number | 380 | Milliseconds of press and hold before the row opens. |