interweave-emoji-picker

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

• Interweave
• Emojibase

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

Functions

• EmojiPicker

Interfaces

• CommonEmoji
• Context
• InternalPickerProps
• InternalPickerState
• PickerProps

Type aliases

• AllowBlockMap
• CommonMode
• DisplayOrder
• GroupEmojiMap
• GroupIndexMap
• GroupKey
• SkinToneKey

Variables

• COMMON_MODE_FREQUENT
• COMMON_MODE_RECENT
• CONTEXT_CLASSNAMES
• CONTEXT_MESSAGES
• GROUPS
• GROUP_ICONS
• GROUP_KEY_COMMONLY_USED
• GROUP_KEY_NONE
• GROUP_KEY_SEARCH_RESULTS
• GROUP_KEY_VARIATIONS
• KEY_COMMONLY_USED
• KEY_SKIN_TONE
• SCROLL_BUFFER
• SCROLL_DEBOUNCE
• SEARCH_THROTTLE
• SKIN_COLORS
• SKIN_KEY_NONE
• SKIN_TONES

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[] = ...