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 ↗