What it is
@kitr/i18n is react-i18next with typed keys. Strings live in one file per language under app/locales/, components call t('key'), and a misspelt key is a type error. The provider picks the visitor's language from a saved choice or the browser.
Runs in the browser. On the server, matchLocale() picks a language from Accept-Language.
Install
kitr add i18nFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
Adds @kitr/i18n with i18next and react-i18next, its provider, config/i18n.ts and app/locales/en.ts. Every change.
Quick start
The generated English bundle holds one namespace:
// app/locales/en.ts
export default {
common: {
hello: 'Hello, {{name}}',
save: 'Save',
},
} as constIn a component, useTranslation() returns t, which looks a key up in the current language:
// app/features/orders/welcome.tsx
import { useTranslation } from '@kitr/i18n'
export function Welcome({ name }: { name: string }) {
const { t } = useTranslation()
return (
<section>
<h2>{t('hello', { name })}</h2>
<button type="submit">{t('save')}</button>
</section>
)
}<Welcome name="Ada" /> renders "Hello, Ada" and a "Save" button. t('helo') is a type error. Next in the guide: Translate your first string.
Built on
kitr adds the provider with sensible defaults, matchLocale() for the server, detectLocale() for the client and the TranslationKeys type.
Problems it solves
- Strings scattered through components. Organize strings into namespaces.
- Plurals and formatting done by hand. Count things.
- Misspelt keys that render blank. Type your keys.
- The wrong language on first render. Choose the language on the server.
- Every language shipped to every visitor. Load a language on demand.