Yuva help search

A search field over the help center with live results: the matched words highlighted in the title and excerpt, and the click counted for the report.

The preview runs on sample data. It needs no network and no channel.

tsx

import { YuvaHelpSearch } from "@/components/yuva-help-search"

export function Search() {
  return (
    <YuvaHelpSearch
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
      onSelect={(article, query) => console.log(article.title, query)}
    />
  )
}

Installation

Run this in a shadcn project. The files are copied into your own code.

Shell

npx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

pnpm dlx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

yarn dlx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

bunx --bun shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Usage

tsx

import { YuvaHelpSearch } from "@/components/yuva-help-search"

<YuvaHelpSearch server={server} channel={channel} onSelect={(article) => setId(article.id)} />

Props

`YuvaHelpSearchProps`

Prop	Type
`server?`	`string`
`channel?`	`string`
`client?`	`YuvaClient`
`identityToken?`	`IdentityTokenSource \| null`
`locale?`	`string`
`help?`	`YuvaHelpState`
`query?`	`string`
`onQueryChange?`	`(query: string) => void`
`onSelect?`	`(article: ClientHelpArticleSummary, query: string) => void`
`labels?`	`Partial<YuvaHelpLabels>`
`className?`	`string`

Labels

The labels are listed on Yuva help.

Dependencies

Installing this item also adds the following.

Yuva help search

Installation

Usage

Props

YuvaHelpSearchProps

Labels

Dependencies

Components from shadcn/ui

Other Yuva items

npm packages

`YuvaHelpSearchProps`