react-mobx-i18next/dist/index.d.ts

A tiny i18n utility for MobX + React (mobx-react-lite) that replaces react-mobx-i18n. Includes @translatable decorator, withTranslatable HOC, and useTranslatable hook.

export { observer } from 'mobx-react-lite';
import { i18n } from 'i18next';
import React$1 from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { withTranslation } from 'react-i18next';

interface CreateI18nOptions {
    lang?: string;
    fallbackLang?: string | string[];
    resources?: any;
    debug?: boolean;
}
/** Create and init a configured i18n instance. */
declare function createI18n(opts?: CreateI18nOptions): Promise<i18n>;

declare const TranslatableContext: React$1.Context<{
    t: (key: string) => string;
    i18n: null;
    ready: boolean;
}>;

interface I18nProviderProps {
    i18n: i18n;
    children: React.ReactNode;
}
declare function I18nProvider({ i18n, children }: I18nProviderProps): react_jsx_runtime.JSX.Element;

/**
* MobX store for current language. Changing locale will call i18next.changeLanguage.
*/
declare class I18nStore {
    locale: string;
    private i18n;
    constructor(i18n: i18n);
    setLocale: (lang: string) => Promise<string | undefined>;
}

/**
* Namespace parameter, can be a single string or string array
*/
type NamespaceOption = string | string[] | undefined;
/**
* Directly infer its options type from react-i18next's withTranslation
* This way different versions can also maintain compatibility
*/
type WithTranslationOptionsFromLib = Parameters<typeof withTranslation>[1];
/**
* Our own TranslatableOptions (merge library options + extendable fields)
*/
type TranslatableOptions = WithTranslationOptionsFromLib & {
    keyPrefix?: string;
};
type TranslatableInContext = {
    context: TranslatableContent;
};
type TranslatableContent = {
    t: (key: string, options?: any) => string;
    i18n: any;
    ready: boolean;
};

/**
 * Hook for initializing translations.
 * Usage in function component:
 * const Hello = observer(() => {
 *   const { context } = useTranslatable('common')
 *   return <h1>{ context.t('hello', { name: 'World' }) } </h1>
 * })
 */
declare function hookTranslatable(ns?: NamespaceOption, options?: TranslatableOptions): TranslatableInContext;

declare const hocTranslatable: (ns?: NamespaceOption, options?: TranslatableOptions) => <P extends object>(Component: React$1.ComponentType<P>) => React$1.FC<P>;

declare function decoratorTranslatable(ns?: NamespaceOption, options?: TranslatableOptions): ClassDecorator;

export { type CreateI18nOptions, I18nProvider, type I18nProviderProps, I18nStore, TranslatableContext, createI18n, decoratorTranslatable as translatable, hookTranslatable as useTranslatable, hocTranslatable as withTranslatable };