Filament Emoji Picker

Add an emoji picker to your Filament input fields.

Installation

You can install the package via composer:

composer require tangodev-it/filament-emoji-picker

You can publish the config file with:

php artisan vendor:publish --tag="filament-emoji-picker-config"

php artisan filament-emoji-picker:install

Publish the config file if you want to change the default language of the picker (English). See the "Internationalization" section below for further details.

Usage

Just add the EmojiPickerAction to your existing input fields and you're ready to go 🚀.

Never heard about form actions? Read more.

use TangoDevIt\FilamentEmojiPicker\EmojiPickerAction;

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->suffixAction(EmojiPickerAction::make('emoji-title')),

Click on the action to show the emoji picker:

Pick an emoji and it will be automatically appended to the field content:

You can add the EmojiPickerAction also as a hint action:

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')),

Or as a prefix action:

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-title')),

You can attach the EmojiPickerAction also to a Textarea field:

Textarea::make('messagge')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-messagge')),

Action customization

Like any other action, you can set the icon and the label (visible only on hint actions).

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')
        ->icon('paint-brush')
        ->label('Choose an emoji')
    ),

By default the icon is heroicon-o-face-smile and the label is Emoji. The label is only visible in hint actions.

Popup positioning

You can change the position and the offset (in pixel) of the popup:

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-titolo')
        ->popupPlacement('bottom-start')
        ->popupOffset([-7, 4])
    ),

Possible placements:

auto
auto-start
auto-end
top
top-start
top-end
bottom
bottom-start
bottom-end
right
right-start
right-end
left
left-start
left-end

The default placement is bottom-end and the default offset is [7,4].

Internationalization

You can change the picker language by publishing the config file (see the "Installation" section) and editing it:

Here's an example for the italian translation:

<?php
// config for TangoDevIt/FilamentEmojiPicker
return [
    'locale' => 'it',
    'i18n' => 'https://cdn.jsdelivr.net/npm/emoji-picker-element@1.21.3/i18n/it.js',
    'datasource' => 'https://cdn.jsdelivr.net/npm/emoji-picker-element-data@1.6.0/it/cldr-native/data.json'
];

For further informations please refer to the underlying javascript library documentation.

Theming

Out of the box the picker supports light and dark mode:

To further customize the style of the picker please refer to the underlying javascript library documentation.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

TangoDev-it / filament-emoji-picker

readme