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 ↗