Internationalization

Internationalization (i18n) is handled via i18next and remix-i18next and are stored in the public/locales/<lang>/translations.json file (i.e. english. Translations can be used via the useI18n() hook or the <I18n /> component.

useI18n() hook

The useI18n() hook is a wrapper over the useTranslation() function that returns a strictly typed t function with the translations from translations.json:

{
  "hello": "Hello!"
}

import { useI18n } from 'app/hooks/useI18n'

function Example() {
  const { t } = useI18n()
  return <p>{t('hello')}</p>
}

The hook should be preferred in most cases unless you need to render nested JSX that is part of the i18n string.

<I18n /> component

The <I18n /> component is a wrapper over the <Trans /> component that includes several core components for rendering nested JSX like bold text or URLs:

{
  "helloBold": "<bold>Hello!</bold>"
}

import { I18n } from 'app/components/I18n'

function Example() {
  return <I18n i18nKey="helloBold" />
}