Events

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

Message Emoji Selected

The main picker dispatches corepine-emoji:selected.

document.addEventListener('corepine-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 corepine-emoji:reaction-selected.

document.addEventListener('corepine-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.

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 corepine-emoji:selected still fires for local UI reactions.