<T>

Descripción general

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

<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> 

El componente <T> permite traducir tanto texto plano como estructuras complejas de JSX. Además, ofrece funciones para manejar variables, plurales y traducciones específicas de contexto.

Referencia

Props

Descripciones

Retorna

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

Comportamiento

Producción

Durante el proceso de CD, cualquier elemento 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 idiomas, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de compilació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 mostrará el contenido original como respaldo.

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 hacer prototipos de 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 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 bajo 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 sus elementos 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]
            Hello, world!
        </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">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Con plurales

El componente <T> también soporta la 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={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  // [!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} // will create an 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>This is valid!</b></div> // will be translated // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // will not be translated
        </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 funciones más avanzadas como traducción bajo demanda, variables, contexto y manejo de plurales, consulta la documentación de <T> Design Patterns.
• Para traducir cadenas, revisa useGT().
• Consulta cómo usar componentes de variables y cómo usar componentes de ramificación para patrones de traducción más avanzados.