Skip to main content

interweave-emoji-picker

Build Status npm version npm deps

A React based emoji picker powered by Interweave and Emojibase. Supports the following features:

  • Customizable theme, styles, and icons.
  • Configurable element and render order.
  • Localized emoji labels and annotations.
  • Emoji grouping and categorization.
  • Multi-word deep search.
  • Skin tone palette selector.
  • Enlarged preview on hover.
  • Emoticons and shortcodes.
  • Recently and frequently used.
  • Virtualized rendering.
  • And much more!

Requirements

Installation

yarn add interweave interweave-emoji interweave-emoji-picker emojibase
// Or
npm install interweave interweave-emoji interweave-emoji-picker emojibase

Documentation

https://interweave.dev/docs/exts/emoji-picker

Index

Type aliases

AllowBlockMap

AllowBlockMap: Record<string, boolean>

CommonMode

CommonMode: frequently-used | recently-used

DisplayOrder

DisplayOrder: emojis | groups | preview | search | skin-tones

GroupEmojiMap

GroupEmojiMap: Record<string, { emojis: CanonicalEmoji[]; group: GroupKey }>

GroupIndexMap

GroupIndexMap: Record<string, number>

GroupKey

GroupKey: BaseGroupKey | commonly-used | none | search-results | variations

SkinToneKey

SkinToneKey: BaseSkinToneKey | none

Variables

constCOMMON_MODE_FREQUENT

COMMON_MODE_FREQUENT: frequently-used = 'frequently-used'

constCOMMON_MODE_RECENT

COMMON_MODE_RECENT: recently-used = 'recently-used'

constCONTEXT_CLASSNAMES

CONTEXT_CLASSNAMES: { clear: string; emoji: string; emojiActive: string; emojis: string; emojisBody: string; emojisHeader: string; emojisHeaderSticky: string; emojisList: string; emojisRow: string; group: string; groupActive: string; groups: string; groupsList: string; noPreview: string; noResults: string; picker: string; preview: string; previewContent: string; previewEmoji: string; previewShiftMore: string; previewSubtitle: string; previewTitle: string; search: string; searchInput: string; skinTone: string; skinToneActive: string; skinTones: string; skinTonesList: string } = ...

constCONTEXT_MESSAGES

CONTEXT_MESSAGES: { clearUsed: string; frequentlyUsed: string; noPreview: string; noResults: string; none: string; recentlyUsed: string; search: string; searchA11y: string; searchResults: string; skinNone: string; variations: string } = ...

constGROUPS

GROUPS: GroupKey[] = ...

constGROUP_ICONS

GROUP_ICONS: Record<string, string> = ...

constGROUP_KEY_COMMONLY_USED

GROUP_KEY_COMMONLY_USED: commonly-used = 'commonly-used'

constGROUP_KEY_NONE

GROUP_KEY_NONE: none = 'none'

constGROUP_KEY_SEARCH_RESULTS

GROUP_KEY_SEARCH_RESULTS: search-results = 'search-results'

constGROUP_KEY_VARIATIONS

GROUP_KEY_VARIATIONS: variations = 'variations'

constKEY_COMMONLY_USED

KEY_COMMONLY_USED: interweave/emoji/commonlyUsed = 'interweave/emoji/commonlyUsed'

constKEY_SKIN_TONE

KEY_SKIN_TONE: interweave/emoji/skinTone = 'interweave/emoji/skinTone'

constSCROLL_BUFFER

SCROLL_BUFFER: 150 = 150

constSCROLL_DEBOUNCE

SCROLL_DEBOUNCE: 100 = 100

constSEARCH_THROTTLE

SEARCH_THROTTLE: 300 = 300

constSKIN_COLORS

SKIN_COLORS: { none: string } = ...

constSKIN_KEY_NONE

SKIN_KEY_NONE: none = 'none'

constSKIN_TONES

SKIN_TONES: SkinToneKey[] = ...