Documentação do hook useIntlayer

O hook useIntlayer permite recuperar conteúdo de dicionário localizado por chave em aplicações Astro.

Ele pode ser chamado em dois contextos distintos usando o mesmo caminho de importação:

1. Servidor / Frontmatter: Dentro de arquivos .astro, ele resolve automaticamente o conteúdo usando o locale da requisição armazenado em Astro.locals.intlayer.
2. Navegador / Tag <script> do cliente: Em scripts do cliente ou componentes de frameworks de interface, ele resolve para a implementação de store do lado do cliente (vanilla-intlayer).

Utilização

No Frontmatter de componentes Astro

---
import { useIntlayer } from "astro-intlayer";

const content = useIntlayer("home");
---

<main>
  <h1>{content.title}</h1>
  <p>{content.description}</p>
</main>

Em blocos <script> do cliente

---
import { useIntlayer } from "astro-intlayer";

const content = useIntlayer("home");
---

<button id="alert-btn">{content.buttonText}</button>

<script>
  import { useIntlayer } from "astro-intlayer";

  const content = useIntlayer("home");

  document.getElementById("alert-btn")?.addEventListener("click", () => {
    alert(content.buttonText);
  });
</script>

Parâmetros

useIntlayer(key, localeOrSelector?)

1. key: A chave única do dicionário (conforme definida em seus arquivos de declaração .content.ts).
2. localeOrSelector (opcional): Um locale específico ou objeto seletor ({ item }, { variant }, opcionalmente com locale). Quando fornecido, substitui o locale detectado do contexto da requisição ou store do cliente.

Descrição

O hook realiza as seguintes tarefas:

1. Resolução de Locale:
   • No servidor, lê o locale ativo de Astro.locals.intlayer por meio de um escopo AsyncLocalStorage inicializado por astro-intlayer/middleware.
   • No navegador, lê o locale ativo do armazenamento/store do cliente.
2. Recuperação de Dicionário: Injeta o conteúdo do dicionário correspondente à chave especificada.
3. Processamento de Tradução: Resolve traduções (t()), enumerações, condições e markdown em conteúdo pronto para renderização.

Documentação relacionada

• Integração intlayer
• Hook useDictionary
• Hook useLocale