Corepine logo Corepine Emoji
Emoji v0.1x latest

Blade Components

Corepine Emoji exposes three public Blade components.

Main Picker

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

Common props:

Prop Default Description
target null Input id, nearby wire:model value, or nearby x-model value for cursor-position insertion. This is not the popover anchor.
trigger true Render the trigger button and popover behavior.
placeholder Search emoji Search input placeholder text.
recent-label Recent Label shown above recent emoji.
recent-storage-key Config value localStorage key used for recent emoji.
dusk emoji-picker Dusk marker for the picker panel.
embedded null Force embedded panel behavior.
columns Config value Default grid column count.
color Config value Highlight color for the trigger, search border, category indicator, and reaction accents.
wrapper-class null Classes for the outer wrapper.

Custom Trigger Slot

Pass trigger markup between the component tags:

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

The slot is used as the popover trigger. The target prop is still the input or textarea id used for emoji insertion.

Reaction Picker

<x-corepine.emoji.reaction />

The reaction picker renders a smiley trigger. Clicking it opens quick reactions and a more button for the full picker.

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

Common props:

Prop Default Description
quick Config value Quick reactions shown in the one-row strip.
target null Optional text input target used by the expanded full picker.
placeholder Search reaction Search placeholder for the expanded picker.
color Config value Highlight color shared by the reaction trigger and expanded picker.

Styles

<x-corepine.emoji.styles />

Render this once in your application layout when your app does not use Tailwind, or when you do not want to compile the package source stylesheet through your app.

Class Routing

Classes passed to the main picker are split by purpose:

  • grid-cols-* classes move to the emoji grids.
  • Other classes stay on the picker panel.
<x-corepine.emoji
    class="h-[500px] w-[420px] rounded-xl grid-cols-4 sm:grid-cols-9"
/>

Reference: Styling