@lingo.dev/react

@lingo.dev/react é uma biblioteca leve em runtime para traduzir aplicações React. Carrega traduções a partir de ficheiros de idioma em JSONC, localiza-as através de um hash estável do conteúdo e apresenta strings (ou árvores React ricas) com suporte para plurais/select do ICU e formatação adaptada ao idioma para números, datas, listas e tamanhos de ficheiro.

A biblioteca não tem uma etapa de build própria — escreve l.text("Hello"), a CLI extrai-o durante lingo extract, e a string traduzida é obtida em runtime através do mesmo hash. Se houver uma tradução em falta, o texto de origem é apresentado como fallback.

Este é o runtime. As ferramentas complementares — @lingo.dev/cli para extração e publicação de traduções, e @lingo.dev/react-next para integrações com Next.js — vivem nos seus próprios pacotes.

Instalação#

bash

npm install @lingo.dev/react

Num relance#

tsx

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>;
}

Isto é tudo o que precisa para o caso mais comum: envolva a aplicação uma vez, chame useLingo() a partir de qualquer componente, e o hook devolve-lhe o objeto Lingo com .text(), .rich(), plurais, formatadores e metadados sobre o idioma atual.

O que inclui esta secção#

Início rápido

Instale, escreva a sua primeira tradução, execute `lingo extract` e veja o resultado no ecrã.

LingoProvider

O provider de contexto. Como funciona a fusão, quando criar nesting e que aspeto devem ter as mensagens.

useLingo

O hook. `text()` para strings, `rich()` para árvores React, e quando usar cada um.

Plurais e select

Formas plural e select do ICU — uma API simples que compila para MessageFormat.

Formatação

Números, moeda, percentagens, datas, tempo relativo, listas, tamanhos de ficheiro — tudo através do Intl nativo.

Esta página foi útil?