@creaditor/emoji-picker-web-component

Creaditor Emoji Picker

Keep the following in mind

this package use emoji-picker-react

Installation

Node package

npm i @creaditor/emoji-picker-web-component

Include the module in your application

import "@creaditor/emoji-picker-web-component"

Add the tag in as dom element

<cdtr-emoji-picker></cdtr-emoji-picker>

Example:

  const onEmojiClick = (event, emojiObject) => {
    setChosenEmoji(emojiObject);
  };

const emojiPicker = document.createElement("cdtr-emoji-picker");
emojiPicker.onEmojiClick = (event, emojiObject) => {
  const span = document.createElement("span");
  span.innerHTML = emojiObject.emoji;
  document.getElementById("block").appendChild(span);
};

document.getElementById("block").appendChild(emojiPicker);

Publish

Please build using npm run build

and then run npm publish

Accepted props

Name	Type	Default Value	Required?	Description
onEmojiClick	Function	undefined	Yes	Callback to run when clicking an emoji.
preload	Boolean	false	No	Indicates whether all emojis images, should be preloaded, or only when showing each category.
skinTone	string	neutral	No	Decides the default skit tone for supported emojis.
disableAutoFocus	boolean	false	No	Disables autofocus of the search bar. Useful for safari-iphone devices which zoom in to focused inputs.
disableSearchBar	boolean	false	No	Disables the search bar and the skin tone picker altogether.
disableSkinTonePicker	boolean	false	No	Disables the skin tone picker.
pickerStyle	Object	undefined	No	Overrides style of the component.
groupNames	Object	undefined	No	Specifies alternative category names to use. See Internationalization section.
groupVisibility	Object	undefined	No	Specifies group names to be disabled.
native	Boolean	false	No	Loads system emojis instead of Apple Emoji pngs
searchPlaceholder	string	null	No	Decides the default placeholder for the search input