...
Relative Positioning
The picker accepts a “position” an 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.
...
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. |
APIs
Method | Params | Description |
---|---|---|
destroyPicker | - | Destroys the picker and removes it from the DOM. You will no longer be able to show the picker after it is destroyed. |
hidePicker | - | Hides the picker. |
isPickerVisible | - | Returns true if the picker is currently visible, false if not. |
off | String event, function callback | Removes the given listener for the given event. |
on | String event, function callback | Adds a listener for the given event. |
showPicker | HTML DOM Reference Element | Shows the picker, positioning it relative to the given reference element. |
togglePicker | HTML DOM Reference Element | If it is hidden it shows the picker, otherwise hides it if it is visible. |