Documentazione dell'hook useIntlayer

L'hook useIntlayer ti consente di recuperare contenuti localizzati da un dizionario Intlayer tramite chiave nelle applicazioni Remix 3.

Legge automaticamente la locale attiva dal contesto della richiesta corrente (tramite AsyncLocalStorage), eliminando la necessità di passare manualmente la locale attraverso gestori di route, template di viste o componenti.

Utilizzo

Nei gestori di route

import { createRouter } from "remix/router";
import { intlayer, useIntlayer } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/welcome", () => {
  const content = useIntlayer("home");

  return Response.json({
    title: content.title,
    subtitle: content.subtitle,
  });
});

Nei template di vista / componenti

import { useIntlayer } from "remix-intlayer";

export const HomeView = () => {
  const content = useIntlayer("home");

  return `
    <main>
      <h1>${content.title}</h1>
      <p>${content.subtitle}</p>
    </main>
  `;
};

Parametri

useIntlayer(key, localeOrSelector?)

1. key: La chiave univoca del dizionario (definita nei file di dichiarazione .content.ts).
2. localeOrSelector (opzionale): Una locale specifica o un oggetto selettore ({ item }, { variant }, opzionalmente con locale). Se specificato, sovrascrive la locale rilevata dal contesto della richiesta.

Descrizione

L'hook esegue le seguenti attività:

1. Rilevamento della locale del contesto: Rileva la locale corrente dall'ambito AsyncLocalStorage associato alla richiesta stabilito dal middleware intlayer().
2. Recupero del dizionario: Recupera il dizionario precompilato corrispondente alla chiave fornita.
3. Elaborazione della traduzione: Risolve traduzioni, enumerazioni, markdown e contenuti condizionali per la locale rilevata.
4. Gestione del fallback: Se chiamato al di fuori di un contesto di richiesta HTTP attivo, ricade automaticamente sulla defaultLocale configurata.

Documentazione correlata

• Middleware intlayer
• Hook useDictionary
• Hook useLocale