@creaditor/emoji-picker-web-component NPM

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