Corepine logo Corepine Emoji
Emoji v0.1x latest

Quick Start

Use the main picker when an emoji should be inserted into a message, comment, or reply body.

Blade

<textarea
    id="message"
    class="w-full rounded-lg border border-zinc-300"
></textarea>

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

The target prop points to the textarea or input that receives the selected emoji.

Livewire Uses The Same Picker

Keep wire:model on the textarea. The picker target can match the Livewire property name:

<textarea
    wire:model.live="body"
    class="w-full rounded-lg border border-zinc-300"
></textarea>

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

When a user selects an emoji, the picker inserts it at the cursor position and dispatches an input event. Livewire receives the updated value from the textarea.

For Blade forms, target usually points to an element id. For Livewire fields, it can point to a nearby wire:model or x-model value.

Next Steps