Corepine logo Corepine Emoji
Emoji v0.1x latest

Configuration

Corepine Emoji configuration lives in config/corepine-emoji.php.

Publish the file with:

php artisan vendor:publish --tag=corepine-emoji-config

Example Config File

return [
    'locale' => 'en',

    'theme' => 'system',

    'color' => 'emerald',

    'columns' => 8,

    'recent_limit' => 24,

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

    'storage' => [
        'recent' => 'corepine.emoji.recent',
        'reactions' => 'corepine.emoji.reactions',
    ],

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

Options

  • locale: emoji metadata locale.
  • theme: default visual theme. The current picker supports system.
  • color: highlight color for triggers, search borders, active category indicators, and reaction picker accents.
  • columns: default emoji grid column count.
  • recent_limit: maximum number of recent emoji stored in the browser.
  • quick_reactions: emoji shown in the reaction picker strip.
  • storage.recent: localStorage key for recent message emoji.
  • storage.reactions: localStorage key for recent reaction emoji.
  • events.dispatch.selected: browser event dispatched by the message picker after selection.
  • events.dispatch.reaction_selected: browser event dispatched by the reaction picker after selection.

Color

Use a Corepine color name for the default accent:

'color' => 'red',

Corepine Emoji resolves colors through Corepine Support. Built-in names include red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.

Override one picker from Blade:

<x-corepine.emoji color="blue" />

Columns

Use config for the default picker grid:

'columns' => 8,

Override a single picker with the Blade prop:

<x-corepine.emoji :columns="4" />

Use responsive grid classes for breakpoint-specific layouts:

<x-corepine.emoji class="grid-cols-4 sm:grid-cols-9" />

Styling details: Styling