SearchInput#

The headless search field for the emoji picker — a bare two-way-bound native <input> (confirm-type="search") with a neutral border/padding fallback that drops the moment you give it a class. It is one of the parts EmojiPicker assembles, exposed for custom layouts.

Import#

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

Basic Usage#

SearchInput is a thin wrapper over a native <input> with a two-way string model binding. Bind it to a signal and pass the query into your search index. The default placeholder is Search emoji.

import { component } from '@sigx/lynx';
import { SearchInput, buildSearchIndex, enData } from '@sigx/lynx-emoji';

export const Search = component(({ signal }) => {
  const state = signal({ query: '' });
  const index = buildSearchIndex(enData);

  return () => {
    const hits = index.search(state.query); // EmojiDatum[], best match first
    return (
      <view>
        <SearchInput value={state.query} />
        {/* render `hits` in a grid below */}
      </view>
    );
  };
});

The value model is two-way: typing updates the bound signal, and assigning the signal updates the field.

Styling#

The field is headless — beyond a neutral inline border/padding fallback it has no styling of its own, and that fallback is dropped as soon as you supply a class. Pass a custom placeholder and class to skin it:

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

export const ThemedSearch = component(({ signal }) => {
  const state = signal({ query: '' });

  return () => (
    <SearchInput
      value={state.query}
      placeholder="Search reactions…"
      class="emoji-search"
    />
  );
});

Inside a full EmojiPicker, the equivalent slot is themed through the search / searchWrap keys of the EmojiSlotClasses map (or replaced wholesale with the renderSearchInput render prop) — see Theming. Use SearchInput directly only when you are composing the parts into a custom layout.

Props#

See also#

• API reference — SearchInputProps and every other export, typed.
• EmojiGrid — the recycled glyph grid you pair with search results.
• Usage — Composing the parts — wiring SearchInput, EmojiGrid and friends against a shared context.