Descripción general

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

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

El componente <Tx> admite traducir texto sin formato, así como estructuras JSX complejas. Además, ofrece funciones para manejar variables, plurales y traducciones según el contexto. <Tx> se ejecuta únicamente del lado del servidor.

Referencias

Props

Descripciones

Comportamiento

<Tx> traduce JSX en tiempo de ejecución. Esto significa que las traducciones se realizan en tiempo real, por lo que puedes traducir contenido que solo se conoce en tiempo de ejecución. La desventaja es que hay una espera mientras se carga una traducción a demanda, lo cual 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 puede personalizarse con la configuración de renderizado. Si ocurre un Error, <Tx> devolverá el contenido original.

Nuestro consejo es traducir todo lo posible en tiempo de build 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 deployment aquí.

Ejemplos

Uso básico

El componente <Tx> traducirá sus 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 children como variables. Esto te permite marcar 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 la pluralización mediante el componente <Plural>.

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

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

Limitaciones

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

import { Tx } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</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 de tu aplicación en tiempo de ejecución.
• Usa el componente <Tx> para traducir texto plano 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.