Events

Corepine Emoji dispatches browser events after a user selects an emoji.

Emoji events are outgoing notifications from the picker. They are useful for package views, Alpine components, Livewire actions, and custom message or comment UIs.

Message Emoji Selected

The main picker dispatches emoji.selected.

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

Event detail:

{
    emoji: '😀',
    label: 'grinning face',
    tags: ['face', 'grin']
}

Use this when another script or Alpine component needs to react to emoji insertion.

Reaction Selected

The reaction picker dispatches emoji.reaction-selected.

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

Use this event to call a Livewire action, update an Alpine component, or run your own JavaScript from a message or comment UI.

Renaming Event Names

Customize dispatched event names in config/corepine-emoji.php when an app or package needs its own namespace:

'events' => [
    'dispatch' => [
        'selected' => 'acme.emoji.selected',
        'reaction_selected' => 'acme.emoji.reaction-selected',
    ],
],

Package-Safe Event Resolution

When writing reusable packages, resolve active event names from the Emoji service instead of hardcoding strings:

use Corepine\Emoji\Facades\Emoji;

$selectedEvent = Emoji::event()->selected();
$reactionSelectedEvent = Emoji::event()->reactionSelected();

Livewire Textareas

When a Livewire textarea has wire:model, the picker does not need wire:model itself.

<textarea wire:model.live="body"></textarea>

<x-corepine.emoji target="body" />

The picker inserts into the textarea and dispatches the browser input event. Livewire receives the updated value from the textarea, and emoji.selected still fires for local UI reactions.