> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unlingo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# i18next

> Integrate Unlingo with React applications using i18next for powerful internationalization

## Overview

This guide shows how to integrate Unlingo with React applications using i18next, one of the most popular internationalization frameworks. You'll learn how to set up a custom backend that fetches translations from Unlingo and integrates seamlessly with i18next.

## Prerequisites

* React application
* Basic knowledge of React hooks
* An Unlingo project with translations

## Installation

Install the required dependencies:

<CodeGroup>
  ```bash npm theme={null}
  npm install i18next react-i18next
  ```

  ```bash yarn theme={null}
  yarn add i18next react-i18next
  ```

  ```bash pnpm theme={null}
  pnpm add i18next react-i18next
  ```
</CodeGroup>

## Setting Up the Unlingo Backend

Create a custom i18next backend that fetches translations from Unlingo:

<CodeGroup>
  ```javascript unlingo-backend.js theme={null}
  class UnlingoBackend {
      constructor() {
          this.type = 'backend';
          // You can add own options if needed
          this.init();
      }

      init() {}

      async read(language, namespace, callback) {
          try {
              const url = new URL('/v1/translations', 'https://api.unlingo.com');
              url.searchParams.set('release', process.env.UNLINGO_RELEASE_TAG);
              url.searchParams.set('namespace', namespace);
              url.searchParams.set('lang', language);

              const response = await fetch(url.toString(), {
                  method: 'GET',
                  headers: {
                      'x-api-key': process.env.UNLINGO_API_KEY,
                      'Content-Type': 'application/json',
                  },
              });

              if (!response.ok) {
                  const errorData = await response.json().catch(() => ({}));
                  return callback(new Error(`HTTP ${response.status}: ${errorData.error || response.statusText}`), null);
              }

              const data = await response.json();
              callback(null, data);
          } catch (error) {
              console.error('Unlingo Backend Error:', error);
              callback(error, null);
          }
      }
  }

  export default UnlingoBackend;
  ```

  ```typescript unlingo-backend.ts theme={null}
  import { BackendModule, ReadCallback } from 'i18next';

  class UnlingoBackend implements BackendModule {
      static type = 'backend' as const;
      type = 'backend' as const;

      constructor() {
          // You can add own options if needed
          this.init();
      }

      init() {}

      async read(language: string, namespace: string, callback: ReadCallback) {
          try {
              const url = new URL('/v1/translations', 'https://api.unlingo.com');
              url.searchParams.set('release', process.env.UNLINGO_RELEASE_TAG);
              url.searchParams.set('namespace', namespace);
              url.searchParams.set('lang', language);

              const response = await fetch(url.toString(), {
                  method: 'GET',
                  headers: {
                      'x-api-key': process.env.UNLINGO_API_KEY,
                      'Content-Type': 'application/json',
                  },
              });

              if (!response.ok) {
                  const errorData = await response.json().catch(() => ({}));
                  return callback(new Error(`HTTP ${response.status}: ${errorData.error || response.statusText}`), null);
              }

              const data = await response.json();
              callback(null, data);
          } catch (error) {
              console.error('Unlingo Backend Error:', error);
              callback(error as Error, null);
          }
      }
  }

  export default UnlingoBackend;
  ```
</CodeGroup>

## Configuring i18next

Set up i18next with the Unlingo backend:

<CodeGroup>
  ```javascript i18n.js theme={null}
  import i18next from 'i18next';
  import { initReactI18next } from 'react-i18next';
  import UnlingoBackend from './unlingo-backend';

  i18next.use(UnlingoBackend).use(initReactI18next).init({
      lng: 'en',
      fallbackLng: 'en',
  });

  export default i18next;
  ```

  ```typescript i18n.ts theme={null}
  import i18next from 'i18next';
  import { initReactI18next } from 'react-i18next';
  import UnlingoBackend from './unlingo-backend';

  i18next.use(UnlingoBackend).use(initReactI18next).init({
      lng: 'en',
      fallbackLng: 'en',
  });

  export default i18next;
  ```
</CodeGroup>

## Environment Variables

Add your Unlingo credentials to your environment file:

```env .env.local theme={null}
UNLINGO_API_KEY=your_api_key_here
UNLINGO_RELEASE_TAG=1.0.0
```

## Initializing in Your App

Import and initialize i18next in your main App component:

<CodeGroup>
  ```javascript App.js theme={null}
  import React, { Suspense } from 'react';
  import './i18n'; // Import i18n configuration
  import MainApp from './MainApp';

  function App() {
      return (
          <Suspense fallback={<div>Loading translations...</div>}>
              <MainApp />
          </Suspense>
      );
  }

  export default App;
  ```

  ```typescript App.tsx theme={null}
  import React, { Suspense } from 'react';
  import './i18n';
  import MainApp from './MainApp';

  const App: React.FC = () => {
    return (
      <Suspense fallback={<div>Loading translations...</div>}>
        <MainApp />
      </Suspense>
    );
  };

  export default App;
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="next-intl" icon="code" href="/integrations/next-intl">
    Integrate applications with next-intl
  </Card>

  <Card title="Get Translation" icon="bolt" href="/api-reference/translations/get-translations">
    Explore the API reference
  </Card>
</CardGroup>