EmojiPicker

A full-Unicode emoji picker for the “Add a reaction” affordance. It emits an emojibase hexcode key — 1F44D, or 1F44D-1F3FD for its medium skin tone — never a glyph, so the reaction that gets stored has exactly one spelling.

Installation

import { EmojiPicker } from "@o/pipeline/experimental/components/emoji-picker";

Usage

Placement

Controlled

Notes

The emoji dataset is roughly 700KB and never reaches the initial bundle: it is loaded with import() the first time the popover opens and cached in a module-level promise, so every open after the first is instant. A spinner covers the first load and a plain message covers a failed one.

The grid is windowed by row with @tanstack/react-virtual, section headers included, and is a real role="grid" with rowgroups named after their sections. Arrow keys move between cells and wrap across rows, Home/End go to the ends of the row (Ctrl/Cmd for the ends of the grid), typing anywhere routes to the search box, and exactly one cell is tabbable at a time.

Two preferences live in localStorage, each read and written inside its own try/catch so a private-mode browser gets a working picker with no history: