...
After constructing a picker, it can be shown by calling showPicker or togglePicker on it methods. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element according the “position” parameter.
...
When an emoji is selected, the picker will emit an emoji event, passing an object containing data about the emoji that was selected. There also a “hidden” event to notify when the picker has been closed.
| Code Block | ||
|---|---|---|
| ||
window.emoji_picker.on("emoji", function (event) {
// Append Unicode Emoji to a textarea
jQuery("#textareaChat").val( jQuery("#textareaChat").val() + event.emoji);
});
window.emoji_picker.on("hidden", function (event) {
// Hidden event fired
}); |
...
Customize Picker Control
Relative Positioning
The picker accepts a “position” option specifying where the picker should be positioned, relative to the reference element passed to showPicker or togglePicker. This property can be any of the following values:
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
See the Javascript Popper library documentation for a list of valid relative position values.
Fixed Positioning
A fixed position can also be given for the position option. In this case, position is an object with top, bottom, left, and/or right properties.
| Code Block | ||
|---|---|---|
| ||
position: {
top: '0',
right: '0'
} |
Comprehensive options list
Name | Type (default value) | Description |
|---|---|---|
autoHide | Boolean (true) | Whether or not the picker should be automatically hidden when an emoji is selected. |
categories | String Array (all categories) | An array of the emoji categories to include in the picker. Valid values are: |
emojiSize | String (“1.8em”) | The CSS size to use for the emoji icons. |
emojiVersion | String (“12.1”) | The Unicode version of the Emoji specification to use. Valid values are: |
initialCategory | String (“smileys”) | The ID of the category to show initially when the picker is shown. |
recentsCount | Number (50) | The number of recent emojis to save. |
rootElement | HTML DOM Element | The root DOM node to attach the picker element to. |
rows | Number (6) | The number of visible rows in the picker. |
showCategoryButtons | Boolean (true) | Whether or not to show the category buttons. |
showSearch | Boolean (true) | Whether or not to show the search field. |
showRecents | Boolean (true) | Whether or not to show (and save) recently selected emojis. |
showVariants | Boolean (true) | Whether or not to support emoji skin tone variants. |
zIndex | Number | If specified, sets the Z-index for the emoji picker element. |