Descripción general
Descripción general del SDK de React de General Translation
Introducción
El SDK de React de General Translation es una biblioteca de internacionalización (i18n) de código abierto para React.
Ofrece un conjunto de herramientas para ayudarte a internacionalizar tu aplicación React de manera fácil y mantenible, con paridad de características con otras bibliotecas populares de i18n.
El SDK de React puede utilizarse sin la plataforma General Translation, y funcionará de manera muy similar a otras bibliotecas de i18n.
Sin embargo, también se integra con nuestra plataforma, ofreciendo características adicionales como:
- Recarga en caliente de traducciones en desarrollo
- Traducciones automáticas con IA
- Sincronización de traducciones con la plataforma General Translation
- Integración nativa con nuestro CDN de traducciones
Conceptos
Hay 4 conceptos principales que debes entender sobre el SDK.
El componente <GTProvider>
El componente <T>
El hook useGT
(Opcional) El hook useDict
El componente <GTProvider>
import { GTProvider } from 'gt-react';El componente <GTProvider> es el componente principal que necesitas agregar a tu aplicación.
Se utiliza para proporcionar contexto al resto de tu aplicación.
Este contexto incluye el idioma actual y las traducciones relevantes para ese idioma.
Consideraciones importantes
- El provider debe envolver toda tu aplicación.
- Idealmente, debe colocarse lo más alto posible en el árbol, como en tu componente raíz.
Consulta la página de GTProvider para obtener más información.
El componente <T>
El componente <T> es la forma recomendada de traducir contenido en tu aplicación.
Es un componente de React que se puede usar para envolver cualquier elemento JSX, y renderizará automáticamente el contenido del elemento en un idioma compatible.
Recomendamos usar el componente <T> siempre que sea posible, ya que permite la mayor flexibilidad en las traducciones.
A diferencia de las cadenas de texto, el componente <T> se puede usar para traducir contenido HTML, lo que lo hace mucho más potente que las traducciones de cadenas.
Ejemplos
<T>
<div>Hello, world!</div>
</T><T>
<div>
<h1> Here is an image </h1>
<img src="https://example.com/image.png" alt="Example" />
</div>
</T><T>
Formatting can be done easily with the `<T>` component.
<Num>{1000}</Num>
<DateTime>{new Date()}</DateTime>
<Currency>{1000}</Currency>
</T>Consulta la guía de traducción de JSX para aprender sobre las diferentes formas de usar el componente <T>.
Consulta la Referencia de la API de T para ver la API del componente <T>.
El hook useGT
El hook useGT es un hook de React que se puede usar de manera similar al componente <T>, con algunas diferencias.
El hook devuelve una función que se puede usar para traducir cadenas de texto.
const translate = useGT();
translate('Hello, world!');En comparación con el componente <T>, el hook useGT permite más flexibilidad en tu base de código.
Por ejemplo, si tienes una estructura de datos compleja con cadenas anidadas, un componente <T> sería más difícil de usar.
const t = useGT();
const data = {
title: t('Hello, world!'),
description: t('This is a description'),
};Consulta la guía de cadenas para aprender más sobre el hook useGT.
Consulta la Referencia de la API de useGT para más información.
El hook useDict
El hook useDict es un hook de React que devuelve una función que se puede usar para obtener traducciones para una clave dada.
const dictionary = {
hello: {
world: 'Hello, world!',
},
};const translate = useDict();
translate('hello.world');Este comportamiento es similar al de otras librerías de traducción, como react-i18next y next-intl.
No recomendamos usar el hook useDict en tu aplicación. El uso frecuente del hook useDict hará que tu base de código sea más difícil de mantener,
y generará una gran deuda técnica.
En su lugar, recomendamos usar el componente <T> o el hook useGT.
Si estás migrando desde otra librería de i18n, el hook useDict es un reemplazo directo y puede ser útil para migrar tu base de código de manera incremental.
Consulta la guía de diccionarios para aprender más sobre el hook useDict.
Consulta la Referencia de la API de useDict para más información.
Próximos Pasos
- Aprende cómo configurar tu proyecto React con el SDK: Inicio Rápido del Proyecto
- Aprende cómo traducir cadenas de texto con el hook
useGT: Traduciendo Cadenas de Texto - Aprende cómo traducir contenido JSX con el componente
<T>: Traduciendo JSX
¿Qué te parece esta guía?