@baba/i18n - React Internationalization SDK

React SDK for Baba Enterprise multilingual publishing platform.

Installation

For Local Development (Before npm Publish)

npm install file:/Users/isaac/baba-SDK/packages/sdk-web

For Next.js Projects

Add to next.config.ts:

const nextConfig = {
  transpilePackages: ['@baba/i18n'],
};

export default nextConfig;

Usage

Basic Setup

import { BabaI18nProvider } from '@baba/i18n';

export default function App({ children }) {
  return (
    <BabaI18nProvider
      config={{
        projectId: 'your-project-id',
        defaultLocale: 'he',
        locales: ['he', 'en', 'ar', 'ru'],
      }}
      bundles={{
        he: {
          nav: { home: 'בית', about: 'אודות' },
          common: { submit: 'שלח', cancel: 'בטל' }
        },
        en: {
          nav: { home: 'Home', about: 'About' },
          common: { submit: 'Submit', cancel: 'Cancel' }
        }
      }}
    >
      {children}
    </BabaI18nProvider>
  );
}

In Components

'use client';
import { useTranslation } from '@baba/i18n';

export function Navigation() {
  const { t, locale, setLocale } = useTranslation();
  
  return (
    <nav>
      <a href="/">{t('nav.home')}</a>
      <a href="/about">{t('nav.about')}</a>
      
      <button onClick={() => setLocale('en')}>English</button>
      <button onClick={() => setLocale('ar')}>العربية</button>
    </nav>
  );
}

Features

• ✅ React Context-based provider
• ✅ TypeScript support
• ✅ Nested key support (nav.home)
• ✅ Variable interpolation ({{count}})
• ✅ Pluralization support
• ✅ RTL detection
• ✅ Locale bundle loading

API

BabaI18nProvider

Props:

• config - Configuration object
  • projectId - Your Baba project ID
  • defaultLocale - Default language code
  • locales - Array of supported locale codes
  • apiUrl - (Optional) Baba API URL
• bundles - Translation bundles object
• initialLocale - (Optional) Initial locale to use

useTranslation

Returns:

• t(key, options?) - Translation function
• locale - Current locale
• setLocale(locale) - Change locale
• isLoading - Loading state
• isReady - Ready state

Generating Translation Bundles

Use Baba API to translate your keys:

curl -X POST http://localhost:7394/v1/translate/blocks \
  -H "Content-Type: application/json" \
  -d '{
    "blocks": [
      {"id":"nav.home","type":"paragraph","content":"בית"},
      {"id":"nav.about","type":"paragraph","content":"אודות"}
    ],
    "sourceLanguage": "he",
    "targetLanguage": "en"
  }'

Copy the results into your bundles object.

License

Proprietary - Baba Enterprise