Emoji Picker

• Version Compatibility
• Installation
• Usage
  • Action customization
  • Popup positioning
• Internationalization
• Theming
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Add an emoji picker to your Filament input fields.

#Version Compatibility

Use composer require tangodev-it/filament-emoji-picker:^3.0 on Filament 5, or ^2.0 if you are still on Filament 4.

#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"

or

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 forms? 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('message')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-message')),

#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 information 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

• emoji-picker-element
• TangoDev
• All Contributors

#License

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