Installation

Installation

Install the package using your preferred package manager:

# npm
npm install @onruntime/translations

# yarn
yarn add @onruntime/translations

# pnpm
pnpm add @onruntime/translations

Project Setup

1. Create Translation Files

Create a locales directory in your project with translation files for each language:

Example locales/en/common.json:

{
  "title": "Welcome",
  "greeting": "Hello, {name}!",
  "items": {
    "one": "{count} item",
    "other": "{count} items"
  }
}

2. Configure TypeScript (Optional)

For type-safe translations, create a type definition file:

// types/translations.d.ts
import "onruntime/translations";

declare module "@onruntime/translations" {
  interface TranslationNamespaces {
    common: typeof import("../locales/en/common.json");
    auth: typeof import("../locales/en/auth.json");
  }
}

3. Set Up Provider

Wrap your app with the TranslationsProvider:

// For React
import { TranslationsProvider } from "@onruntime/translations/react";
import en from "./locales/en";
import fr from "./locales/fr";

const locales = { en, fr };

function App() {
  return (
    <TranslationsProvider locale="en" locales={locales}>
      <YourApp />
    </TranslationsProvider>
  );
}

Verifying Installation

Test your setup with a simple component:

import { useTranslation } from "@onruntime/translations/react";

function TestComponent() {
  const { t } = useTranslation("common");

  return (
    <div>
      <h1>{t("title")}</h1>
      <p>{t("greeting", { name: "World" })}</p>
    </div>
  );
}

If you see your translations rendered, you're all set!

Next Steps