HeaderSearch — Kuito Documentation

Usage

Connect header search to a query.

tsx

// Connect header search to a query.
import { signal, type HeaderSearch, type RouteOptions } from 'kuito';

const query = signal('');

const search: HeaderSearch = {
  placeholder: 'Search shows',
  onChange: (text) => (query.value = text),
  onSubmit: (text) => console.log('search for', text),
};

export const options: RouteOptions = { title: 'Shows', header: { largeTitle: true, search } };

Type declaration

export interface HeaderSearch {
  placeholder?: string;
  /** The text as the user types it. */
  onChange: (text: string) => void;
  /** The user pressed the search key. */
  onSubmit?: (text: string) => void;
}

Members 3

Name	Type	Required	Description
`placeholder`	`string`	No	—
`onChange`	`(text: string) => void`	Yes	The text as the user types it.
`onSubmit`	`(text: string) => void`	No	The user pressed the search key.

onChange — method signatures

Signatures

(text: string): void

Parameters

Name	Type	Required	Description
`text`	`string`	Yes	—

Returns

void

onSubmit — method signatures

Signatures

(text: string): void

Parameters

Name	Type	Required	Description
`text`	`string`	Yes	—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.