Yuva help hooks · shadcn/ui 向け Yuva

React hooks over the useyuva headless client for the inbox's help center: the center with its collections and the best matches for the page, debounced article search that counts a submitted search, and one article with its Yes and No rating. Labels with English defaults.

プレビューはサンプルデータで動作します。ネットワークもチャネルも不要です。

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.json

Shell

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

Shell

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

Shell

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"}`

依存関係

この項目をインストールすると、次のものも追加されます。

npm パッケージ

useyuva ↗