Skip to main content
Noor UI

ReactionPicker

v0.4.0

LinkedIn/Discord-style emoji reaction picker for social features. Supports compact and expanded display modes with full RTL support.

Social
Interactive
RTL-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

NameTypeDefaultDescription
reactions
Required
Reaction[]undefinedArray 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
number3Maximum number of reactions to show in compact mode. Default: 3
onReact
Required
(emoji: string) => voidundefinedCallback function when user clicks a reaction (emoji: string) => void
ariaLabel
string'React to comment'Accessible label for the reaction picker
className
stringundefinedAdditional CSS classes to apply

Best Practices

Do

  • ✓ Use compact mode for high-volume content (posts, comments) to save space
  • ✓ Use expanded mode for low-volume content where reactions are a key feature
  • ✓ Implement one-reaction-per-user in compact mode (LinkedIn pattern)
  • ✓ Allow multiple reactions per user in expanded mode (Discord pattern)
  • ✓ Provide visual feedback when users add/remove reactions
  • ✓ Limit available reactions to 6-8 relevant emoji

Don't

  • ✗ Don't mix interaction patterns - be consistent with one-reaction vs multi-reaction
  • ✗ Don't use too many emoji options - it overwhelms users
  • ✗ Don't forget to handle reaction removal when user clicks their active reaction
  • ✗ Don't show reaction picker without authentication - track who reacted
  • ✗ Don't use offensive or ambiguous emoji - keep it professional

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

Use Cases

  • •Comment systems on blogs, forums, and social platforms
  • •Post reactions on social media feeds
  • •Message reactions in chat applications
  • •Feedback collection on documentation pages
  • •Review ratings with emoji sentiment