EmojiPicker

An emoji picker is a search field over every emoji: the groups (smileys, people, animals, food, …) in a grid, the user’s recent emoji first, a skin tone for the emoji that take one. EmojiPicker owns the behavior of one: the emoji themselves (Unicode’s, with their English names and keywords from CLDR), the search, the groups, the highlight, the keyboard and what screen readers hear. The search runs natively and the grid is virtualized: only the rows in view are made. The look and the words are the app’s: the picker draws nothing of its own and says nothing of its own, the app styles each part (itemClass, groupClass, searchClass, …), names the groups (groupLabels) and fills its slots (the groups’ tabs, a preview of the emoji under the pointer).

import { mount, signal, Text, View } from "nsh";
import { desktop, EmojiPanel, Log, Panel, sectionSurface, Split, ui, wide } from "./palette";

// An emoji picker as a chat app has it: the groups' tabs, search with the
// skin tone hand, the recent emoji first, the one under the pointer named
// below (the tabs at the foot on a phone). The picker owns the emoji, the
// filtering, the keys and the semantics; every pixel is the gallery's
// `EmojiPanel`.
const message = signal("Lunch at the new ramen place? ");
const recent = signal<string[]>(["👍", "😂", "❤️", "🎉", "🙏", "🔥"]);
const events = signal<string[]>([]);
const log = (line: string) => events.set([line, ...events()].slice(0, 4));

function App() {
  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 20, paddingTop: 24, gap: 14 }}>
      <Text style={{ fontSize: 22, fontWeight: "700", color: ui().text }}>emoji picker</Text>
      <Text style={{ color: ui().muted }}>
        {desktop ? "Type to search, the arrows to move, Return to choose; a tab scrolls to its group" : "Search, or tap a tab to scroll to its group; tap an emoji to choose it"}
      </Text>
      <Split
        gap={14}
        inspector={
          <>
            <Panel title="message">
              <Text style={{ fontSize: 14, color: ui().text }}>{message()}</Text>
            </Panel>
            <Log title="events" lines={events()} minHeight={92} />
          </>
        }
      >
        <View
          style={{
            ...sectionSurface(),
            width: wide() ? 342 : undefined,
            height: desktop ? 400 : 440,
            alignSelf: wide() ? "center" : "stretch",
            overflow: "hidden",
          }}
        >
          <EmojiPanel
            class="flex-1"
            fill={!desktop}
            recent={recent()}
            onSelect={({ emoji, base }) => {
              message.set(message() + emoji);
              recent.set([base, ...recent().filter((e) => e !== base)].slice(0, 18));
              log(`onSelect({ emoji: "${emoji}", base: "${base}" })`);
            }}
            onCancel={() => log("onCancel()")}
          />
        </View>
      </Split>
    </View>
  );
}

mount(App);

use nsh_base::{EmojiGroupLabels, EmojiPickerEvent, emoji_picker};
use nsh_core::prelude::*;

fn picker() -> impl IntoElement {
    let chosen = signal(SharedString::from("none"));
    let mut labels = EmojiGroupLabels::default();
    labels.smileys_emotion = Some("Smileys & emotion".into());
    labels.people_body = Some("People & body".into());
    emoji_picker()
        .recent(vec!["👍".into(), "🎉".into()])
        .group_labels(labels)
        .placeholder("Search emoji")
        .accessibility_label("Emoji")
        .auto_focus(true)
        .on_select(move |e: &EmojiPickerEvent| {
            if let EmojiPickerEvent::Select(emoji, ..) = e {
                chosen.set(emoji.clone());
            }
        })
        .item_class("size-9 items-center justify-center rounded-md text-[22px] hover:bg-accent focus:bg-accent")
        .w(px(342.0))
        .h(px(380.0))
}

import { mount, signal, Text } from "nsh";
import { EmojiPicker } from "nsh/base";

function App() {
  const message = signal("");
  return (
    <EmojiPicker
      recent={["👍", "🎉"]}
      groupLabels={{ recent: "Frequently used", smileysEmotion: "Smileys & emotion", peopleBody: "People & body" }}
      placeholder="Search emoji"
      accessibilityLabel="Emoji"
      autoFocus
      onSelect={({ emoji }) => message.set(message() + emoji)}
      class="h-96 w-[342px] overflow-hidden rounded-xl border border-border bg-popover"
      searchBarClass="mx-2 mt-2 h-8 flex-row items-center rounded-lg bg-muted px-2.5"
      searchClass="flex-1 text-sm text-foreground placeholder:text-muted-foreground"
      rowClass="px-2"
      groupClass="px-3 pt-2.5 pb-1 text-xs font-semibold text-muted-foreground"
      itemClass="size-9 items-center justify-center rounded-md text-[22px] hover:bg-accent focus:bg-accent"
      empty={<Text class="py-6 text-center text-sm text-muted-foreground">No emoji found</Text>}
    />
  );
}

mount(App);

EmojiPicker comes from nsh/base, the nsh-base crate in Rust. In Rust, emoji_picker() makes it, with a setter per prop, a listener method per event and the typed style methods. It has no popup of its own: put it in a Popover on a desktop, a Sheet on a phone, or inline.

#The emoji

The picker carries Unicode’s emoji (emojibase-data, Emoji 18.0) in their groups and order, each with the Emoji version that added it and its English name and keywords from Unicode CLDR. The native platforms have them in the app; on the web the page fetches them (nsh-emoji.bin, about 30 KB compressed) the first time a picker shows, and loading shows until then.

• Names in the app’s language: annotations gives each emoji a name and keywords in the app’s language, as emojibase’s data of a locale has them (its compact.json: { emoji: unicode, label, keywords: tags }). Cells and onSelect use the app’s names; a query matches the app’s words and the English ones both.
• Search: a query matches an emoji whose name or a keyword holds it, ignoring case; emoji whose name has a word starting with the query come first, then those whose keywords do, then the rest. The matches show in one group without a header.
• Groups: groups chooses the groups shown and their order. "recent" is the app’s recent emoji: the app keeps them (from onSelect’s base) and the picker shows them.
• Skin tones: skinTone puts one tone on every emoji that takes one (on every person of a group emoji).
• Newer emoji: emojiVersion leaves out the emoji added after an Emoji version, for systems whose fonts do not draw them yet (Emoji 16 needs iOS 18.4, Android 16 or a recent Windows 11).

#Props

#Events

EmojiEntry is what an emoji is: emoji (with the skin tone), base, label, keywords, group, version (the Emoji version that added it) and hasSkinTones (whether it takes one). renderItem gets it for each cell in view, and the highlight is the cell’s focus:: the drawing is made once per emoji and keeps its views while the highlight moves.

#Parts

#Ref

#The groups’ tabs

Tabs over the groups are Tabs the app puts in header (or footer on a phone): the group at the top is selected (onGroupChange), and a press scrolls to its group (scrollToGroup).

const group = signal<EmojiGroupId>("smileysEmotion");
let picker: EmojiPickerRef | undefined;

<EmojiPicker
  ref={(r) => (picker = r)}
  onGroupChange={({ group: next }) => group.set(next)}
  header={
    <Tabs class="flex-row justify-between" indicatorClass="bottom-0 h-0.5 bg-foreground">
      {groups.map((g) => (
        <Tab selected={group() === g.id} onPress={() => picker?.scrollToGroup(g.id)} accessibilityLabel={g.label}>
          <Icon name={g.icon} />
        </Tab>
      ))}
    </Tabs>
  }
/>;

#Names in the app’s language

// emojibase's data of the app's language: fetched once, kept by the app.
const annotations = signal<EmojiAnnotation[]>([]);
void fetch("https://cdn.jsdelivr.net/npm/emojibase-data@18/zh/compact.json")
  .then((r) => r.json())
  .then((data) => annotations.set(data.map((e) => ({ emoji: e.unicode, label: e.label, keywords: e.tags ?? [] }))));

<EmojiPicker annotations={annotations()} />;

#Accessibility

• The grid has the role "listbox", named by accessibilityLabel; each cell is an "option" named by its emoji’s name; a group’s header is a "header". The places a short row keeps are hidden.
• The search field keeps the keyboard focus while the arrow keys move the highlight, and screen readers hear the highlighted emoji’s name.

See Accessibility for labels, roles and announcements in general.

#Keyboard

An input method’s composition keeps its keys: Return and Escape commit or cancel what is being composed, and choose or cancel nothing.

#Platform notes

• Every platform draws the emoji with its own color emoji font: Apple Color Emoji on iOS and macOS, Noto Color Emoji on Android and usually on Linux (install it where it is missing), Segoe UI Emoji on Windows, the system’s in a browser. On Windows a flag shows as its two letters: leave "flags" out of groups there.
• Desktops (macOS, Windows, Linux, GPUI) and the web: the pointer highlights the cell it moves over, and a click chooses as the button goes down, so the search field keeps the keyboard focus.
• iOS, Android and Mac Catalyst: a tap chooses; the keyboard’s return key chooses the highlighted emoji.