Customization

Emoji Button's user interface is heavily customizable. Most interface elements can be customized or removed altogether. This page will go over the various customization options.

Disable auto-hide

By default, the picker is hidden when an emoji is selected. This can be changed by setting autoHide to false. To hide the picker, click anywhere outside of it in the document or call togglePicker or hidePicker.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  autoHide: false
});

Specify categories

By default, all categories are shown. You can specify a list of categories, and the picker will only show those categories. The recents category is always included by default, but it can be disabled by setting showRecents to false.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  categories: ['smileys', 'flags']
});

Size customizations

The emoji size, number of emojis per row, and number of visible rows can all be configured.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  emojiSize: '64px',
  emojisPerRow: 4,
  rows: 4
});

Emoji version

By default, Emoji Button shows all the emojis in the Emoji 12.1 specification. If desired, an older version of the Emoji specification can be used.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  emojiVersion: '1.0'
});

Initial category

By default, the picker starts out showing the Smileys & Emotion category. This can be changed if desired.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  initialCategory: 'flags'
});

Hiding UI elements

The various UI elements can be hidden if desired, to create a more minimal picker UI.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton({
  showCategoryButtons: false,
  showSearch: false,
  showPreview: false,
  showRecents: false
});