@chainplatform/language

Language Manager for React Native

A lightweight and flexible language management system for React Native apps. Supports local storage, lazy loading, API-based translation loading, and full React Context integration.

🚀 Features

• Persistent language storage
• Auto-detect device locale
• Lazy-load translation files
• Optional API-based translation loading
• Simple string interpolation
• Number and date formatting using Intl
• React Context + HOC integration
• Type-safe and lightweight

📦 Installation

npm install @chainplatform/language
# or
yarn add @chainplatform/language

🧠 Usage

1️⃣ Basic Setup

import React from "react";
import { LanguageProvider } from "@chainplatform/language";
import App from "./App";

export default function Root() {
  return (
    <LanguageProvider
      fallback="en"
      translations={{
        en: { hello: "Hello" },
        vi: { hello: "Xin chào" }
      }}
    >
      <App />
    </LanguageProvider>
  );
}

2️⃣ Using the t() function

You can use the LanguageContext hook or withLanguage HOC to access translation functions.

✅ Using React Context

import React, { useContext } from "react";
import { LanguageContext } from "@chainplatform/language";

export default function MyComponent() {
  const { t, changeLanguage } = useContext(LanguageContext);

  return (
    <>
      <Text>{t("hello")}</Text>
      <Button title="Switch to Vietnamese" onPress={() => changeLanguage("vi")} />
    </>
  );
}

✅ Using HOC

import React from "react";
import { withLanguage } from "@chainplatform/language";

function MyComponent({ t, language }) {
  return <Text>{t("hello")} ({language})</Text>;
}

export default withLanguage(MyComponent);

3️⃣ Lazy Loading Translations

<LanguageProvider
  fallback="en"
  lazyLoad={async (lang) => {
    switch (lang) {
      case "vi":
        return await import("./locales/vi.json").then(m => m.default);
      case "en":
        return await import("./locales/en.json").then(m => m.default);
      default:
        return {};
    }
  }}
>
  <App />
</LanguageProvider>

4️⃣ API-Based Loading

<LanguageProvider
  fallback="en"
  loadFromApi={async (lang) => {
    const res = await fetch(`https://example.com/i18n/${lang}.json`);
    return await res.json();
  }}
>
  <App />
</LanguageProvider>

5️⃣ Persistent Storage

By default, it uses @chainplatform/sdk’s retrieveStorage and saveStorage.
You can override with your own implementation:

<LanguageProvider
  storage={{
    get: async (key) => AsyncStorage.getItem(key),
    set: async (key, val) => AsyncStorage.setItem(key, val)
  }}
>
  <App />
</LanguageProvider>

6️⃣ Formatting Helpers

t("welcome", { name: "John" }); // "Welcome, John"

formatNumber(123456.78); // 123,456.78 or 123.456,78 depending on locale
format("DateTimeFormat", new Date(), { dateStyle: "medium" });

⚙️ API Reference

Language.init(options)

Initializes the language manager.
Called automatically by LanguageProvider.

Option	Type	Description
fallback	string	Default fallback language
translations	object	Predefined translations
lazyLoad	function	Async function to load translation file dynamically
loadFromApi	function	Async function to fetch translations from API
language	string	Force set initial language
storage	object	Custom { get, set } async storage methods
storage_key	string	Custom key for language storage

Language.t(key, vars)

Translates a key with optional variables.

Language.changeLanguage(lang)

Changes the current language and saves it to storage.

Language.onLanguageChange(callback)

Subscribes to language changes.

🧩 Example Translation Files

locales/en.json

{
  "hello": "Hello",
  "welcome": "Welcome, {name}!"
}

locales/vi.json

{
  "hello": "Xin chào",
  "welcome": "Chào mừng, {name}!"
}

📄 License

MIT License © ChainPlatform