CategoryTabBar#

The headless category jump bar — a horizontal scroll-view row of glyph tabs. Selecting a tab switches which category the grid shows (filter-based, with no scroll-position sync, to stay headless and cheap). Works identically on iOS and Android.

Import#

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

Basic usage#

CategoryTabBar is one of the headless parts that EmojiPicker is assembled from. Use it directly when you want a custom picker layout. Each tab is a CategoryTabEntry — an EmojiTab (a category key, or the literal 'recents') paired with its representative glyph (🕘 for recents, a category icon otherwise). The active prop is the currently-selected category key (or 'recents'), and select fires the chosen EmojiTab when a tab is tapped.

import { CategoryTabBar, type CategoryTabEntry, type EmojiTab } from '@sigx/lynx-emoji';
import { signal } from '@sigx/reactivity';

function CategoryJumpBar({ tabs }: { tabs: CategoryTabEntry[] }) {
    const active = signal<string>(tabs[0].tab as string);

    return (
        <CategoryTabBar
            tabs={tabs}
            active={active.value}
            onSelect={(tab: EmojiTab) => { active.value = tab as string; }}
        />
    );
}

Styling and render override#

The bar is headless with neutral inline fallbacks only. Pass class for the row container, and tabClass / tabActiveClass for individual tabs (the active tab gets both). When you need full control over a tab's content, supply a render prop — an EmojiRenderCategoryTab, called with the tab, its glyph, and whether it is active, rendered inside the tab's Pressable:

import { CategoryTabBar, type CategoryTabEntry } from '@sigx/lynx-emoji';

function ThemedTabBar({ tabs, active }: { tabs: CategoryTabEntry[]; active: string }) {
    return (
        <CategoryTabBar
            tabs={tabs}
            active={active}
            class="emoji-tabbar"
            tabClass="emoji-tab"
            tabActiveClass="emoji-tab--active"
            render={(tab, glyph, isActive) => (
                <text style={{ opacity: isActive ? '1' : '0.5' }}>{glyph}</text>
            )}
            onSelect={(tab) => { /* jump the grid to `tab` */ }}
        />
    );
}

When used inside EmojiPicker, the same theming is reached through the tabBar, tab and tabActive slots of EmojiSlotClasses and the picker's renderCategoryTab render prop.

Props#

Events#

Related types#

• CategoryTabEntry — a { tab, glyph } pair.
• EmojiTab — an EmojiCategory key or the literal 'recents'.
• EmojiRenderCategoryTab — the render prop signature.

See also#

• EmojiPicker — the full surface this bar is part of.
• Usage — composing the parts — wiring the headless parts against a context.
• API reference — every export, typed.