Integrazione React: Documentazione del Hook useDictionary

Questa sezione fornisce una guida dettagliata sull'utilizzo dell'hook useDictionary all'interno delle applicazioni React, consentendo una gestione efficiente dei contenuti localizzati senza un editor visivo.

Importare useDictionary in React

L'hook useDictionary può essere integrato nelle applicazioni React importandolo in base al contesto:

• Componente Client:

  typescript

  import { useDictionary } from "react-intlayer"; // Utilizzato nei componenti React lato client

• Componente Server:

  typescript

  import { useDictionary } from "react-intlayer/server"; // Utilizzato nei componenti React lato server

Parametri

L'hook accetta due parametri:

1. dictionary: Un oggetto dizionario dichiarato contenente contenuti localizzati per chiavi specifiche.
2. locale (opzionale): La lingua desiderata. Se non specificato, utilizza il contesto corrente.

Dizionario

Tutti gli oggetti dizionario devono essere dichiarati in file di contenuti strutturati per garantire la sicurezza dei tipi e prevenire errori a runtime. Puoi trovare le istruzioni di configurazione qui. Ecco un esempio di dichiarazione di contenuto:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies Dictionary;export default componentContent;

Esempio di Utilizzo in React

Di seguito un esempio di utilizzo dell'hook useDictionary in un componente React:

import type { FC } from "react";import { useDictionary } from "react-intlayer";import componentContent from "./component.content";const ComponentExample: FC = () => {  const { title, content } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

Integrazione Server

Se utilizzi l'hook useDictionary al di fuori di IntlayerProvider, la lingua deve essere fornita esplicitamente come parametro durante il rendering del componente:

import type { FC } from "react";import { useDictionary } from "react-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {  const { content } = useDictionary(clientComponentExampleContent, locale);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

Note sugli Attributi

A differenza delle integrazioni che utilizzano editor visivi, attributi come buttonTitle.value non si applicano qui. Accedi direttamente alle stringhe localizzate come dichiarato nel tuo contenuto.

<button title={content.title}>{content.content}</button>

Suggerimenti Aggiuntivi

• Sicurezza dei Tipi: Utilizza sempre Dictionary per definire i tuoi dizionari per garantire la sicurezza dei tipi.
• Aggiornamenti di Localizzazione: Quando aggiorni i contenuti, assicurati che tutte le lingue siano coerenti per evitare traduzioni mancanti.

Questa documentazione si concentra sull'integrazione dell'hook useDictionary, fornendo un approccio semplificato alla gestione dei contenuti localizzati senza fare affidamento sulle funzionalità di editor visivi.