Skip to main content

PickerProps

Hierarchy

Index

Properties

Methods

Properties

optionalallowList

allowList?: string[]

List of emoji hexcodes to only show.

optionalautoFocus

autoFocus?: boolean

Focus the search bar on mount.

optionalblockList

blockList?: string[]

List of emoji hexcodes to hide.

optionalclassNames

classNames?: Record<string, string>

Mapping of custom CSS class names.

optionalclearIcon

clearIcon?: ReactNode

Icon to display within the clear commonly used button. Omit the icon to hide the button.

optionalcolumnCount

columnCount?: number

Number of emojis to display horizontally.

optionalcommonMode

commonMode?: CommonMode

Type of commonly used mode.

optionaldefaultGroup

defaultGroup?: GroupKey

Group to select by default.

optionaldefaultSkinTone

defaultSkinTone?: SkinToneKey

Skin tone to select by default (if not found in local storage).

optionaldisableCommonlyUsed

disableCommonlyUsed?: boolean

Disable commonly used functionality.

optionaldisableGroups

disableGroups?: boolean

Disable and hide group tabs.

optionaldisablePreview

disablePreview?: boolean

Disable and hide preview bar.

optionaldisableSearch

disableSearch?: boolean

Disable and hide search bar.

optionaldisableSkinTones

disableSkinTones?: boolean

Disable and hide skin tone palette bar.

optionaldisplayOrder

displayOrder?: DisplayOrder[]

Order to render components in.

emojiLargeSize

emojiLargeSize: number

Size of the emoji within the preview bar.

optionalemojiPadding

emojiPadding?: number

Padding around each emoji.

emojiPath

emojiPath: Path

Path to an SVG/PNG. Accepts a string or a callback that is passed the hexcode.

emojiSize

emojiSize: number

Pixel size of emoji within the list.

optionalgroupIcons

groupIcons?: Record<string, ReactNode>

Mapping of custom icons for each group tab.

optionalhideEmoticon

hideEmoticon?: boolean

Hide emoticons within the preview bar.

optionalhideGroupHeaders

hideGroupHeaders?: boolean

Hide group headers within the list.

optionalhideShortcodes

hideShortcodes?: boolean

Hide shortcodes within the preview bar.

optionalmaxCommonlyUsed

maxCommonlyUsed?: number

Max number of commonly used to store.

optionalmaxEmojiVersion

maxEmojiVersion?: number

Max official emoji release version to support.

optionalmessages

messages?: Record<string, string>

Mapping of custom translation messages.

optionalnoPreview

noPreview?: ReactNode

Content to render by default in the preview bar.

optionalnoResults

noResults?: ReactNode

Content to render when there are no search results.

optionalrowCount

rowCount?: number

Number of emoji rows to display vertically.

optionalskinIcons

skinIcons?: Record<string, ReactNode>

Mapping of custom icons for each skin tone.

optionalstickyGroupHeader

stickyGroupHeader?: boolean

Sticky the active group header to the top of the emoji list.

optionalvirtual

virtual?: { columnPadding?: number; rowPadding?: number }

Custom props to pass to react-window list component.

Methods

optionalonHoverEmoji

  • onHoverEmoji(emoji: CanonicalEmoji, event: MouseEvent<HTMLButtonElement, MouseEvent>): void

  • Callback fired when hovering an emoji.

optionalonScroll

  • onScroll(): void

  • Callback fired when scrolling the emoji list.

optionalonScrollGroup

  • Callback fired when a new group is scrolled into view.

optionalonSearch

  • onSearch(query: string, event: ChangeEvent<HTMLInputElement>): void

  • Callback fired when typing in the search field.

optionalonSelectEmoji

  • onSelectEmoji(emoji: CanonicalEmoji, event: MouseEvent<HTMLButtonElement, MouseEvent>): void

  • Callback fired when clicking on an emoji.

optionalonSelectGroup

  • onSelectGroup(group: GroupKey, event: MouseEvent<HTMLButtonElement, MouseEvent>): void

  • Callback fired when clicking a group tab.

optionalonSelectSkinTone

  • onSelectSkinTone(skinTone: SkinToneKey, event: MouseEvent<HTMLButtonElement, MouseEvent>): void

  • Callback fired when clicking a skin tone.