i18next

npm install i18next react-i18next

yarn add i18next react-i18next

pnpm add i18next react-i18next

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;

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;

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;

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;

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;

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;