Skip to main content
This element is CometChat’s very own emoji picker with native emoji support.

​
Properties

NameTypeDescription
emojiDataArrayJSON array of emojis grouped along with the category
emojiKeyboardStyleEmojiKeyboardStyleStyling properties and values of the element

​
Events

Events dispatched from the element
NameDescription
cc-emoji-clickedEvent triggered when user clicks on a particular emoji from the keyboard

​
EmojiKeyboardStyle

Styling properties and values of the element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
textFontSets all the different properties of font for the category name. Reference link
textColorSets the foreground color of category name.
iconTintSets the tint or color applied to the category icon.
activeIconTintSets the tint or color applied to the currently active category icon.

​
Usage

  • JavaScript
import "@cometchat/uikit-elements"; //import the web elements package.
import { EmojiKeyboardStyle } from "@cometchat/uikit-elements"; //import the EmojiKeyboardStyle class.

const clickHandler = event => {
	console.log(event.detail.id);
}

//create style object
const emojiKeyboardStyle = new EmojiKeyboardStyle({
  textFont: "500 14px Inter, sans-serif",
  textColor: "black",
  border: "1px solid green",
  width: "500px",
  height: "300px"
});

<cometchat-emoji-keyboard 
:emojiKeyboardStyle="emojiKeyboardStyle"
@cc-emoji-clicked="clickHandler($event)"></cometchat-emoji-keyboard>
⌘I