val-i18n-react/dist/main.d.ts

React goodies for val-i18n

import { I18n, TFunction, LocaleLang } from 'val-i18n';
import * as react from 'react';
import { FC, PropsWithChildren } from 'react';

/**
 * @returns The {@link I18n} instance from the nearest {@link I18nProvider}. Throws if not found.
 */
declare const useI18n: () => I18n;
/**
 * @returns The {@link TFunction} from the nearest {@link I18nProvider}. Throws if not found.
 */
declare const useTranslate: () => TFunction;
/**
 * @returns The {@link LocaleLang} from the nearest {@link I18nProvider}. Throws if not found.
 */
declare const useLang: () => LocaleLang;

declare const I18nContext: react.Context<I18n | null>;
interface I18nProviderProps {
    i18n: I18n;
}
/**
 * Provides the I18n instance to the rest of the app.
 *
 * @example
 * ```tsx
 * <I18nProvider i18n={i18n}>
 *   <App />
 * </I18nProvider>
 */
declare const I18nProvider: FC<PropsWithChildren<I18nProviderProps>>;

interface TProps {
    /** Locale translation message */
    message: string;
}
/**
 * Insert React elements to the translation message.
 *
 * @example
 * ```jsx
 * <Trans message="a{{b}}c{{d}}e">
 *   <h1 data-t-slot="b">B</h1>
 *   <p data-t-slot="d">D</p>
 * </Trans>
 * ```
 *  ↓
 * ```jsx
 * <>
 *   a<h1 data-t-slot="b">B</h1>c<p data-t-slot="d">D</p>e
 * <>
 * ```
 *
 * `data-t-slot` can be ignored if there is only one placeholder.
 *
 * @example
 * ```jsx
 * <Trans message="a{{b}}c">
 *   <h1>B</h1>
 * </Trans>
 * ```
 *  ↓
 * ```jsx
 * <>
 *   a<h1>B</h1>c
 * </>
 * ```
 */
declare const Trans: FC<PropsWithChildren<TProps>>;

export { I18nContext, I18nProvider, I18nProviderProps, TProps, Trans, useI18n, useLang, useTranslate };