@lingo.dev/react es una biblioteca ligera de runtime para traducir aplicaciones React. Carga traducciones desde archivos JSONC de idioma, las localiza mediante un hash de contenido estable y renderiza cadenas (o árboles de React enriquecidos) con soporte para plurales y select de ICU, además de formato de números, fechas, listas y tamaños de archivo adaptado al idioma.
La biblioteca no tiene paso de compilación propio: escribes l.text("Hello"), el CLI lo extrae durante lingo extract, y la cadena traducida se recupera en runtime usando ese mismo hash. Si falta una traducción, se muestra el texto original como fallback.
Esto es el runtime. Las herramientas complementarias — @lingo.dev/cli para extraer y subir traducciones, y @lingo.dev/react-next para las integraciones con Next.js — viven en sus propios paquetes.
Instalación#
npm install @lingo.dev/reactDe un vistazo#
import { LingoProvider, useLingo } from "@lingo.dev/react";
import esMessages from "./locales/es.json";
export function App() {
return (
<LingoProvider locale="es" messages={esMessages}>
<Greeting name="Ada" />
</LingoProvider>
);
}
function Greeting({ name }: { name: string }) {
const l = useLingo();
return <p>{l.text("Hello, {name}!", { values: { name }, context: "Hero greeting" })}</p>;
}Ese es todo el alcance para el caso más habitual: envuelve la aplicación una sola vez, llama a useLingo() desde cualquier componente y el hook te devuelve el objeto Lingo con .text(), .rich(), plurales, formateadores y metadatos sobre el idioma actual.
