Descripción general

El componente <T> es el método principal de traducción en gt-react.

<T id="example"> // [!code highlight]
    Hoy fui a
    {" la tienda"}
    <p>
        a <b>comprar</b> algunos <i>víveres</i>.
    </p>
</T> 

El componente <T> admite traducir tanto texto sin formato como estructuras JSX complejas. Además, ofrece funciones para manejar variables, plurales y traducciones específicas según el contexto.

Referencias

Props

Descripciones

Retornos

React.JSX.Element|undefined, que contiene la traducción renderizada o el contenido de respaldo predeterminado según la configuración proporcionada.

Comportamiento

Producción

Durante el proceso de CD, cualquier children dentro de un <T> se traducirá antes de que se implemente tu aplicación. Esto garantiza tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se (1) almacenan en la CDN (Red de distribución de contenidos) o (2) almacenan en la salida de build de tu aplicación, según tu configuración. A partir de ahí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado (el contenido original).

Asegúrate de seguir la guía de implementación aquí.

Desarrollo

Durante el desarrollo, la función <T> traducirá contenido a demanda. Esto es útil para crear prototipos de cómo se verá tu app en diferentes idiomas. Recuerda agregar una Dev API key a tu entorno para habilitar este comportamiento.

Durante la carga, <T> devolverá undefined a menos que los idiomas sean similares (en-US vs en-GB), aunque este comportamiento se puede personalizar con la configuración de renderizado. Si ocurre un error, <T> devolverá el contenido original.

Verás un retraso durante la traducción a demanda en desarrollo. Este retraso no ocurrirá en las compilaciones de producción, ya que todo ya estará traducido.

Ejemplos

Uso básico

El componente <T> puede traducir cadenas simples usando un id y sus children. Recuerda que el componente <T> debe usarse dentro de un <GTProvider> para acceder a las traducciones.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            ¡Hola, mundo!
        </T> 
    );
}

Con variables

El componente <T> puede incluir variables para contenido dinámico dentro de las traducciones.

import { T, Var } from 'gt-react';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            ¡Hola, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Con plurales

El componente <T> también admite la pluralización mediante el componente <Plural>.

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Tienes un elemento.</>}  
                plural={<>Tienes elementos.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitaciones

El componente <T> no traduce contenido dinámico.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // generará un error // [!code highlight]
        </T>
    );
}

La función <T> traduce a sus elementos descendientes.

import { T } from 'gt-react';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>Sin traducción</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>¡Es válido!</b></div> // se traducirá // [!code highlight]

            <ValidTranslation> // se traducirá // [!code highlight]
                ¡Hola, mundo! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // no se traducirá
        </T>
    );
}

Notas

• El componente <T> está diseñado para traducir contenido en tu aplicación. Es el método principal de localización en gt-react.
• Usa el componente <T> para traducir texto sin formato o estructuras JSX, incluidas variables y pluralización.
• Asegúrate de envolver el componente <T> en un <GTProvider> para acceder al contexto de traducción.

Próximos pasos

• Explora funciones más avanzadas como traducción a demanda, variables, contexto y manejo de plurales; consulta la documentación de <T> Design Patterns.
• Para traducir cadenas, consulta useGT.