React SDK

Installation

npm install @languager-ai/sdk

Provider Setup

import { LanguagerProvider } from '@languager-ai/sdk/react';

<LanguagerProvider
  config={{
    apiKey: process.env.NEXT_PUBLIC_LANGUAGER_API_KEY!,
    baseUrl: 'https://api.languager.ai/v1',
    sessionEndpoint: '/api/languager/session', // Backend route
  }}
  defaultLanguage="en"
  fallback={(text) => <span className="animate-pulse">{text}</span>}
>
  <App />
</LanguagerProvider>

Using the Hook

import { useTranslation, Translate } from '@languager-ai/sdk/react';

export function MyComponent() {
  const { t, language, setLanguage, isTranslating } = useTranslation();

  return (
    <>
      <select value={language} onChange={(e) => setLanguage(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
      </select>

      <h1>{t('Welcome')}</h1>
      <Translate>Save changes</Translate>
      
      {isTranslating && <p>Loading...</p>}
    </>
  );
}

Features

• Loading Fallback - Custom UI while translations load
• Language Switching - No flash to source text when switching
• SSR Hydration - Prefetch translations server-side
• Secure Sessions - Short-lived tokens for browser requests