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 |