EmojiPicker

EmojiPicker is a form element that extends Popover and react-window to efficiently render large list of images.
It takes value & onChange props, its value being an emoji wrapped with colon, using the same pattern as Slack. The data is from emoji-data.

Install and import #

Default #

The most basic emoji picker needs useEmojiPicker(), <EmojiPicker.Trigger /> and <EmojiPicker />.
It will show a predefined list of emojis

Default value #

<EmojiPicker /> being a form element, you can set a value prop that will show the correct emoji on open.

Tabs #

<EmojiPicker /> can take multiple children that have to be instances of <EmojiPicker.Tab />. They have a name prop which will be used for the content of the tab, their children will be the wrapped in < Tab.Panel />.
<EmojiPicker /> also takes a defaultTabState prop that will be passed to useTabState, it can be useful to choose a default tab for instance.

Custom list #

You can use your own custom <EmojiList /> with an emojis props with the following format:

All the field, with the expection of url, will be used for the search.

BasicList #

When using <EmojiPicker /> witjout children, it will automatically add <EmojiPicker.BasicList /> as its children, if you want to add custom tabs, you need to add it back.

i18n #

You can set some props on <EmojiPicker /> & <EmojiPicker.List /> to change some labels.

Properties #

EmojiPicker #

NameType(s)DefaultRequired
children
node

Has to be a list of `<EmojiPicker.Tab />` or can be empty to show only basic emojis

defaultTabState
object

See useTabState

{}
emptyList
node
No emojis found for your query 😔
inputSearchPlaceholder
string
Search an emoji
onChange
func
popoverAriaLabel
string
Emoji picker
tabListAriaLabel
string
Emoji picker tabs
value
string

EmojiPicker.List #

NameType(s)DefaultRequired
emojis
array
emptyList
node

Passed down by <EmojiPicker />, can be overridden

inputSearchPlaceholder
string

Passed down by <EmojiPicker />, can be overridden

isVisible
bool

Passed down by <EmojiPicker />

onChange
func

Passed down by <EmojiPicker />

value
string

Passed down by <EmojiPicker />

Dependencies #

Peer dependencies #