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 ↗