SheetPicker#

An overlay presentation of the emoji picker: a bottom sheet over a dimmed backdrop, ideal for a reaction picker or one-off use. A backdrop tap closes it; taps on the sheet itself do not propagate. Mount it near the screen root so its position:absolute covers the screen, and it renders display:none while closed. For a chat composer, prefer KeyboardPanelPicker instead, which occupies the soft keyboard's space.

Import#

import { SheetPicker } from '@sigx/lynx-emoji';

Basic Usage#

SheetPicker accepts every EmojiPickerProps field except style and onPick, plus open, onClose, height and sheetClass. Give it a dataset (or render it inside an EmojiProvider), drive open with a signal, and handle picks via onPick:

import { SheetPicker, enData } from '@sigx/lynx-emoji';
import { signal } from '@sigx/reactivity';

function ReactionSheet({ react }: { react: (glyph: string) => void }) {
    const open = signal(false);

    return (
        <SheetPicker
            open={open.value}
            height={420}
            data={enData}
            onClose={() => { open.value = false; }}
            onPick={({ glyph }) => { react(glyph); open.value = false; }}
        />
    );
}

height is the sheet height in px (default 420). The onPick payload is an EmojiPickEvent carrying the datum, the tone-resolved glyph to insert, and the active tone.

Sharing recents with other surfaces#

With an EmojiProvider in scope the sheet needs no data prop — it reads the shared dataset, search index, recents list and skin-tone preference, keeping them in sync with any other picker surface (a composer panel, say):

import { EmojiProvider, SheetPicker, enData } from '@sigx/lynx-emoji';
import { signal } from '@sigx/reactivity';

function Reactions({ react }: { react: (glyph: string) => void }) {
    const open = signal(false);

    return (
        <EmojiProvider data={enData}>
            <SheetPicker
                open={open.value}
                sheetClass="rounded-t-2xl"
                onClose={() => { open.value = false; }}
                onPick={({ glyph }) => { react(glyph); open.value = false; }}
            />
        </EmojiProvider>
    );
}

Pass sheetClass for extra classes on the sheet surface, and classes (an EmojiSlotClasses map) or the render props to theme the picker itself.

Props#

SheetPicker is Omit<EmojiPickerProps, 'style' | 'onPick'> plus the sheet-specific props below. The inherited picker props (data, columns, showRecents, showSearch, searchPlaceholder, emptyLabel, cellSize, classes, class, renderCell, renderCategoryTab, renderSearchInput) are documented under EmojiPickerProps.

Events#

See also#

• KeyboardPanelPicker — the keyboard-space presentation, preferred for a chat composer.
• EmojiPicker — the headless picker surface the sheet wraps.
• API reference — SheetPickerProps, fully typed.
• Usage — the bottom-sheet guide.