@translatehub/react 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# @translatehub/react
|
|
2
|
+
|
|
3
|
+
React-компоненты и хуки для интеграции [TranslateHub](https://translate-hub.ru) в React-приложение.
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @translatehub/react @translatehub/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Быстрый старт
|
|
12
|
+
|
|
13
|
+
### 1. Оберните приложение в провайдер
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
// src/main.tsx
|
|
17
|
+
import React from 'react';
|
|
18
|
+
import ReactDOM from 'react-dom/client';
|
|
19
|
+
import { TranslationProvider } from '@translatehub/react';
|
|
20
|
+
import App from './App';
|
|
21
|
+
|
|
22
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
23
|
+
<TranslationProvider
|
|
24
|
+
apiKey="th_xxxxxxxxxxxxxxxx"
|
|
25
|
+
defaultLang="ru"
|
|
26
|
+
languages={['ru', 'en']}
|
|
27
|
+
>
|
|
28
|
+
<App />
|
|
29
|
+
</TranslationProvider>,
|
|
30
|
+
);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 2. Используйте переводы в компонентах
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { useTranslation, T, LanguageSwitcher } from '@translatehub/react';
|
|
37
|
+
|
|
38
|
+
// Хук
|
|
39
|
+
function Header() {
|
|
40
|
+
const { t } = useTranslation();
|
|
41
|
+
return <h1>{t('page.title')}</h1>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Компонент <T>
|
|
45
|
+
function EmptyCart() {
|
|
46
|
+
return <p><T k="cart.empty" /></p>;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Интерполяция
|
|
50
|
+
function Greeting({ name }: { name: string }) {
|
|
51
|
+
const { t } = useTranslation();
|
|
52
|
+
return <p>{t('greeting', { name })}</p>;
|
|
53
|
+
// Перевод "Привет, {name}!" → "Привет, Артём!"
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Переключатель языка
|
|
57
|
+
function Nav() {
|
|
58
|
+
return <LanguageSwitcher languages={['ru', 'en']} />;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## API
|
|
63
|
+
|
|
64
|
+
### `<TranslationProvider>`
|
|
65
|
+
|
|
66
|
+
| Prop | Тип | Описание |
|
|
67
|
+
|------|-----|----------|
|
|
68
|
+
| `apiKey` | `string` | API-ключ из настроек проекта |
|
|
69
|
+
| `defaultLang` | `string` | Язык по умолчанию (`'ru'`) |
|
|
70
|
+
| `languages` | `string[]` | Список доступных языков |
|
|
71
|
+
| `fallbackToKey` | `boolean` | Показывать ключ если перевод не найден (default: `true`) |
|
|
72
|
+
|
|
73
|
+
### `useTranslation()`
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
const { t, lang, setLang, loading, error } = useTranslation();
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
| Поле | Тип | Описание |
|
|
80
|
+
|------|-----|----------|
|
|
81
|
+
| `t(key, params?)` | `function` | Получить перевод по ключу |
|
|
82
|
+
| `lang` | `string` | Текущий язык |
|
|
83
|
+
| `setLang(lang)` | `function` | Сменить язык |
|
|
84
|
+
| `loading` | `boolean` | Идёт загрузка переводов |
|
|
85
|
+
| `error` | `Error \| null` | Ошибка загрузки |
|
|
86
|
+
|
|
87
|
+
### `<T k="..." params={...} />`
|
|
88
|
+
|
|
89
|
+
Декларативный компонент — аналог `t()` в JSX.
|
|
90
|
+
|
|
91
|
+
### `<LanguageSwitcher languages={[...]} />`
|
|
92
|
+
|
|
93
|
+
Готовый переключатель языка. Принимает `className` для кастомных стилей.
|
|
94
|
+
|
|
95
|
+
### `withTranslation(Component)`
|
|
96
|
+
|
|
97
|
+
HOC для class-компонентов. Пробрасывает `t` и `lang` как props.
|
|
98
|
+
|
|
99
|
+
## Где взять API-ключ
|
|
100
|
+
|
|
101
|
+
1. Зарегистрируйтесь на [translate-hub.ru](https://translate-hub.ru)
|
|
102
|
+
2. Создайте воркспейс и проект
|
|
103
|
+
3. Откройте проект → **Настройки проекта** → скопируйте **API Key**
|
|
104
|
+
|
|
105
|
+
## Лицензия
|
|
106
|
+
|
|
107
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@translatehub/react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "React components and hooks for TranslateHub localization",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"types": "./dist/index.d.ts"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
|
-
"files": ["dist"],
|
|
15
|
+
"files": ["dist", "README.md"],
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
|
18
18
|
"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"react-dom": ">=17.0.0"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@translatehub/core": "^1.0.
|
|
25
|
+
"@translatehub/core": "^1.0.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": "^18.2.66",
|