React i18next

import { useTranslation, Trans, I18nextProvider, initReactI18next } from "react-i18next";

const { useTranslation, Trans, I18nextProvider, initReactI18next } = require("react-i18next");

// Standalone Trans component without context
import { Trans } from "react-i18next/TransWithoutContext";

// i18next plugin initialization
import { initReactI18next } from "react-i18next/initReactI18next";

// ICU message format support (full API)
import { 
  Plural, 
  Select, 
  SelectOrdinal,
  plural, 
  select, 
  selectOrdinal,
  date,
  time,
  number
} from "react-i18next/icu.macro";

import i18next from "i18next";
import { useTranslation, Trans, I18nextProvider, initReactI18next } from "react-i18next";

// Initialize i18next with React plugin
i18next
  .use(initReactI18next)
  .init({
    lng: "en",
    fallbackLng: "en",
    resources: {
      en: {
        translation: {
          welcome: "Welcome to React i18next!",
          greeting: "Hello, {{name}}!",
          itemCount: "You have {{count}} item",
          itemCount_other: "You have {{count}} items"
        }
      }
    }
  });

// Hook usage in components
function MyComponent() {
  const { t, i18n, ready } = useTranslation();
  
  if (!ready) return <div>Loading translations...</div>;
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('greeting', { name: 'John' })}</p>
      <p>{t('itemCount', { count: 5 })}</p>
      
      {/* Complex translation with HTML using Trans component */}
      <Trans i18nKey="welcomeMessage" values={{ name: 'John' }}>
        Welcome back, <strong>{{name}}</strong>! Check your <a href="/inbox">messages</a>.
      </Trans>
      
      <button onClick={() => i18n.changeLanguage('de')}>
        Switch to German
      </button>
      <button onClick={() => i18n.changeLanguage('en')}>
        Switch to English
      </button>
    </div>
  );
}

// App setup with provider
function App() {
  return (
    <I18nextProvider i18n={i18next}>
      <MyComponent />
    </I18nextProvider>
  );
}

// Advanced usage with multiple namespaces and dynamic loading
function AdvancedExample() {
  const { t, i18n } = useTranslation(['common', 'navigation'], {
    keyPrefix: 'buttons',
    useSuspense: false
  });
  
  return (
    <div>
      <h1>{t('common:title')}</h1>
      <button>{t('save')}</button> {/* Uses keyPrefix: 'buttons.save' */}
      <nav>
        <a href="/">{t('navigation:home')}</a>
        <a href="/about">{t('navigation:about')}</a>
      </nav>
    </div>
  );
}

function useTranslation<Ns, KPrefix>(
  ns?: Ns,
  options?: UseTranslationOptions<KPrefix>
): UseTranslationResponse<Ns, KPrefix>;

interface UseTranslationOptions<KPrefix> {
  i18n?: i18n;
  useSuspense?: boolean;
  keyPrefix?: KPrefix;
  bindI18n?: string | false;
  nsMode?: 'fallback' | 'default';
  lng?: string;
}

type UseTranslationResponse<Ns, KPrefix> = [
  t: TFunction<Ns, KPrefix>,
  i18n: i18n,
  ready: boolean
] & {
  t: TFunction<Ns, KPrefix>;
  i18n: i18n;
  ready: boolean;
};

function Trans<Key, Ns, KPrefix, TContext, TOpt, E>(
  props: TransProps<Key, Ns, KPrefix, TContext, TOpt, E>
): React.ReactElement;

function I18nextProvider(props: I18nextProviderProps): React.FunctionComponent;

function Translation<Ns, KPrefix>(
  props: TranslationProps<Ns, KPrefix>
): React.ReactNode;

interface I18nextProviderProps {
  children?: React.ReactNode;
  i18n: i18n;
  defaultNS?: string | string[];
}

function withTranslation<Ns, KPrefix>(
  ns?: Ns,
  options?: { withRef?: boolean; keyPrefix?: KPrefix }
): <C extends React.ComponentType<any>>(component: C) => React.ComponentType<any>;

function withSSR(): <Props>(
  WrappedComponent: React.ComponentType<Props>
) => React.ComponentType<Props & { initialI18nStore: Resource; initialLanguage: string }>;

function useSSR(initialI18nStore: Resource, initialLanguage: string): void;

function composeInitialProps(ForComponent: any): (ctx: unknown) => Promise<any>;

function getInitialProps(): {
  initialI18nStore: { [ns: string]: {} };
  initialLanguage: string;
};

// Template literal functions (compile-time)
function plural(strings: TemplateStringsArray, variable: number, ...args: ValidInterpolations[]): string;
function select(strings: TemplateStringsArray, variable: string, ...args: ValidInterpolations[]): string;
function date(strings: TemplateStringsArray, variable: Date): string;

// React components
function Plural<T, Key, Ns>(props: PluralProps<T, Key, Ns>): ReactElement;
function Select<Key, Ns>(props: SelectProps<Key, Ns>): ReactElement;

// TransWithoutContext - standalone Trans component
const TransWithoutContext: typeof Trans;

// Core configuration and utilities
interface ReactOptions {
  bindI18n?: string | false;
  bindI18nStore?: string;
  transEmptyNodeValue?: string;
  transSupportBasicHtmlNodes?: boolean;
  transWrapTextNodes?: string;
  transKeepBasicHtmlNodesFor?: string[];
  useSuspense?: boolean;
  unescape?: (str: string) => string;
}

// Context and reporting
interface ReportNamespaces {
  addUsedNamespaces(namespaces: Namespace): void;
  getUsedNamespaces(): string[];
}

// Helper types for type system integration
type $Tuple<T> = readonly [T?, ...T[]];
type $Subtract<T extends K, K> = Omit<T, keyof K>;

// Error handling
type ErrorCode = 
  | 'NO_I18NEXT_INSTANCE'
  | 'NO_LANGUAGES'
  | 'DEPRECATED_OPTION'
  | 'TRANS_NULL_VALUE'
  | 'TRANS_INVALID_OBJ'
  | 'TRANS_INVALID_VAR'
  | 'TRANS_INVALID_COMPONENTS';

type ErrorArgs = readonly [string, ErrorMeta | undefined, ...any[]];

// Global defaults management
function setDefaults(options: ReactOptions): void;
function getDefaults(): ReactOptions;

// Global i18next instance management
function setI18n(instance: i18n): void;
function getI18n(): i18n;

// Plugin initialization
const initReactI18next: ThirdPartyModule;