WUI logo

Emoji

Allows user to use emojis easily.

version

5.16.2

install

yarn add @welcome-ui/emoji

usage

import { Emoji } from '@welcome-ui/emoji'

About #

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

Usage #

<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 />.

Size #

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

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.

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
Boolean

Needed for SSR, it defaults to true on the server

typeof window === undefined || Bowser.parse(window.navigator.userAgent).platform.vendor === Apple
width
number
24

Packages #

Dependencies #
Peer dependencies #

Previous

Tabs

Next

Icons