Hit Components

Use cases and APIReference for HitList, HitItem, HitSnippet

<SearchBox.HitList /> Props

import { SearchBox } from 'basehub/react-search'

// -> SearchBox.HitList

Key	Type	Description
`asChild`	`boolean`	Passes all its configuration to the immediate child. It’s a requirement for this that it has only one children.

import { SearchBox } from 'basehub/react-search'

// -> SearchBox.HitItem

The <SearchBox.HitItem /> extends the native HTMLDivProps.

Key	Type	Description
`asChild`	`boolean`	Passes all its configuration to the immediate child. It’s a requirement for this that it has only one children.
`hit`	`Hit`	The hit element from the search results.
`href`	`string`	The link to the hit result, can be any string, but most often than not, you will use the hit result to build the final URL.

Both HitList and HitItem provide keyboard navigation out-of-the-box.

import { SearchBox } from 'basehub/react-search'

// -> SearchBox.HitSnippet

The HitSnippet works as sugar syntax to render specific fields of the hit object with ease.

Key	Type	Description
`fieldPath`	`string`	Required. The specific field name in the hit object. e.g: `_title`
`fallbackFieldPaths`	`string[]`	If the `fieldPath` is `undefined` or doesn’t have a match with the query, you can provide a list of fallback paths to render in its place.
`components`	`{ container, mark, text }`	An optional set of react elements that can be passed to customize the final UI for the snippet.