Descripción general

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

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

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

Referencias

Props

Descripciones

Valores de retorno

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 (Entrega/Despliegue Continuos), 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 el CDN (Red de Distribución de Contenido) o (2) almacenan en la salida de compilación de tu app, según tu configuración. Desde 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, el componente <T> traducirá el 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.

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

Verás una demora durante la traducción a demanda en desarrollo. Esta demora 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 su contenido (children). 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 en 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 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} // causará un error // [!code highlight]
        </T>
    );
}

La función <T> traduce a sus 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>¡Esto 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 las variables y la 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 la traducción a demanda, variables, contexto y el manejo de plurales; consulta la documentación de <T> Design Patterns.
• Para traducir strings, consulta useGT.