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

npm install noorui-rtl

Usage

import { ReactionPicker, Reaction } from 'noorui-rtl'

function CommentReactions() {
  const [reactions, setReactions] = useState<Reaction[]>([
    { emoji: '👍', count: 12, hasReacted: false },
    { emoji: '❤️', count: 5, hasReacted: true },
  ])

  const handleReact = (emoji: string) => {
    // Toggle user's reaction (one reaction per user)
    setReactions(prev => {
      const existing = prev.find(r => r.emoji === emoji)
      if (existing) {
        return prev.map(r =>
          r.emoji === emoji
            ? { ...r, count: r.hasReacted ? r.count - 1 : r.count + 1, hasReacted: !r.hasReacted }
            : { ...r, hasReacted: false } // Remove other reactions
        )
      }
      return [...prev, { emoji, count: 1, hasReacted: true }]
    })
  }

  return (
    <ReactionPicker
      reactions={reactions}
      variant="compact"
      onReact={handleReact}
    />
  )
}

Props

Name	Type	Default	Description
`reactions` Required	`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
`onReact` Required	`(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

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