Package APIs

@i18n-micro/react

Exported API of @i18n-micro/react, generated from the source.

React bindings for i18n-micro — hooks, context, and UI components.

Entry points: @i18n-micro/react, @i18n-micro/react/client, @i18n-micro/react/router, @i18n-micro/react/server.

setLocale that loads first. A store write is synchronous for React, even inside startTransition, so a reader that suspends on a missing dictionary would show its fallback: this keeps the old UI until the messages are in. The last call wins; a failed load rejects and leaves the locale as it was.

function useLocaleSwitch(
  load: (locale: string) => unknown,
): [ (locale: string) => Promise<void>, boolean ]

`useT`

One translation as a value: the component renders only when this string changes, not on every locale or message write, nor when a provider gets a new adapter object.

function useT(
  key: TranslationKey,
  params?: Params,
  defaultValue?: string,
  routeName?: string,
): string

See TranslationKey · Params

Constants

`I18nConfigContext`

const I18nConfigContext: React.Context<I18nConfig | null>

See I18nConfig

`I18nContext`

The instance alone, stable while the app runs: useT and <I18nT> read only this, so a new adapter object does not render them.

const I18nContext: React.Context<I18n | null>

See I18n

Types

`I18nConfig`

What a provider adds to its instance. It changes with its props, an adapter built in render on every render.

interface I18nConfig

locales

Locale[] | null required

defaultLocale

string | null required

router

I18nRoutingStrategy | null required

api

{ snapshot: string; value: UseI18nReturn; } | null required

The useI18n() object of the current snapshot, shared by every consumer of this provider.

methods

{ current: TranslationMethods | null; } required

Translation methods by snapshot: they outlive the config, so t does not change with an adapter.

`I18nGroupProps`

interface I18nGroupProps extends Omit<HostAttrs<HTMLDivElement>, 'children'>

prefix

string required

groupClass

string

children

HostNode | ((props: { prefix: string; t: (key: string, params?: Record<string, string | number | boolean>) => string; }) => HostNode)

`I18nLinkProps`

type I18nLinkProps = HostAnchorAttrs<HTMLAnchorElement> & { … }

RouteTarget required

activeStyle

HostStyle

localeRoute

(to: RouteTarget, locale?: string) => RouteTarget

children

HostNode

`I18nProviderProps`

interface I18nProviderProps extends Partial<I18nOptions>

i18n

I18n

An instance you created. Without it, the outer provider's; without that, one built from the options next to it: plain data, so a server component can pass them.

locales

Locale[]

defaultLocale

string

routingStrategy

I18nRoutingStrategy

children

HostNode

See I18nOptions

`I18nRoutingStrategy`

Routing strategy interface for i18n Implement this interface to integrate with any router library Matches Vue/Solid package interface for consistency

interface I18nRoutingStrategy

getCurrentPath

() => string required

Returns the current path with its query and hash, so a locale switch keeps them. Links compare it by page: query and hash do not count.

linkComponent

string | HostComponent<{ href: string; children?: HostNode; style?: HostStyle; className?: string; [key: string]: unknown; }>

Component to use for rendering links (e.g., RouterLink)

push

(target: { path: string; }) => void required

Function to navigate to another route/locale

replace

(target: { path: string; }) => void required

Function to replace current route

resolvePath

(to: RouteTarget, locale: string) => RouteTarget

Generate path for specific locale

getRoute

() => { fullPath: string; query: Record<string, unknown>; }

(Optional) Get current route object for SEO/Meta tags

`I18nSwitcherProps`

interface I18nSwitcherProps extends HostAttrs<HTMLDivElement>

`I18nTComponent`

What fills a {name} placeholder: a node, or a function returning one (it may use hooks).

type I18nTComponent = HostNode | (() => HostNode)

`I18nTProps`

interface I18nTProps extends Omit<HostAttrs<HTMLElement>, 'children' | 'defaultValue'>, Omit<I18nTRenderProps, 'tag'>

tag

HostTag

components

Record<string, I18nTComponent>

Elements for {name} placeholders. Beats a param of the same name.

children

HostNode | ((props: { translation: string; }) => HostNode)

Replaces the text. As a function it gets the translation, like Vue's default slot.

See I18nTRenderProps

`RouteTarget`

Where a link or a switch goes.

type RouteTarget = string | {
  path?: string;
}

`UseI18nOptions`

interface UseI18nOptions

locales

Locale[]

defaultLocale

string

`UseI18nReturn`

interface UseI18nReturn

Re-exports

Declared in another package of this repository and documented on its page.

From @i18n-micro/core: defaultPlural · interpolate · FormatService
From @i18n-micro/runtime: createI18n · ReactI18n (as I18n) · ReactI18nOptions (as I18nOptions)
From @i18n-micro/types: CleanTranslation · Getter · Locale · LocaleCode · ModuleOptions · Params · PluralFunc · TranslationKey · Translations

function createReactRouterAdapter(
  locales: Locale[],
  defaultLocale: string,
  location: ReturnType<typeof useLocation>,
  navigate: ReturnType<typeof useNavigate>,
): I18nRoutingStrategy

See Locale · I18nRoutingStrategy

function I18nT(props: ServerI18nTProps): HostElement

See ServerI18nTProps

Types

`ServerI18nTProps`

interface ServerI18nTProps extends I18nTProps

i18n

I18n required

The request's instance: a server component has no context.

See I18nTProps

Generated from the TypeScript sources and their JSDoc by pnpm run docs:generate. Back to all packages · Integration guides

@i18n-micro/preact

Exported API of @i18n-micro/preact, generated from the source.

@i18n-micro/route-strategy

Exported API of @i18n-micro/route-strategy, generated from the source.