@intlayer/docs 5.5.8

package/it/packages/react-intlayer/index.md

@@ -0,0 +1,260 @@
+# react-intlayer: Pacchetto NPM per internazionalizzare (i18n) un'applicazione React
+
+**Intlayer** è una suite di pacchetti progettata specificamente per gli sviluppatori JavaScript. È compatibile con framework come React, React e Express.js.
+
+**Il pacchetto `react-intlayer`** consente di internazionalizzare la tua applicazione React. Fornisce provider di contesto e hook per l'internazionalizzazione in React.
+
+## Perché internazionalizzare la tua applicazione React?
+
+Internazionalizzare la tua applicazione React è essenziale per servire efficacemente un pubblico globale. Permette alla tua applicazione di fornire contenuti e messaggi nella lingua preferita di ogni utente. Questa capacità migliora l'esperienza utente e amplia la portata della tua applicazione rendendola più accessibile e rilevante per persone di diversi contesti linguistici.
+
+## Perché integrare Intlayer?
+
+- **Gestione dei contenuti basata su JavaScript**: Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente.
+- **Ambiente Type-Safe**: Utilizza TypeScript per garantire che tutte le definizioni dei tuoi contenuti siano precise e prive di errori.
+- **File di contenuti integrati**: Mantieni le tue traduzioni vicine ai rispettivi componenti, migliorando la manutenibilità e la chiarezza.
+
+## Installazione
+
+Installa il pacchetto necessario utilizzando il tuo gestore di pacchetti preferito:
+
+```bash packageManager="npm"
+npm install react-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add react-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add react-intlayer
+```
+
+## Esempio di utilizzo
+
+Con Intlayer, puoi dichiarare i tuoi contenuti in modo strutturato ovunque nel tuo codice.
+
+Per impostazione predefinita, Intlayer esegue la scansione dei file con estensione `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`.
+
+> Puoi modificare l'estensione predefinita impostando la proprietà `contentDir` nel [file di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/configuration.md).
+
+```bash codeFormat="typescript"
+.
+├── intlayer.config.ts
+└── src
+    └── components
+        ├── Component1
+        │   ├── index.content.ts
+        │   └── index.tsx
+        └── Component2
+            ├── index.content.ts
+            └── index.tsx
+```
+
+```bash codeFormat="esm"
+.
+├── intlayer.config.mjs
+└── src
+    └── components
+        ├── Component1
+        │   ├── index.content.mjs
+        │   └── index.mjx
+        └── Component2
+            ├── index.content.mjs
+            └── index.mjx
+```
+
+```bash codeFormat="commonjs"
+.
+├── intlayer.config.cjs
+└── src
+    └── components
+        ├── Component1
+        │   ├── index.content.cjs
+        │   └── index.cjx
+        └── Component2
+            ├── index.content.cjs
+            └── index.cjx
+```
+
+### Dichiarare i tuoi contenuti
+
+`react-intlayer` è progettato per funzionare con il pacchetto [`intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/intlayer/index.md). `intlayer` è un pacchetto che consente di dichiarare i tuoi contenuti ovunque nel tuo codice. Converte le dichiarazioni di contenuti multilingue in dizionari strutturati che si integrano perfettamente nella tua applicazione.
+
+Ecco un esempio di dichiarazione di contenuti:
+
+```tsx fileName="src/Component1/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+// Dichiarazione dei contenuti per il componente 1
+const component1Content = {
+  key: "component-1",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+} satisfies Dictionary;
+
+export default component1Content;
+```
+
+```jsx fileName="src/Component1/index.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Dichiarazione dei contenuti per il componente 1
+const component1Content = {
+  key: "component-1",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+};
+
+export default component1Content;
+```
+
+```jsx fileName="src/Component1/index.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Dichiarazione dei contenuti per il componente 1
+const component1Content = {
+  key: "component-1",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+};
+
+module.exports = component1Content;
+```
+
+```json fileName="src/Component1/index.content.json" codeFormat="json"
+{
+  "key": "component-1",
+  "content": {
+    "myTranslatedContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Hello World",
+        "fr": "Bonjour le monde",
+        "es": "Hola Mundo"
+      }
+    },
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Meno di meno una macchina",
+        "-1": "Meno una macchina",
+        "0": "Nessuna macchina",
+        "1": "Una macchina",
+        ">5": "Alcune macchine",
+        ">19": "Molte macchine"
+      }
+    }
+  }
+}
+```
+
+### Utilizzare i contenuti nel tuo codice
+
+Una volta dichiarati i tuoi contenuti, puoi utilizzarli nel tuo codice. Ecco un esempio di come utilizzare i contenuti in un componente React:
+
+```tsx {4,7} fileName="src/components/Component1Example.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+export const Component1Example: FC = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Creare dichiarazione contenuti correlata
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+```jsx {3,6} fileName="src/components/Component1Example.mjx" codeFormat="esm"
+"use client";
+
+import { useIntlayer } from "react-intlayer";
+
+const Component1Example = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Creare dichiarazione contenuti correlata
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+```jsx {3,6} fileName="src/components/Component1Example.csx" codeFormat="commonjs"
+"use client";
+
+const { useIntlayer } = require("react-intlayer");
+
+const Component1Example = () => {
+  const { myTranslatedContent } = useIntlayer("component-1"); // Creare dichiarazione contenuti correlata
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+## Padroneggiare l'internazionalizzazione della tua applicazione React
+
+Intlayer fornisce molte funzionalità per aiutarti a internazionalizzare la tua applicazione React.
+
+**Per saperne di più su queste funzionalità, consulta la guida [Internazionalizzazione (i18n) di React con Intlayer e Vite e React](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_vite+react.md) per applicazioni Vite e React, o la guida [Internazionalizzazione (i18n) di React con Intlayer e React (CRA)](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_create_react_app.md) per React Create App.**
+
+## Funzioni fornite dal pacchetto `react-intlayer`
+
+Il pacchetto `react-intlayer` fornisce anche alcune funzioni per aiutarti a internazionalizzare la tua applicazione.
+
+- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/t.md)
+- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/useIntlayer.md)
+- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/useDictionary.md)
+- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/useLocale.md)
+- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/useIntlayerAsync.md)

package/it/packages/react-intlayer/t.md

@@ -0,0 +1,277 @@
+# Documentazione: Funzione `t` in `react-intlayer`
+
+La funzione `t` nel pacchetto `react-intlayer` è uno strumento fondamentale per l'internazionalizzazione inline all'interno della tua applicazione React. Ti consente di definire traduzioni direttamente nei tuoi componenti, rendendo semplice visualizzare contenuti localizzati in base alla lingua corrente.
+
+---
+
+## Panoramica
+
+La funzione `t` viene utilizzata per fornire traduzioni per diverse lingue direttamente nei tuoi componenti. Passando un oggetto contenente le traduzioni per ogni lingua supportata, `t` restituisce la traduzione appropriata in base al contesto della lingua corrente nella tua applicazione React.
+
+---
+
+## Caratteristiche Principali
+
+- **Traduzioni Inline**: Ideale per testi rapidi e inline che non richiedono una dichiarazione di contenuto separata.
+- **Selezione Automatica della Lingua**: Restituisce automaticamente la traduzione corrispondente alla lingua corrente.
+- **Supporto TypeScript**: Fornisce sicurezza dei tipi e completamento automatico quando utilizzato con TypeScript.
+- **Integrazione Facile**: Funziona perfettamente all'interno dei componenti React.
+
+---
+
+## Firma della Funzione
+
+```typescript
+t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string
+```
+
+### Parametri
+
+- `translations`: Un oggetto in cui le chiavi sono i codici delle lingue (ad esempio, `en`, `fr`, `es`) e i valori sono le stringhe tradotte corrispondenti.
+
+### Restituisce
+
+- Una stringa che rappresenta il contenuto tradotto per la lingua corrente.
+
+---
+
+## Esempi di Utilizzo
+
+### Utilizzo Base di `t` in un Componente
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { t } from "react-intlayer";
+
+export const ComponentExample: FC = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
+import { t } from "react-intlayer";
+
+const ComponentExample = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
+const { t } = require("react-intlayer");
+
+const ComponentExample = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+### Traduzioni Inline negli Attributi
+
+La funzione `t` è particolarmente utile per traduzioni inline negli attributi JSX. Quando si localizzano attributi come `alt`, `title`, `href` o `aria-label`, puoi utilizzare `t` direttamente all'interno dell'attributo.
+
+```jsx
+<button
+  aria-label={t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+  })}
+>
+  {t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+  })}
+  <img
+    src="/path/to/image"
+    alt={t({
+      en: "A beautiful scenery",
+      fr: "Un beau paysage",
+      es: "Un hermoso paisaje",
+    })}
+  />
+</button>
+```
+
+---
+
+## Argomenti Avanzati
+
+### Integrazione con TypeScript
+
+La funzione `t` è sicura per i tipi quando utilizzata con TypeScript, garantendo che tutte le lingue richieste siano fornite.
+
+```typescript codeFormat="typescript"
+import { t, type IConfigLocales } from "react-intlayer";
+
+const translations: IConfigLocales<string> = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="esm"
+import { t, type IConfigLocales } from "react-intlayer";
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t, type IConfigLocales } = require("react-intlayer");
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+### Rilevamento della Lingua e Contesto
+
+In `react-intlayer`, la lingua corrente è gestita tramite il `IntlayerProvider`. Assicurati che questo provider racchiuda i tuoi componenti e che la prop `locale` sia passata correttamente.
+
+#### Esempio:
+
+```tsx fileName="src/app.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerProvider } from "react-intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => (
+  <IntlayerProvider locale={locale}>
+    {/* I tuoi componenti qui */}
+  </IntlayerProvider>
+);
+```
+
+```jsx fileName="src/app.mjx" codeFormat="esm"
+import { IntlayerProvider } from "react-intlayer";
+
+const App = ({ locale }) => (
+  <IntlayerProvider locale={locale}>
+    {/* I tuoi componenti qui */}
+  </IntlayerProvider>
+);
+```
+
+```jsx fileName="src/app.csx" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+
+const App = ({ locale }) => (
+  <IntlayerProvider locale={locale}>
+    {/* I tuoi componenti qui */}
+  </IntlayerProvider>
+);
+```
+
+---
+
+## Errori Comuni e Risoluzione dei Problemi
+
+### `t` Restituisce Undefined o Traduzione Errata
+
+- **Causa**: La lingua corrente non è impostata correttamente o manca la traduzione per la lingua corrente.
+- **Soluzione**:
+  - Verifica che il `IntlayerProvider` sia configurato correttamente con la lingua appropriata.
+  - Assicurati che il tuo oggetto di traduzioni includa tutte le lingue necessarie.
+
+### Traduzioni Mancanti in TypeScript
+
+- **Causa**: L'oggetto delle traduzioni non soddisfa le lingue richieste, causando errori in TypeScript.
+- **Soluzione**: Usa il tipo `IConfigLocales` per garantire la completezza delle tue traduzioni.
+
+```typescript codeFormat="typescript"
+const translations: IConfigLocales<string> = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // La mancanza di 'es' causerà un errore in TypeScript
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="esm"
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // La mancanza di 'es' causerà un errore in TypeScript
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t, type IConfigLocales } = require("react-intlayer");
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // La mancanza di 'es' causerà un errore in TypeScript
+};
+
+const text = t(translations);
+```
+
+---
+
+## Suggerimenti per un Utilizzo Efficace
+
+1. **Usa `t` per Traduzioni Inline Semplici**: Ideale per tradurre piccoli pezzi di testo direttamente nei tuoi componenti.
+2. **Preferisci `useIntlayer` per Contenuti Strutturati**: Per traduzioni più complesse e riutilizzo del contenuto, definisci il contenuto nei file di dichiarazione e usa `useIntlayer`.
+3. **Fornitura Consistente della Lingua**: Assicurati che la lingua sia fornita in modo coerente in tutta l'applicazione tramite il `IntlayerProvider`.
+4. **Sfrutta TypeScript**: Usa i tipi di TypeScript per individuare traduzioni mancanti e garantire la sicurezza dei tipi.
+
+---
+
+## Conclusione
+
+La funzione `t` in `react-intlayer` è uno strumento potente e conveniente per gestire traduzioni inline nelle tue applicazioni React. Integrandola efficacemente, migliori le capacità di internazionalizzazione della tua app, offrendo un'esperienza migliore agli utenti di tutto il mondo.
+
+Per un utilizzo più dettagliato e funzionalità avanzate, consulta la [documentazione di react-intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_visual_editor.md).
+
+---
+
+**Nota**: Ricorda di configurare correttamente il tuo `IntlayerProvider` per garantire che la lingua corrente venga passata correttamente ai tuoi componenti. Questo è cruciale affinché la funzione `t` restituisca le traduzioni corrette.