Descripción general

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

<T>
    Hoy fui a
    {" la tienda"}
    <p>
        para <b>comprar</b> algunos <i>comestibles</i>.
    </p>
</T>

El componente <T> admite la traducción de texto sin formato y también de estructuras JSX complejas. Además, ofrece funcionalidades para gestionar variables, plurales y traducciones específicas según el contexto.

Referencias

Props

Descripciones

Devuelve

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

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 el artefacto de compilación de tu app, según tu configuración. Desde allí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado; en ese caso, se mostrará el contenido original.

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

Desarrollo

Durante el desarrollo, la función <T> traducirá el contenido a demanda. Esto es útil para prototipar cómo se verá tu app en diferentes idiomas. Recuerda añadir 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 puede personalizarse con la configuración de renderizado. Si ocurre un error, <T> devolverá el contenido original.

Verás cierta latencia durante la traducción a demanda en desarrollo. Este retraso no ocurrirá en las compilaciones de producción a menos que el contenido se traduzca explícitamente a demanda, es decir, usando <Tx> o tx.

Ejemplos

Uso básico

El <T> traducirá su contenido.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            ¡Hola, mundo!
        </T>
    );
}

Con variables

Puedes usar el componente <Var> para marcar el contenido como variables. Esto te permite indicar contenido que no debe traducirse. Por lo general, los componentes <Var> envuelven contenido dinámico.

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

export default function DynamicGreeting(user) {
    return (
        <T>
            ¡Hola, <Var>{user.name}</Var>!
        </T>
    );
}

Con plurales

El componente <T> también es compatible con la pluralización mediante el componente <Plural>.

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

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                singular={<>Tienes un elemento.</>} 
                plural={<>Tienes elementos.</>}
            />
        </T>
    );
}

Limitaciones

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

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* producirá un Error */}
        </T>
    );
}

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

import { T } from 'gt-next';

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á */}

            
            <ValidTranslation>
                ¡Hola, mundo!  {/* se traducirá */}
            </ValidTranslation> 

            <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-next.
• Usa el componente <T> para traducir texto sin formato o estructuras JSX, incluidas variables y la pluralización.
• Si usas el componente <T> en el cliente, asegúrate de envolverlo con <GTProvider> para acceder al contexto de traducción.

Próximos pasos

• Para traducción a demanda, consulta el componente <Tx>.
• Para funciones más avanzadas, consulta la referencia de <T>.
• Para traducir cadenas, consulta tx, getGT y useGT.