@lingo.dev/react es una biblioteca ligera de runtime para traducir apps de React. Carga traducciones desde archivos JSONC por idioma, las resuelve mediante un hash de contenido estable y renderiza strings (o árboles de React enriquecidos) con soporte para plurales/select de ICU y formato de números, fechas, listas y tamaños de archivo según el idioma.
La biblioteca no tiene un paso de compilación propio: escribes l.text("Hello"), el CLI lo extrae durante lingo extract, y el string traducido se recupera en runtime con ese mismo hash. Si falta una traducción, se renderiza el texto fuente como respaldo.
Este es el runtime. Las herramientas complementarias — @lingo.dev/cli para extraer y enviar 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>;
}Eso es todo lo que necesitas para el caso más común: envuelve la app 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.
