React Hooks

/**
 * React hook providing translation function and i18next instance
 * @param ns - Namespace(s) to load and use for translations
 * @param options - Configuration options for the hook
 * @returns Array/object with [t, i18n, ready] plus named properties
 */
function useTranslation<
  const Ns extends FlatNamespace | $Tuple<FlatNamespace> | undefined = undefined,
  const KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined
>(
  ns?: Ns,
  options?: UseTranslationOptions<KPrefix>
): UseTranslationResponse<FallbackNs<Ns>, KPrefix>;

interface UseTranslationOptions<KPrefix> {
  /** Custom i18next instance (defaults to context or global instance) */
  i18n?: i18n;
  /** Enable React Suspense mode for async loading */
  useSuspense?: boolean;
  /** Prefix automatically added to all translation keys */
  keyPrefix?: KPrefix;
  /** Events to bind for re-rendering (default: 'languageChanged') */
  bindI18n?: string | false;
  /** Namespace resolution mode */
  nsMode?: 'fallback' | 'default';
  /** Target language override */
  lng?: string;
}

type UseTranslationResponse<Ns extends Namespace, KPrefix> = [
  t: TFunction<Ns, KPrefix>,
  i18n: i18n,
  ready: boolean
] & {
  /** Translation function with type-safe keys */
  t: TFunction<Ns, KPrefix>;
  /** i18next instance for language changes and configuration */
  i18n: i18n;
  /** Indicates if translations are loaded and ready */
  ready: boolean;
};

import { useTranslation } from "react-i18next";

// Basic usage
function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}

// With namespace
function UserProfile() {
  const { t } = useTranslation('user');
  return <div>{t('profile.title')}</div>;
}

// With key prefix
function Settings() {
  const { t } = useTranslation('common', { keyPrefix: 'settings' });
  return <button>{t('save')}</button>; // Resolves to 'common:settings.save'
}

// Multiple namespaces with fallback
function Dashboard() {
  const { t, i18n, ready } = useTranslation(['dashboard', 'common']);
  
  if (!ready) return <div>Loading...</div>;
  
  return (
    <div>
      <h1>{t('title')}</h1>
      <button onClick={() => i18n.changeLanguage('de')}>
        {t('common:switchLanguage')}
      </button>
    </div>
  );
}

// With interpolation and pluralization
function ItemCounter({ count }: { count: number }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count })}</p>; // Handles plural forms
}

// Custom i18next instance
function IsolatedComponent({ i18nInstance }: { i18nInstance: i18n }) {
  const { t } = useTranslation('isolated', { i18n: i18nInstance });
  return <span>{t('message')}</span>;
}

/**
 * Initializes i18next instance with SSR data for hydration
 * @param initialI18nStore - Pre-loaded translation resources from server
 * @param initialLanguage - Initial language from server
 * @param props - Additional options including custom i18next instance
 */
function useSSR(
  initialI18nStore: Resource,
  initialLanguage: string,
  props?: { i18n?: i18n }
): void;

import { useSSR, useTranslation } from "react-i18next";

// Next.js page component
function HomePage({ initialI18nStore, initialLanguage }) {
  useSSR(initialI18nStore, initialLanguage);
  const { t } = useTranslation();
  
  return <h1>{t('welcome')}</h1>;
}

// With custom i18next instance
function CustomSSRComponent({ ssrData, customI18n }) {
  useSSR(ssrData.store, ssrData.language, { i18n: customI18n });
  const { t } = useTranslation();
  
  return <div>{t('content')}</div>;
}

// In Next.js getServerSideProps or getStaticProps
export async function getServerSideProps(context) {
  const { initialI18nStore, initialLanguage } = getInitialProps();
  
  return {
    props: {
      initialI18nStore,
      initialLanguage
    }
  };
}

// Namespace resolution types
type FallbackNs<Ns> = Ns extends undefined
  ? TypeOptions['defaultNS']
  : Ns extends Namespace
    ? Ns
    : TypeOptions['defaultNS'];

// Conditional hook signature based on i18next selector support
type UseTranslationHook = TypeOptions['enableSelector'] extends true | 'optimize'
  ? UseTranslationSelector
  : UseTranslationLegacy;

interface UseTranslationLegacy {
  <
    const Ns extends FlatNamespace | $Tuple<FlatNamespace> | undefined = undefined,
    const KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined
  >(
    ns?: Ns,
    options?: UseTranslationOptions<KPrefix>
  ): UseTranslationResponse<FallbackNs<Ns>, KPrefix>;
}

interface UseTranslationSelector {
  <
    const Ns extends FlatNamespace | $Tuple<FlatNamespace> | undefined = undefined,
    const KPrefix = undefined
  >(
    ns?: Ns,
    options?: UseTranslationOptions<KPrefix>
  ): UseTranslationResponse<FallbackNs<Ns>, KPrefix>;
}

// SSR resource type from i18next
interface Resource {
  [language: string]: {
    [namespace: string]: any;
  };
}