Loading
预览使用示例数据运行，不需要网络，也不需要渠道。
tsx
import { useYuvaHelp, useYuvaHelpSearch } from "@/hooks/use-yuva-help"
export function Results({ query }: { query: string }) {
const help = useYuvaHelp({
server={process.env.NEXT_PUBLIC_YUVA_SERVER}
channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL},
})
const { results } = useYuvaHelpSearch(help, query)
return (
<ul>
{results?.items.map((article) => (
<li key={article.id}>{article.title}</li>
))}
</ul>
)
}安装
在 shadcn 项目中运行。文件会复制到你自己的代码里。
Shell
npx shadcn@latest add https://useyuva.com/r/use-yuva-help.jsonShell
pnpm dlx shadcn@latest add https://useyuva.com/r/use-yuva-help.jsonShell
yarn dlx shadcn@latest add https://useyuva.com/r/use-yuva-help.jsonShell
bunx --bun shadcn@latest add https://useyuva.com/r/use-yuva-help.json用法
tsx
import { useYuvaHelp, useYuvaHelpSearch } from "@/hooks/use-yuva-help"
const help = useYuvaHelp({ server, channel })
const { results } = useYuvaHelpSearch(help, query)Props
UseYuvaHelpOptions
| Prop | 类型 |
|---|---|
server? | string |
channel? | string |
client? | YuvaClient |
identityToken? | IdentityTokenSource | null |
locale? | string |
page? | string |
YuvaHelpState
| Prop | 类型 |
|---|---|
client | YuvaClient | null |
locale | string | undefined |
center | ClientHelp | null |
loading | boolean |
error | unknown |
reload | () => void |
api | Help | null |
YuvaHelpSearchState
| Prop | 类型 |
|---|---|
results | ClientHelpSearchResults | null |
searching | boolean |
error | unknown |
searched | string |
submit | () => void |
YuvaHelpArticleState
| Prop | 类型 |
|---|---|
article | ClientHelpArticle | null |
loading | boolean |
error | unknown |
rating | "up" | "down" | null |
rate | (rating: "up" | "down", search?: string) => Promise<void> |
reload | () => void |
标签
每个标签都有英文默认值。传入部分 labels 对象即可修改或翻译。
| 标签 | 默认值 |
|---|---|
heading | "Help center" |
searchLabel | "Search for help" |
searchPlaceholder | "Search for help" |
bestMatches | "Best matches" |
popular | "Popular articles" |
browse | "Browse" |
noResults | "No articles found." |
searching | "Searching…" |
helpfulQuestion | "Was this helpful?" |
yes | "Yes" |
no | "No" |
thanks | "Thanks for your feedback" |
related | "Related articles" |
back | "Back" |
stillStuck | "Still stuck?" |
askText | "Ask the team, we read every message." |
messageUs | "Message us" |
loadError | "Could not load this." |
retry | "Try again" |
loading | "Loading…" |
articles | (count) => `${count} ${count === 1 ? "article" : "articles"}` |
依赖
安装此项时还会添加以下内容。