Quick Start

React

This page demonstrates the minimal setup of Intor in a React project.

Installation

In this example, we use Vite to create a React project.
See the official documentation for details: Vite

Install Intor:

npm install intor
yarn add intor
pnpm add intor
bun add intor

Project Structure

index.json
U
index.json
U
App.tsx
M
main.tsx
M
intor-config.ts
U
intor-client-provider.tsx
U

Integration Steps

♯1 Messages

Create a messages directory in your project, and add a subdirectory for each locale.
Each locale provides an index.json file.

index.json
U
index.json
U
{
  "hello": "Hello, {name}",
  "rich": "A <tag>text</tag>."
}
{
  "hello": "Bonjour, {name}",
  "rich": "Un <tag>texte</tag>."
}

♯2 Config

Create an i18n/ directory under src/, and add an intor-config.ts file inside it.
This example uses the most basic translation loading approach by defining messages directly in the config.

For more details, see: Message Loading 

intor-config.ts
U
import { defineIntorConfig } from "intor";
import EN from "../../messages/en/index.json";
import FR from "../../messages/fr/index.json";

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

♯3 Initialization

Create intor-client-provider.tsx inside the i18n/ directory.

intor-client-provider.tsx
U
import type { ReactNode } from "react";
import { getClientLocale } from "intor";
import { IntorProvider } from "intor/react";
import { intorConfig } from "./intor-config";

export function IntorClientProvider({ children }: { children: ReactNode }) {
  const locale = getClientLocale(intorConfig);

  return (
    <IntorProvider value={{ config: intorConfig, locale }}>
      {children}
    </IntorProvider>
  );
}

Then, wrap your application with this provider in main.tsx.

main.tsx
M
// ...
import { IntorClientProvider } from "./i18n/intor-client-provider.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <IntorClientProvider>
      <App />
    </IntorClientProvider>
  </StrictMode>,
);

Usage Example

Use useTranslator to access translation capabilities:

  • t: returns the resolved text
  • tRich: renders structured messages with semantic tags
  • setLocale: switches the active locale
App.tsx
M
// ...
import { useTranslator } from "intor/react";

function App() {
  const { t, tRich, setLocale } = useTranslator();

  return (
    <>
      <p>{t("hello", { name: "Intor" })}</p>

      <p>{tRich("rich", { tag: (children) => <b>{children}</b> })}</p>

      <button onClick={() => setLocale("en")}>English</button>
      <button onClick={() => setLocale("fr")}>French</button>
    </>
  );
}

export default App;
Message Loading
Learn more about how Message Loading is handled in a React project.
Type Safety
Learn more about how type safety is enabled in a React project.

On this page