solid-emoji-picker

Unstyled Emoji Picker component for SolidJS

Install

npm i solid-emoji-picker

yarn add solid-emoji-picker

pnpm add solid-emoji-picker

Usage

Simplest example

import { EmojiPicker } from 'solid-emoji-picker';

function App() {
  function pickEmoji(emoji) {
    console.log('You clicked', emoji.name);
  }

  return (
    <EmojiPicker onEmojiClick={pickEmoji} />
  );
}

Emoji Data

The emoji data is based on unicode-emoji-json.

Events

All event properties receives the emoji item data and the accompanying event value.

onEmojiClick - "click" event
onEmojiFocus - "focus" event
onEmojiHover - "mouseover" event

Styling

The emoji picker has the following structure:

<div class="emoji-picker">
  <div class="emoji-section">
    <span class="emoji-section-title"></span>
    <div class="emoji-items">
      <button class="emoji-button">
        <!-- user-defined -->
      </button>
    </div>
  </div>
</div>

You can refer to these classes for styling the parts of the emoji picker.

Skin Tones

You can define your selected skin tone with the skinTone property for EmojiPicker. The skinTone property has the following possible values: "light", "medium-light", "medium", "medium-dark" and "dark". By default, it is undefined.

<EmojiPicker skinTone="medium" />

Take note that some emojis might not correctly apply the skin tone, this depends on the emoji support.

Filtering

filter allows conditionally rendering each emoji item. filter receives the emoji item data which shall then return a boolean. This is useful for emulating emoji search.

<EmojiPicker filter={(emoji) => emoji.name.includes('hand')} />

Custom rendering

renderEmoji allows emoji to be rendered in a user-defined way. renderEmoji receives the emoji item data, the components (used for skin tone reference) and the currently selected skin tone, in which renderEmoji must return a JSX.Element.

Here's an example with twemoji:

import twemoji from 'twemoji';
import {
  convertSkinToneToComponent,
  getEmojiWithSkinTone,
} from 'solid-emoji-picker';

function getTwemoji(
  emojis,
  emoji,
  components,
  tone,
) {
  const skinTone = convertSkinToneToComponent(components, tone);
  const tonedEmoji = getEmojiWithSkinTone(emojis, emoji, skinTone);
  return twemoji.parse(tonedEmoji);
}

function renderTwemoji(
  emojis,
  emoji,
  components,
  tone,
) {
  return <span innerHTML={getTwemoji(emojis, emoji, components, tone)} />;
}

<EmojiPicker renderEmoji={renderTwemoji} />

If renderEmoji is unspecified, it renders the following:

<span class="emoji">{emojiCodeWithSkinTone}</span>

Warning

As of April 2024, twemoji no longer works as their CDN is no longer maintained.

Custom CDN

By default, solid-emoji-picker loads the emoji data from unicode-emoji-json's UNPKG. You can use the following to modify the data handling:

setCDN - sets the base CDN path, defaults to "https://unpkg.com/unicode-emoji-json/"
setEmojiURL - specify the full path of the emoji data JSON. If not set, it defaults to selected CDN path + "data-by-emoji.json".
setGroupURL - specify the full path of the group data JSON. If not set, it defaults to selected CDN path + "data-by-group.json".
setComponentsURL - specify the full path of the component JSON. If not set, it defaults to selected CDN path + "data-emoji-components.json".
loadEmojiData - Fetch the emoji data.
loadEmojiComponents - Fetch the components data.
loadEmojiGroupData - Fetch the emoji group data.
setEmojiData - Set the emoji data.
setEmojiComponents - Set the components data.
setEmojiGroupData - Set the emoji group data.

Suspense

<EmojiPicker> uses createResource for data fetching. Wrapping it in <Suspense> is recommended.

To directly access these resource primitives, you can use useEmojiData, useEmojiGroupData and useEmojiComponents, both returns the data resource.

lxsmnsyc/solid-emoji-picker