<T>

Resumen

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>
        para <b>comprar</b> algunos <i>víveres</i>.
    </p>
</T> 

El componente <T> admite la traducción de texto plano así como estructuras JSX complejas. Además, proporciona características para manejar variables, plurales y traducciones específicas de contexto.

Referencia

Props

Descripciones

Retornos

React.JSX.Element|undefined que contiene la traducción renderizada o contenido alternativo basado en la configuración proporcionada.

Comportamiento

Producción

Durante el proceso de CD, cualquier hijo dentro de un <T> será traducido antes de que tu aplicación sea desplegada. Esto asegura tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en el momento de la construcción.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de construcción de tu aplicación, según tu configuración. Desde allí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se recurrirá al contenido original.

Asegúrate de seguir la guía de despliegue aquí.

Desarrollo

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

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

Verás un retraso durante la traducción bajo demanda en desarrollo. Este retraso no ocurrirá durante las construcciones 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 hijos. Recuerda, 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 soporta pluralización usando 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 artículo.</>}  
                plural={<>Tienes artículos.</>}  
            />  // [!code highlight]
        </T>
    );
}

Limitaciones

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

import { T } from 'gt-react';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // creará un error // [!code highlight]
        </T>
    );
}

La función <T> traduce sus descendientes.

import { T } from 'gt-react';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);
 
export default function Example() {
    return (
        <T>
            <div><b>¡Esto es válido!</b></div> // será traducido // [!code highlight]
 
            <ValidTranslation> // será traducido // [!code highlight]
                ¡Hola, mundo! // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // no será traducido
        </T>
    );
}

Notas

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

Próximos pasos

• Para explorar características más avanzadas como la traducción bajo demanda, variables, contexto y manejo de plurales, consulta la documentación de <T> Design Patterns.
• Para traducir cadenas, consulta useGT().
• Revisa el uso de componentes de variable y el uso de componentes de ramificación para patrones de traducción más avanzados.