ReactionPicker
LinkedIn/Discord-style emoji reaction picker for social features. Supports compact and expanded display modes with full RTL support.
SocialInteractiveRTL-ready
Live Demo
Compact Mode (LinkedIn-style)
Shows top 3 emojis with total count. Click to react (one reaction per user).
Total reactions: 20
Installation
Usage
Props
| Name | Type | Default | Description |
|---|---|---|---|
reactionsRequired | Reaction[] | undefined | Array of reaction objects with emoji, count, and hasReacted properties |
variant | 'compact' | 'expanded' | 'compact' | Display mode: "compact" (LinkedIn-style) or "expanded" (Discord-style) |
availableReactions | string[] | ['👍', '❤️', '💡', '🚀', '🎉', '👀'] | Array of available emoji for the picker. Default: ['👍', '❤️', '💡', '🚀', '🎉', '👀'] |
maxVisible | number | 3 | Maximum number of reactions to show in compact mode. Default: 3 |
onReactRequired | (emoji: string) => void | undefined | Callback function when user clicks a reaction (emoji: string) => void |
ariaLabel | string | 'React to comment' | Accessible label for the reaction picker |
className | string | undefined | Additional CSS classes to apply |
Features
Compact Mode (LinkedIn-style)
- Shows top 3 emoji types with total count
- Merged display: [👍❤️💡 20]
- Tooltip shows reaction breakdown on hover
- One reaction per user (LinkedIn pattern)
- Clean, minimal UI
Expanded Mode (Discord-style)
- Shows each reaction separately
- Individual buttons: [👍 12] [❤️ 5]
- + button to add new reactions
- Active state highlighting
- Flexible wrapping layout
RTL Support
- Automatic layout flip in RTL mode
- Proper spacing with logical properties
- Popover positioning adapts to direction
- Works seamlessly in Arabic/Urdu interfaces
Accessibility
- Keyboard navigation support
- ARIA labels for screen readers
- Tooltips for reaction breakdowns
- Focus management in popover