Descripción general

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

<T>
    Hoy fui a
    {" la tienda"}
    <p>
        a <b>comprar</b> algunos <i>víveres</i>.
    </p>
</T>

El componente <T> admite la traducción de texto simple y de estructuras JSX complejas. Además, ofrece funciones para gestionar variables, plurales y traducciones con 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 proporcionada.

Comportamiento

Producción

Durante el CD process, 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 Contenido) o (2) almacenan en la salida de compilación de tu aplicación, según tu configuración. A partir de ahí, el contenido traducido se entrega 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 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 una demora durante la traducción a demanda en desarrollo. Esta demora no se producirá 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á sus children.

import { T } from 'gt-next';

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

Con variables

Puedes usar el componente <Var> para marcar children como variables. Esto te permite marcar contenido que no debe traducirse. Normalmente, 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 usando 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 contenido dinámico.

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* esto creará un error */}
        </T>
    );
}

La función <T> traduce a sus elementos 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>¡Esto 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 plano o estructuras JSX, incluidas las variables y la pluralización.
• Si usas el componente <T> en el cliente, asegúrate de envolverlo en un <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.