Multi-Lingual Support

A powerful, dynamic multi-lingual translation package that provides an "auto-translate" widget for React applications and an Express middleware for integration with LibreTranslate.

Features

• 🚀 Auto-Translation: Automatically detects and translates text nodes and dynamic attributes in the DOM.
• 🛡️ Shadow DOM Support: Deeply traverses and observes Shadow DOMs for translations.
• 📦 Modular: Use only the frontend components or the backend services as needed.
• ⚡ Performance: Implements batching, debouncing, and caching to minimize API calls.
• 🎨 Custom Styles: Professional TranslationWidget for easy language selection.

Installation

npm install multi-lingual-support

Backend Usage (Express)

Mount the translation middleware to your Express app:

import express from 'express';
import { createAutoTranslateMiddleware } from 'multi-lingual-support';

const app = express();
app.use(express.json());

app.use('/api/auto-translate', createAutoTranslateMiddleware({
    apiURL: 'https://libretranslate.com',
    apiKey: 'your-api-key', // Optional
    maxBatchSize: 40
}));

app.listen(3000);

Frontend Usage (React)

Wrap your application with AutoTranslateProvider and add the TranslationWidget:

import React from 'react';
import { AutoTranslateProvider, TranslationWidget } from 'multi-lingual-npm-package';

const config = {
    apiEndpoint: '/api/auto-translate/translate',
    tenant: 'your-tenant-id', // Optional
    defaultLanguage: 'en'
};

function App() {
    return (
        <AutoTranslateProvider config={config}>
            <div>
                <h1>Hello World!</h1>
                <p>This page will be automatically translated.</p>
                <TranslationWidget />
            </div>
        </AutoTranslateProvider>
    );
}

License

MIT