@translatehub/react

React-компоненты и хуки для интеграции TranslateHub в React-приложение.

Установка

npm install @translatehub/react @translatehub/core

Быстрый старт

1. Оберните приложение в провайдер

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { TranslationProvider } from '@translatehub/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <TranslationProvider
    apiKey="th_xxxxxxxxxxxxxxxx"
    defaultLang="ru"
    languages={['ru', 'en']}
  >
    <App />
  </TranslationProvider>,
);

2. Используйте переводы в компонентах

import { useTranslation, T, LanguageSwitcher } from '@translatehub/react';

// Хук
function Header() {
  const { t } = useTranslation();
  return <h1>{t('page.title')}</h1>;
}

// Компонент <T>
function EmptyCart() {
  return <p><T k="cart.empty" /></p>;
}

// Интерполяция
function Greeting({ name }: { name: string }) {
  const { t } = useTranslation();
  return <p>{t('greeting', { name })}</p>;
  // Перевод "Привет, {name}!" → "Привет, Артём!"
}

// Переключатель языка
function Nav() {
  return <LanguageSwitcher languages={['ru', 'en']} />;
}

API

<TranslationProvider>

| Prop | Тип | Описание | |------|-----|----------| | apiKey | string | API-ключ из настроек проекта | | defaultLang | string | Язык по умолчанию ('ru') | | languages | string[] | Список доступных языков | | fallbackToKey | boolean | Показывать ключ если перевод не найден (default: true) |

useTranslation()

const { t, lang, setLang, loading, error } = useTranslation();

| Поле | Тип | Описание | |------|-----|----------| | t(key, params?) | function | Получить перевод по ключу | | lang | string | Текущий язык | | setLang(lang) | function | Сменить язык | | loading | boolean | Идёт загрузка переводов | | error | Error \| null | Ошибка загрузки |

<T k="..." params={...} />

Декларативный компонент — аналог t() в JSX.

<LanguageSwitcher languages={[...]} />

Готовый переключатель языка. Принимает className для кастомных стилей.

withTranslation(Component)

HOC для class-компонентов. Пробрасывает t и lang как props.

Где взять API-ключ

1. Зарегистрируйтесь на translate-hub.ru
2. Создайте воркспейс и проект
3. Откройте проект → Настройки проекта → скопируйте API Key

Лицензия

MIT