Conceitos fundamentais

A 18ways tem opiniões firmes sobre algumas coisas. Uma vez que estas estejam claras, o restante da superfície da API é simples.

Locale base

O seu baseLocale é a língua em que escreve.

Se a cópia do seu produto estiver escrita em inglês britânico, o seu local base é en-GB. Se estiver escrita em inglês americano, o seu local base é en-US.

Quando o locale atual corresponde ao locale base, 18ways retorna o texto original imediatamente e ignora o trabalho de tradução.

Localização alvo

O seu local de destino é a língua que o utilizador está a ler atualmente.

No React, normalmente você mantém isso no estado e passa para a raiz Ways.

Contextos

Os contextos são como os grupos de 18ways relacionam-se com o texto.

Use-os para manter os pedidos de tradução pequenos e evitar misturar texto não relacionado.

tsx
import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="fr-FR"
      baseLocale="en-GB"
      context="marketing"
    >
      <Ways context="hero">
        <Hero />
      </Ways>
      <Ways context="pricing">
        <Pricing />
      </Ways>
    </Ways>
  );
}

Os escopos Ways aninhados compõem-se em um único caminho de contexto. marketing mais hero torna-se marketing.hero.

Locais aceites

18ways distingue entre:

  • um local que pode reconhecer, como fr-FR
  • um local que o seu projeto realmente aceita

O tempo de execução pode buscar a lista de locais aceites da API e, em seguida, normalizar os valores de locais recebidos em relação a essa lista.

tsx
import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="fr-FR"
      baseLocale="en-GB"
      acceptedLocales={[
        'en-GB',
        'fr-FR',
        'de-DE',
      ]}
      context="app"
    >
      <App />
    </Ways>
  );
}

Persistência

O cookie de preferência de localidade utilizado pelo runtime é 18ways_locale.

Quando as traduções carregam

@18ways/react pode suspender enquanto um contexto semeado é resolvido e mantém um cache em memória compartilhado no cliente.

Modelo mental partilhado

Mantenha o modelo simples:

  1. Escolha o pacote correto para a sua aplicação.
  2. Defina corretamente a localidade base.
  3. Mantenha as chaves de contexto estáveis e significativas.
  4. Deixe o tempo de execução traduzir frases completas, não fragmentos.

Próximo: Formatação de Mensagens