Descripción general

El componente <Tx> traduce contenido JSX en tiempo de ejecución.

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

El componente <Tx> admite traducir tanto texto plano como estructuras JSX complejas. Además, ofrece funciones para manejar variables, plurales y traducciones específicas según el contexto. <Tx> solo funciona del lado del servidor.

Referencias

Props

Descripciones

Comportamiento

<Tx> traduce JSX en tiempo de ejecución. Esto significa que las traducciones se realizan en vivo, por lo que puedes traducir contenido que solo se conoce en tiempo de ejecución. La desventaja es que, al esperar a que se cargue una traducción a demanda, se introduce una demora y el proceso es significativamente más lento.

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

Nuestra recomendación es traducir todo lo posible en tiempo de compilación usando <T>, getGT o useGT, y usar traducciones a demanda, como <Tx> y tx, solo cuando sea necesario.

Asegúrate de seguir la guía de implementación aquí.

Ejemplos

Uso básico

El componente <Tx> traducirá su children en tiempo de ejecución.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            ¡Hola, mundo!
        </Tx> 
    );
}

Con variables

Puedes usar el componente <Var> para marcar los children como variables. Esto te permite indicar contenido que no debe traducirse.

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

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

Con plurales

El componente <T> también admite pluralización con el componente <Plural>.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>Tienes un artículo.</>}  
                plural={<>Tienes artículos.</>}  
            />  
        </Tx>
    );
}

Limitaciones

La función <Tx> solo traduce a sus elementos descendientes.

import { Tx } 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 (
        <Tx>
            <div><b>¡Esto es válido!</b></div> // se traducirá 

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

            <InvalidTranslation /> // no se traducirá
        </Tx>
    );
}

Notas

• El componente <Tx> está diseñado para traducir contenido en tu aplicación en tiempo de ejecución.
• Usa el componente <Tx> para traducir texto sin formato o estructuras JSX, incluidas variables y pluralización.

Próximos pasos

• Para Buildtime Translation, consulta el componente <T>.
• Para funciones más avanzadas, consulta la referencia de <T>.
• Para traducir cadenas, consulta tx, getGT y useGT.