main
import { useCallback } from 'react'
import { DEFAULT_LOCALE, type Locale, useLocale } from './locale'
import { type MessageKey, type MessageParams, translate, translateCount } from './translate'
/**
* React-facing translation hooks. `useLocale` is the reactivity edge: any
* component that renders translated copy subscribes to it, so a language switch
* re-renders exactly the tree that depends on the locale (see `locale.ts`).
*
* `t`/`tc` resolve the dictionary at call time, which keeps them correct inside
* event handlers and memoised callbacks as well as during render.
*/
export type TranslateFn = (key: MessageKey, params?: MessageParams) => string
export type TranslateCountFn = (key: MessageKey, count: number, params?: MessageParams) => string
export interface I18n {
locale: Locale
fallback: Locale
t: TranslateFn
tc: TranslateCountFn
}
/** Hook form. Use it in every component that renders localized copy. */
export function useT(): I18n {
const locale = useLocale()
const t = useCallback<TranslateFn>((key, params) => translate(locale, key, params), [locale])
const tc = useCallback<TranslateCountFn>((key, count, params) => translateCount(locale, key, count, params), [locale])
return { locale, fallback: DEFAULT_LOCALE, t, tc }
}