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.

Previzualizarea rulează pe date de exemplu. Nu are nevoie de rețea și nici de canal.

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)}
    />
  )
}

Instalare

Rulează asta într-un proiect shadcn. Fișierele sunt copiate în codul tău.

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

Utilizare

tsx

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

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

Props

`YuvaHelpSearchProps`

Prop	Tip
`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`

Etichete

Etichetele sunt listate pe pagina Yuva help.

Dependențe

Instalarea acestui element adaugă și următoarele.

Yuva help search

Instalare

Utilizare

Props

YuvaHelpSearchProps

Etichete

Dependențe

Componente din shadcn/ui

Alte elemente Yuva

Pachete npm

`YuvaHelpSearchProps`