Documentación del hook useIntlayer

El hook useIntlayer te permite obtener contenido de diccionario localizado por clave en aplicaciones Astro.

Se puede llamar en dos contextos distintos utilizando la misma ruta de importación:

1. Servidor / Frontmatter: Dentro de archivos .astro, resuelve automáticamente el contenido utilizando el locale de solicitud almacenado en Astro.locals.intlayer.
2. Navegador / Etiqueta <script> del cliente: En scripts de cliente o componentes de frameworks de UI, resuelve a la implementación del store del lado del cliente (vanilla-intlayer).

Uso

En el Frontmatter de componentes Astro

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

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

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

En bloques <script> del 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: La clave única del diccionario (tal como se define en tus archivos de declaración .content.ts).
2. localeOrSelector (opcional): Un locale específico o un objeto selector ({ item }, { variant }, opcionalmente con locale). Si se proporciona, anula el locale detectado desde el contexto de la solicitud o el store del cliente.

Descripción

El hook realiza las siguientes tareas:

1. Resolución de Locale:
   • En el servidor, lee el locale activo de Astro.locals.intlayer a través de un ámbito AsyncLocalStorage inicializado por astro-intlayer/middleware.
   • En el navegador, lee el locale activo desde el almacenamiento/store del cliente.
2. Obtención del diccionario: Inyecta el contenido del diccionario que coincide con la clave especificada.
3. Procesamiento de traducción: Resuelve traducciones (t()), enumeraciones, condiciones y markdown en contenido listo para renderizar.

Documentación relacionada

• Integración intlayer
• Hook useDictionary
• Hook useLocale