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 ↗