Emoji

Our emojis are using the same naming convention as Slack, the data is taken from emoji-data, we use Google & Apple variants.
They're used internally in our EmojiPicker component

Install and import #

Default #

<Emoji /> takes an emoji prop that is the name of the emoji following Slack & emoji-data naming convention, it can be wrapped with colon or not.
It can also take a url instead, it can be usefull when creating custom <EmojiPicker.List />.

smile
dog

Size #

<Emoji /> are images, they can take width & height props or size which is a shortcut for both.

child
woman
older_woman

Theming & SSR #

We rely on bowser to check the user's OS, if it's an Apple one then we will display Apple's emojis, otherwise Google's (like Slack).
You can override this with the useAppleEmoji prop, it can be useful to force Google or Apple emojis and is needed for SSR.

apple
bug

Properties #

NameType(s)DefaultRequired
emoji
string

The slack emoji, e.g: :sweat-smile: or a URL

height
number
24
size
number

Helper to prevent to set width & height

useAppleEmoji
bool

Needed for SSR, it defaults to true on the server

!process.browser || Bowser.parse(window.navigator.userAgent).platform.vendor === Apple
width
number
24

Dependencies #

Peer dependencies #