Reaction Picker

Use the reaction picker when the user is choosing an emoji reaction for a message, comment, or activity item.

Basic Usage

<x-corepine.emoji.reaction />

The reaction picker renders a smiley trigger. Clicking it opens a one-row quick reaction strip, and the more button opens the full emoji picker.

Quick Reaction Strip

The quick strip uses these default reactions:

['👍', '❤️', '😂', '😮', '😢', '🙏']

Change them in config/corepine-emoji.php:

'quick_reactions' => ['👍', '❤️', '😂', '😮', '😢', '🙏'],

Full Picker

The more button inside the quick strip opens the full picker with search, categories, recent reactions, and the standard emoji grid. Recent reactions are hidden when empty and can be cleared from the picker header.

<x-corepine.emoji.reaction
    class="w-[420px] rounded-xl grid-cols-4 sm:grid-cols-8"
/>

Panel classes stay on the popover. Grid column classes are routed into the picker grids.

Reaction Event

When a reaction is selected, the component dispatches corepine-emoji:reaction-selected.

document.addEventListener('corepine-emoji:reaction-selected', (event) => {
    console.log(event.detail.emoji)
})

Use the event to call a Livewire action, update local UI, or attach the selected emoji to a message.

Event details: Events