# General Translation React SDKs (gt-react, gt-next): Перевод строк
URL: https://generaltranslation.com/ru/docs/react/guides/translating-strings.mdx
---

title: Перевод строк
description: Как переводить отдельные строки, такие как метки и плейсхолдеры, с помощью хука useGT от General Translation в React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

Не весь текст находится в JSX — это могут быть плейсхолдеры, `aria-label`, alt-текст и строки, которые вы формируете в коде. Используйте для этого хук [`useGT`](/docs/react/reference/hooks/use-gt). В асинхронных компонентах App Router вместо него используйте [`getGT`](/docs/react/nextjs/reference/functions/get-gt).

## Перевод с помощью `useGT` [#use-gt]

Вызовите `useGT`, чтобы получить функцию перевода, а затем передайте ей исходную строку. `useGT` возвращает саму функцию.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useGT } from 'gt-react';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="Синхронные компоненты"
    import { useGT } from 'gt-next';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```

    ```tsx title="Асинхронные компоненты App Router"
    import { getGT } from 'gt-next/server';

    async function Search() {
      const gt = await getGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useGT } from 'gt-tanstack-start';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useGT } from 'gt-react-native';

    function Search() {
      const gt = useGT();
      return <TextInput placeholder={gt('Search products')} accessibilityLabel={gt('Search')} />;
    }
    ```
  </Tab>
</Tabs>

*Примечание: пишите `const gt = useGT()` — хук возвращает саму функцию, а не объект. Передавайте строковый литерал, а не шаблонный литерал или результат конкатенации, чтобы CLI мог его извлечь.*

## Подстановка переменных [#variables]

Используйте синтаксис сообщений ICU с именованным заполнителем и передавайте значение через объект параметров. Это одинаково для всех фреймворков.

```tsx
const gt = useGT();
gt('Welcome back, {name}!', { name: user.name });
```

## Добавление контекста [#context]

Передайте `$context`, чтобы устранить неоднозначность строки, а `$id` — чтобы присвоить ей стабильный идентификатор.

```tsx
gt('Bank', { $context: 'a bank of a river' });
```

## Повторное использование строк, определённых вне компонентов [#shared]

Чтобы задавать переводимые строки на уровне модуля — например, для констант, перечислений или конфигурации, — зарегистрируйте их с помощью [`msg`](/docs/react/reference/functions/msg), а затем получайте через [`useMessages`](/docs/react/reference/hooks/use-messages). В асинхронных компонентах App Router вместо этого используйте [`getMessages`](/docs/react/nextjs/reference/functions/get-messages). Зарегистрируйте строку один раз через `msg`, а затем используйте её там, где она рендерится.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { msg, useMessages } from 'gt-react';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="Синхронные компоненты"
    import { msg, useMessages } from 'gt-next';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```

    ```tsx title="Асинхронные компоненты App Router"
    import { msg } from 'gt-next';
    import { getMessages } from 'gt-next/server';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    async function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = await getMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { msg, useMessages } from 'gt-tanstack-start';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { msg, useMessages } from 'gt-react-native';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <Text>{m(STATUS[status])}</Text>;
    }
    ```
  </Tab>
</Tabs>
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries