Integration

React Usage

installation

$ npm i @foo-i18n/react

$ pnpm i @foo-i18n/react

$ yarn add @foo-i18n/react

$ bun install @foo-i18n/react

Declaration

import type {
  // ...
  UseAppTranslation,
} from '@foo-i18n/react/types';

//...

export type UseAppTranslation = UseAppTranslation<AppMessages>;

Message Provider

The translation context should be as close as possible to the root of the application, preferably at the layout level, in order to have a wider accessibility with fewer update requirement.

"use client";
import {
  TranslationProvider
} from "@foo-i18n/react/TranslationProvider";
import plurals from "@foo-i18n/plurals";
import type { AppLocale, AppMessages } from "@/i18n/types";

export type AppTranslationProviderProps = {
  locale: AppLocale;
  messages: AppMessages;
  children: React.ReactNode;
};

const AppTranslationProvider = ({
  locale,
  messages,
  children,
}: AppTranslationProviderProps) => {
  const plural = plurals[locale];

  return (
    <TranslationProvider
      locale={locale}
      messages={messages}
      plural={plural}
    >
      {children}
    </TranslationProvider>
  );
};

export default AppTranslationProvider;

Translation hook

To enable code auto-completion while using the translation hook, a typed hook should be returned.

import useTranslation from '@foo-i18n/react/useTranslation';
import type { UseAppTranslation } from './types';

/**
 * Return a typed hook
 */
export const useAppTranslation = useTranslation as UseAppTranslation;

Putting it all together

The following example uses Next.js’s React server components, but it may very well be adapted in static sites, or even in client-only situations.

import { loadMessages } from '@/i18n/messages';
import AppTranslationProvider from '@/i18n/Provider';
import PageComponent from '@/components/PageComponent';
import type { AppLocale } from '@/i18n/types';

export default async function Page() {
  // NOTE: obtain locale from route params or middleware
  const locale: AppLocale = 'en';
  const messages = await loadMessages(locale);

  return (
    <div className="py-10">
      <AppTranslationProvider locale={locale} messages={messages}>
        <PageComponent />
      </AppTranslationProvider>
    </div>
  );
}

'use client';

import { useAppTranslation } from '@/i18n/hooks';

const TranslateText = () => {
  const { t, plural } = useAppTranslation('people');
  const count = 7;
  const plurality = plural.ordinal(count);

  return (
    <div>
      {t('There are {count} people', {
        count,
        plurality,
      })}
    </div>
  );
};

export default TranslateText;