Renderers
An emoji renderer is a class that, given an emoji sequence, will generate the content to be displayed and emitted.
To use a particular renderer, you must first create an instance of it. This instance is then passed as the renderer
option to the picker.
PicMo comes with two built-in renderers:
Native
The default NativeRenderer
will render the emojis using the native emoji glyphs in the user's operating system. This means the rendered emojis will look different depending on the operating system.
import { NativeRenderer } from 'picmo/renderers/native';
const picker = createPicker({
renderer: new NativeRenderer()
});
Twemoji
Twemoji is a free emoji library from Twitter. It contains images for each emoji. The TwemojiRenderer
will render the emojis using the SVG images from Twemoji.
import { TwemojiRenderer } from 'picmo/renderers/twemoji';
const picker = createPicker({
renderer: new TwemojiRenderer()
});
For more information on Twemoji, see the project page.
Renderer trade-offs
The built-in renderers (native and Twemoji) both have pros and cons.
The
NativeRenderer
renders quickly because all the emojis are text nodes. However, because new emojis must be added via an operating system update, this may limit the available emojis. Also, the emojis will appear differently depending on the operating system.The
TwemojiRenderer
has a consistent cross-platform look for emojis. It generally will get support for new emojis before operating systems do. However, there is a bundle size cost since the Twemoji renderer uses SVG sprite sheets, some of which are quite large.
Creating a custom renderer
There are other sources of emoji images available, such as JoyPixels and others. You can create your own renderer to fit your needs.
First, you will need to import the Renderer
class from PicMo:
import { Renderer } from 'picmo';
A Renderer
subclass must implement two methods:
render
The render
method is given an emoji record and should return a HTMLElement
which represents the content that will be displayed in the picker.
emit
The emit
method also receives an emoji record. This method should return the data that will be emitted when the emoji is selected. This can be an EmojiSelection
or, for asynchronous operations, a Promise
that resolves to an EmojiSelection
.