Skip to main content

React

1. Install the package​

npm install @lingva/react

2. Set up the provider​

Wrap your app with LingvaProvider:

// app/providers.tsx (Next.js App Router)
'use client';

import { LingvaProvider } from '@lingva/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <LingvaProvider
      config={{
        apiUrl: process.env.NEXT_PUBLIC_LINGVA_API_URL!,
        apiKey: process.env.NEXT_PUBLIC_LINGVA_API_KEY!,
        projectId: process.env.NEXT_PUBLIC_LINGVA_PROJECT_ID!,
        cache: {
          ttl: 3600
        }
      }}
    >
      {children}
    </LingvaProvider>
  );
}
// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

3. Use hooks in components​

'use client';

import { useTranslation, useLingva } from '@lingva/react';

export function Welcome({ name }: { name: string }) {
  // Synchronous hook (uses cache, falls back to key)
  const { t } = useTranslation();
  
  // Asynchronous hook (returns Promise)
  const { t: tAsync } = useLingva();
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message', { name })}</p>
    </div>
  );
}