React

Message Loading

This page explains how Message Loading is handled in a React project.

Bundled

In the React Quick Start, loading translation content by defining it directly in the config is already demonstrated.
This section introduces another bundled loading approach: Per-locale Loading (Dynamic Import) .

Per-locale Loading (Dynamic Import)

This section reuses the same translation content structure from the React Quick Start .

To illustrate a different loading approach, the messages definition is temporarily removed from the config.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  // messages: { en: EN, fr: FR },
});

Next, create load-messages.ts under the i18n/ directory.


load-messages.ts
U

For the complete implementation, see: Loaded per locale (Dynamic Import)

Finally, use useIntor in intor-client-provider.tsx and pass in the corresponding loading function.


intor-client-provider.tsx
M


import type { ReactNode } from "react";
import { IntorProvider, useIntor } from "intor/react";
import { intorConfig } from "./intor-config";
import { loadMessages } from "./load-messages";

export function IntorClientProvider({ children }: { children: ReactNode }) {
  const value = useIntor(intorConfig, loadMessages);

  return <IntorProvider value={value}>{children}</IntorProvider>;
}

useIntor encapsulates the translation loading logic and state management.