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"}` |
相依套件
安裝此項目時還會加入以下內容。