# General Translation React SDKs (gt-react, gt-next, gt-react-native): Traducir cadenas
URL: https://generaltranslation.com/es/docs/react/guides/translating-strings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo traducir cadenas independientes, como etiquetas y marcadores de posición, con el hook useGT de General Translation.

Hay texto que no es JSX: marcadores de posición, atributos `aria-label`, texto alternativo y cadenas que construyes en el código. Usa el hook [`useGT`](/docs/react/reference/hooks/use-gt) para traducirlo. En componentes asíncronos de App Router, usa [`getGT`](/docs/react/nextjs/reference/functions/get-gt) en su lugar.

## Traduce con `useGT` [#use-gt]

Llama a [`useGT`](/docs/react/reference/hooks/use-gt) para obtener una función de traducción y luego pásale tu cadena fuente. [`useGT`](/docs/react/reference/hooks/use-gt) devuelve la función directamente.

<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="Componentes síncronos"
    import { useGT } from 'gt-next';

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

    ```tsx title="Componentes asíncronos de 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>

*Nota: Escribe `const gt = useGT()` — el hook devuelve la función en sí, no un objeto. Pasa un literal de cadena, no un literal de plantilla ni una concatenación, para que la CLI pueda extraerlo.*

## Insertar variables [#variables]

Usa la sintaxis de mensajes de ICU con un marcador de posición con nombre y pasa el valor en el objeto de opciones. Esto es igual en todos los frameworks.

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

## Añadir contexto [#context]

Pasa [`$context`](/docs/react/reference/types/inline-translation-options#context) para desambiguar una cadena y [`$id`](/docs/react/reference/types/inline-translation-options#id) para darle un identificador estable.

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

## Reutiliza cadenas definidas fuera de los componentes [#shared]

Para definir cadenas traducibles en el ámbito del módulo —para constantes, enums o configuración—, regístralas con [`msg`](/docs/react/reference/functions/msg) y resuélvelas con [`useMessages`](/docs/react/reference/hooks/use-messages). En los componentes asíncronos de App Router, usa [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) en su lugar. Registra la cadena una sola vez con [`msg`](/docs/react/reference/functions/msg) y luego resuélvela donde la vayas a renderizar.

<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="Componentes síncronos"
    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="Componentes asíncronos de 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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.